fix: switch to useStateWithDeps

Author: peterjuras

package.json

@@ -57,6 +57,7 @@
   },
   "dependencies": {
     "prop-types": "^15.7.2",
-    "time-sync": "^2.2.5"
+    "time-sync": "^2.2.5",
+    "use-state-with-deps": "^1.0.0"
   }
 }

src/use-countdown.ts

@@ -1,7 +1,7 @@
-import { useContext, useEffect, useRef, useDebugValue } from "react";
+import { useContext, useEffect, useDebugValue } from "react";
 import TimeContext from "./context";
 import { Interval } from "time-sync/constants";
-import { useForceUpdate } from "./use-force-update";
+import { useStateWithDeps } from "use-state-with-deps";
 
 export interface PartialCountdownConfig {
   until?: number;
@@ -25,32 +25,23 @@ export function useCountdown(
   countdownConfig: PartialCountdownConfig = {}
 ): number {
   const timeSync = useContext(TimeContext);
-  const forceUpdate = useForceUpdate();
+  const usableConfig = getUsableConfig(countdownConfig);
 
-  const lastConfig = useRef(countdownConfig);
-  let usableConfig = getUsableConfig(lastConfig.current);
-
-  const timeLeft = useRef(timeSync.getTimeLeft(usableConfig));
-
-  if (
-    countdownConfig.interval !== lastConfig.current.interval ||
-    countdownConfig.until !== lastConfig.current.until
-  ) {
-    lastConfig.current = countdownConfig;
-    usableConfig = getUsableConfig(countdownConfig);
-
-    timeLeft.current = timeSync.getTimeLeft(usableConfig);
-  }
+  const [timeLeft, setTimeLeft] = useStateWithDeps(() => {
+    return timeSync.getTimeLeft({
+      interval: usableConfig.interval,
+      until: usableConfig.until
+    });
+  }, [usableConfig.interval, usableConfig.until]);
 
   useEffect((): (() => void) | void => {
     if (Date.now() < usableConfig.until) {
       return timeSync.createCountdown((newTimeLeft): void => {
-        timeLeft.current = newTimeLeft;
-        forceUpdate();
+        setTimeLeft(newTimeLeft);
       }, usableConfig);
     }
   }, [usableConfig.until, usableConfig.interval]);
 
-  useDebugValue(timeLeft.current);
-  return timeLeft.current;
+  useDebugValue(timeLeft);
+  return timeLeft;
 }

src/use-force-update.ts

@@ -1,7 +1,7 @@
-import { useContext, useDebugValue, useEffect, useRef } from "react";
+import { useContext, useDebugValue, useEffect } from "react";
 import TimeContext from "./context";
 import { Interval } from "time-sync/constants";
-import { useForceUpdate } from "./use-force-update";
+import { useStateWithDeps } from "use-state-with-deps";
 
 export interface TimerConfig {
   interval?: Interval;
@@ -10,29 +10,23 @@ export interface TimerConfig {
 
 export function useTime(timerConfig: TimerConfig = {}): number {
   const timeSync = useContext(TimeContext);
-  const forceUpdate = useForceUpdate();
-
-  const lastConfig = useRef(timerConfig);
-  const time = useRef(timeSync.getCurrentTime(timerConfig));
-
-  if (
-    timerConfig.interval !== lastConfig.current.interval ||
-    timerConfig.unit !== lastConfig.current.unit
-  ) {
-    lastConfig.current = timerConfig;
-
-    time.current = timeSync.getCurrentTime(timerConfig);
-  }
+  const [time, setTime] = useStateWithDeps(
+    () =>
+      timeSync.getCurrentTime({
+        interval: timerConfig.interval,
+        unit: timerConfig.unit
+      }),
+    [timerConfig.interval, timerConfig.unit]
+  );
 
   useEffect(
     (): (() => void) =>
       timeSync.addTimer((currentTime): void => {
-        time.current = currentTime;
-        forceUpdate();
-      }, lastConfig.current),
-    [lastConfig.current.unit, lastConfig.current.interval]
+        setTime(currentTime);
+      }, timerConfig),
+    [timerConfig.unit, timerConfig.interval]
   );
 
-  useDebugValue(time.current);
-  return time.current;
+  useDebugValue(time);
+  return time;
 }

src/use-time.ts

@@ -5655,6 +5655,11 @@ urix@^0.1.0:
   resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
   integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
 
+use-state-with-deps@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/use-state-with-deps/-/use-state-with-deps-1.0.0.tgz#670e6f98849db63741875ee8a7979f1b8a02fe4a"
+  integrity sha512-EIIDxPzlU7hVhMmyY8XNq+ASMfhzoG7W3oNcwM1f8fRnHt2cQH+8vNr8jTat7aLLv56rOaMFjvKi/5tDIJLNwA==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"