by codex: feat. General Improvements

components/ResetCountdown.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Text } from "react-native";
+import { COUNTDOWN_INTERVAL_MS } from "@/lib/constants";
 import { formatResetCountdown, formatResetCountdownISO } from "@/lib/timeUtils";
 
 interface ResetCountdownProps {
@@ -8,18 +9,28 @@ interface ResetCountdownProps {
 }
 
 export function ResetCountdown({ resetAtSeconds, resetAtISO }: ResetCountdownProps) {
+  const latest = useRef({ resetAtSeconds, resetAtISO });
+  latest.current = { resetAtSeconds, resetAtISO };
+
   const getLabel = () => {
-    if (resetAtSeconds !== undefined) return formatResetCountdown(resetAtSeconds);
-    if (resetAtISO) return formatResetCountdownISO(resetAtISO);
+    if (latest.current.resetAtSeconds !== undefined) {
+      return formatResetCountdown(latest.current.resetAtSeconds);
+    }
+    if (latest.current.resetAtISO) return formatResetCountdownISO(latest.current.resetAtISO);
     return "";
   };
 
   const [label, setLabel] = useState(getLabel);
 
   useEffect(() => {
-    setLabel(getLabel());
-    const interval = setInterval(() => setLabel(getLabel()), 60_000);
+    const update = () => setLabel(getLabel());
+    update();
+    const interval = setInterval(update, COUNTDOWN_INTERVAL_MS);
     return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    setLabel(getLabel());
   }, [resetAtSeconds, resetAtISO]);
 
   if (!label) return null;