fix: doble execution of onPause on useCountDown and useCountUp #33

dlcastillop · Apr 6, 2024 · c0874bd · c0874bd
1 parent 7998458
commit c0874bd
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,8 @@
-import { useStopwatch } from "./hooks";
+import { useCountDown } from "./hooks";
 
 const App = () => {
   const { current, isPaused, isOver, pause, play, reset, togglePause } =
-    useStopwatch();
+    useCountDown(1, 10);
 
   return (
     <div>

diff --git a/src/helpers/useCounter.ts b/src/helpers/useCounter.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { BaseCounter, BaseCounterOptions } from "../interfaces";
 import { addLeadingZero } from ".";
 
@@ -16,6 +16,7 @@ export const useCounter = (
   const [count, setCount] = useState(isCountingUp ? min : max);
   const [paused, setPaused] = useState(startPaused ?? false);
   const [isOver, setIsOver] = useState(false);
+  const wasPausedRef = useRef(startPaused ?? false);
 
   useEffect(() => {
     if (paused) {
@@ -42,8 +43,11 @@ export const useCounter = (
   }, [isOver]);
 
   useEffect(() => {
-    paused && onPause && onPause();
-  }, [paused]);
+    if (!wasPausedRef.current && paused) {
+      onPause && onPause();
+    }
+    wasPausedRef.current = paused;
+  }, [paused, onPause]);
 
   return {
     current: {