diff --git a/js/desktop/src/features/compose/recording-overlay.tsx b/js/desktop/src/features/compose/recording-overlay.tsx
index 597e2df..4527241 100644
--- a/js/desktop/src/features/compose/recording-overlay.tsx
+++ b/js/desktop/src/features/compose/recording-overlay.tsx
@@ -48,10 +48,7 @@ const WARNING_AT_SECONDS =
  * the recording into the review step.
  */
 function useRecordingCountdown(active: boolean) {
-  const [{ elapsed, isWarning }, setState] = useState({
-    elapsed: 0,
-    isWarning: false,
-  });
+  const [elapsed, setElapsed] = useState(0);
   const requestIntent = useComposeIntentStore((s) => s.request);
 
   useEffect(() => {
@@ -59,9 +56,11 @@ function useRecordingCountdown(active: boolean) {
 
     const start = Date.now();
     let stopped = false;
+    // Tick faster than 1s so the auto-stop lands within ~250ms of the cap, but
+    // only re-render when the whole-second value actually changes.
     const interval = setInterval(() => {
       const seconds = Math.floor((Date.now() - start) / 1000);
-      setState({ elapsed: seconds, isWarning: seconds >= WARNING_AT_SECONDS });
+      setElapsed((prev) => (prev === seconds ? prev : seconds));
       if (seconds >= RECORDING_MAX_DURATION_SECONDS && !stopped) {
         stopped = true;
         requestIntent('stop');
@@ -69,11 +68,11 @@ function useRecordingCountdown(active: boolean) {
     }, 250);
     return () => {
       clearInterval(interval);
-      setState({ elapsed: 0, isWarning: false });
+      setElapsed(0);
     };
   }, [active, requestIntent]);
 
-  return { elapsed, isWarning };
+  return { elapsed, isWarning: elapsed >= WARNING_AT_SECONDS };
 }
 
 function RecordingTimer({