fix: Fix Countdown resets on every setState

Author: Hoa Phan

src/CountDown/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable no-bitwise */
 import React, {
   useCallback,
@@ -61,7 +62,7 @@ const CountdownComponent = React.forwardRef<any, CountDownProps>(
         onPause(currentSeconds.current);
       }
       clear();
-    }, [onPause]);
+    }, []);
 
     const resume = () => {
       if (!interval.current) {
@@ -79,15 +80,13 @@ const CountdownComponent = React.forwardRef<any, CountDownProps>(
     };
 
     useEffect(() => {
+      init();
+
       return () => {
         pause();
         init();
       };
-    }, [init, pause]);
-
-    useEffect(() => {
-      init();
-    }, [init, initialSeconds]);
+    }, []);
 
     const timer = useCallback(() => {
       interval.current = BackgroundTimer.setInterval(() => {
@@ -109,21 +108,21 @@ const CountdownComponent = React.forwardRef<any, CountDownProps>(
         }
         setKey(Math.random());
       }, 1000);
-    }, [onEnd, onTimes]);
+    }, []);
 
     const start = useCallback(() => {
       init();
 
       if (!interval.current) {
         timer();
       }
-    }, [init, timer]);
+    }, []);
 
     useEffect(() => {
       if (autoStart) {
         start();
       }
-    }, [autoStart, initialSeconds, start]);
+    }, [autoStart]);
 
     const clear = () => {
       if (interval.current) {

src/Timer/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable no-bitwise */
 import React, {
   useCallback,
@@ -62,7 +63,7 @@ const TimerComponent = React.forwardRef<any, TimerProps>((props, ref) => {
       }
       setKey(Math.random());
     }, 1000);
-  }, [onTimes]);
+  }, []);
 
   const initTime = useCallback((iSeconds: number) => {
     if (iSeconds >= 3600) {
@@ -85,27 +86,29 @@ const TimerComponent = React.forwardRef<any, TimerProps>((props, ref) => {
     hours.current = 0;
     minute.current = 0;
     seconds.current = 0;
+
     if (initialSeconds > 0) {
       initTime(initialSeconds);
     }
+
     clear();
     setKey(Math.random());
-  }, [initTime, initialSeconds]);
+  }, [initialSeconds]);
 
   const start = useCallback(() => {
     init();
 
     if (!interval.current) {
       timer();
     }
-  }, [init, timer]);
+  }, []);
 
   const pause = useCallback(() => {
     clear();
     if (onPause) {
       onPause(currentSeconds.current);
     }
-  }, [onPause]);
+  }, []);
 
   const resume = () => {
     if (!interval.current) {
@@ -136,7 +139,7 @@ const TimerComponent = React.forwardRef<any, TimerProps>((props, ref) => {
       init();
       setKey(Math.random());
     };
-  }, [init, pause]);
+  }, []);
 
   useEffect(() => {
     if (initialSeconds > 0) {