main 🧊 use timer rework

Author: debabin

packages/core/src/bundle/hooks/useInterval/useInterval.js

@@ -7,19 +7,19 @@ import { useEffect, useRef, useState } from 'react';
  * @overload
  * @param {() => void} callback Any callback function
  * @param {number} [interval=1000] Time in milliseconds
- * @param {boolean} [options.enabled=true] Start the interval immediately
+ * @param {boolean} [options.immediately=true] Start the interval immediately
  * @returns {UseIntervalReturn}
  *
  * @example
- * const { active, pause, resume } = useInterval(() => console.log('inside interval'), 2500);
+ * const { active, pause, resume, toggle } = useInterval(() => console.log('inside interval'), 2500);
  *
  * @overload
  * @param {() => void} callback Any callback function
  * @param {number} [options.interval=1000] Time in milliseconds
- * @param {boolean} [options.enabled=true] Start the interval immediately
+ * @param {boolean} [options.immediately=true] Start the interval immediately
  *
  * @example
- * const { active, pause, resume } = useInterval(() => console.log('inside interval'), { interval: 2500 });
+ * const { active, pause, resume, toggle } = useInterval(() => console.log('inside interval'), { interval: 2500 });
  */
 export const useInterval = ((...params) => {
     const callback = params[0];
@@ -29,8 +29,8 @@ export const useInterval = ((...params) => {
     const options = typeof params[1] === 'object'
         ? params[1]
         : params[2];
-    const enabled = options?.enabled ?? true;
-    const [active, setActive] = useState(enabled ?? true);
+    const immediately = options?.immediately ?? true;
+    const [active, setActive] = useState(immediately ?? true);
     const intervalIdRef = useRef();
     const internalCallbackRef = useRef(callback);
     internalCallbackRef.current = callback;
@@ -42,20 +42,17 @@ export const useInterval = ((...params) => {
             clearInterval(intervalIdRef.current);
         };
     }, [active, interval]);
-    useEffect(() => {
-        setActive(enabled);
-    }, [enabled]);
-    const pause = () => {
-        setActive(false);
-    };
+    const pause = () => setActive(false);
     const resume = () => {
         if (interval <= 0)
             return;
         setActive(true);
     };
+    const toggle = () => setActive(!active);
     return {
         active,
         pause,
-        resume
+        resume,
+        toggle
     };
 });

packages/core/src/bundle/hooks/useMemory/useMemory.js

@@ -19,6 +19,6 @@ export const useMemory = () => {
         totalJSHeapSize: 0,
         usedJSHeapSize: 0
     });
-    useInterval(() => setValue(performance.memory), 1000, { enabled: supported });
+    useInterval(() => setValue(performance.memory), 1000, { immediately: supported });
     return { supported, value };
 };

packages/core/src/bundle/hooks/useTimer/useTimer.js

@@ -1,5 +1,4 @@
-import { useState } from 'react';
-import { useInterval } from '../useInterval/useInterval';
+import { useEffect, useRef, useState } from 'react';
 export const getTimeFromSeconds = (timestamp) => {
     const roundedTimestamp = Math.ceil(timestamp);
     const days = Math.floor(roundedTimestamp / (60 * 60 * 24));
@@ -23,48 +22,68 @@ export const getTimeFromSeconds = (timestamp) => {
  * @param {() => void} callback The function to be executed once countdown timer is expired
  *
  * @example
- * const { days, hours, minutes, seconds, toggle, pause, start, restart, running } = useTimer(1000, () => console.log('ready'));
+ * const { days, hours, minutes, seconds, toggle, pause, start, restart, resume, active } = useTimer(1000, () => console.log('ready'));
  *
  * @overload
  * @param {number} timestamp The timestamp value that define for how long the timer will be running
- * @param {boolean} options.autostart The flag to decide if timer should start automatically
+ * @param {boolean} options.immediately The flag to decide if timer should start automatically
  * @param {() => void} options.onExpire The function to be executed when the timer is expired
  * @param {(timestamp: number) => void} options.onTick The function to be executed on each tick of the timer
  *
  * @example
- * const { days, hours, minutes, seconds, toggle, pause, start, restart, running } = useTimer(1000);
+ * const { days, hours, minutes, seconds, toggle, pause, start, restart, resume, active } = useTimer(1000);
  */
 export const useTimer = ((...params) => {
     const timestamp = params[0];
     const options = (typeof params[1] === 'object' ? params[1] : { onExpire: params[1] });
-    const autostart = options?.autostart ?? true;
+    const immediately = options?.immediately ?? true;
+    const [active, setActive] = useState(immediately ?? true);
     const [seconds, setSeconds] = useState(Math.ceil(timestamp / 1000));
-    const [running, setRunning] = useState(autostart);
-    const restart = (timestamp, autostart = true) => {
+    const intervalIdRef = useRef();
+    const optionsRef = useRef();
+    optionsRef.current = options ?? {};
+    useEffect(() => {
+        if (!active)
+            return;
+        const onInterval = () => {
+            optionsRef.current?.onTick?.(seconds);
+            setSeconds((prevSeconds) => {
+                const updatedSeconds = prevSeconds - 1;
+                if (updatedSeconds === 0) {
+                    setActive(false);
+                    optionsRef.current?.onExpire?.();
+                }
+                return updatedSeconds;
+            });
+        };
+        intervalIdRef.current = setInterval(onInterval, 1000);
+        return () => {
+            clearInterval(intervalIdRef.current);
+        };
+    }, [active]);
+    const pause = () => setActive(false);
+    const resume = () => {
+        if (seconds <= 0)
+            return;
+        setActive(true);
+    };
+    const toggle = () => setActive(!active);
+    const restart = (timestamp, immediately = true) => {
         setSeconds(Math.ceil(timestamp / 1000));
-        setRunning(autostart);
+        if (immediately)
+            setActive(true);
     };
     const start = () => {
-        setRunning(true);
+        setActive(true);
         setSeconds(Math.ceil(timestamp / 1000));
     };
-    useInterval(() => {
-        options?.onTick?.(seconds);
-        setSeconds((prevSeconds) => {
-            const updatedSeconds = prevSeconds - 1;
-            if (updatedSeconds === 0) {
-                setRunning(false);
-                options?.onExpire?.();
-            }
-            return updatedSeconds;
-        });
-    }, 1000, { enabled: running });
     return {
         ...getTimeFromSeconds(seconds),
-        pause: () => setRunning(false),
-        toggle: () => setRunning(!running),
+        pause,
+        active,
+        resume,
+        toggle,
         start,
-        restart,
-        running
+        restart
     };
 });

packages/core/src/hooks/useInterval/useInterval.test.ts

@@ -6,6 +6,10 @@ beforeEach(() => {
   vi.useFakeTimers();
 });
 
+afterEach(() => {
+  vi.clearAllTimers();
+});
+
 it('Should use interval', () => {
   const { result } = renderHook(() => useInterval(vi.fn, 1000));
   expect(result.current.active).toBeTruthy();
@@ -14,7 +18,7 @@ it('Should use interval', () => {
 });
 
 it('Should pause and resume properly', () => {
-  const { result } = renderHook(() => useInterval(() => {}, 1000));
+  const { result } = renderHook(() => useInterval(vi.fn, 1000));
   const { pause, resume } = result.current;
 
   expect(result.current.active).toBeTruthy();
@@ -25,22 +29,9 @@ it('Should pause and resume properly', () => {
 });
 
 it('Should not be active when disabled', () => {
-  const { result } = renderHook(() => useInterval(() => {}, 1000, { enabled: false }));
-
-  expect(result.current.active).toBeFalsy();
-});
-
-it('Should update active state on rerender', () => {
-  const { result, rerender } = renderHook(
-    (enabled: boolean) => useInterval(() => {}, 1000, { enabled }),
-    { initialProps: false }
-  );
+  const { result } = renderHook(() => useInterval(vi.fn, 1000, { immediately: false }));
 
   expect(result.current.active).toBeFalsy();
-
-  rerender(true);
-
-  expect(result.current.active).toBeTruthy();
 });
 
 it('Should call callback on interval', () => {

packages/core/src/hooks/useInterval/useInterval.ts

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from 'react';
 /** The use interval options */
 export interface UseIntervalOptions {
   /** Start the interval immediately */
-  enabled?: boolean;
+  immediately?: boolean;
 }
 
 /** The use interval return type */
@@ -14,6 +14,8 @@ export interface UseIntervalReturn {
   pause: () => void;
   /** Resume the interval */
   resume: () => void;
+  /** Toggle the interval */
+  toggle: () => void;
 }
 
 interface UseInterval {
@@ -30,19 +32,19 @@ interface UseInterval {
  * @overload
  * @param {() => void} callback Any callback function
  * @param {number} [interval=1000] Time in milliseconds
- * @param {boolean} [options.enabled=true] Start the interval immediately
+ * @param {boolean} [options.immediately=true] Start the interval immediately
  * @returns {UseIntervalReturn}
  *
  * @example
- * const { active, pause, resume } = useInterval(() => console.log('inside interval'), 2500);
+ * const { active, pause, resume, toggle } = useInterval(() => console.log('inside interval'), 2500);
  *
  * @overload
  * @param {() => void} callback Any callback function
  * @param {number} [options.interval=1000] Time in milliseconds
- * @param {boolean} [options.enabled=true] Start the interval immediately
+ * @param {boolean} [options.immediately=true] Start the interval immediately
  *
  * @example
- * const { active, pause, resume } = useInterval(() => console.log('inside interval'), { interval: 2500 });
+ * const { active, pause, resume, toggle } = useInterval(() => console.log('inside interval'), { interval: 2500 });
  */
 export const useInterval = ((...params: any[]): UseIntervalReturn => {
   const callback = params[0] as () => void;
@@ -54,9 +56,9 @@ export const useInterval = ((...params: any[]): UseIntervalReturn => {
     typeof params[1] === 'object'
       ? (params[1] as (UseIntervalOptions & { interval?: number }) | undefined)
       : (params[2] as UseIntervalOptions | undefined);
-  const enabled = options?.enabled ?? true;
+  const immediately = options?.immediately ?? true;
 
-  const [active, setActive] = useState<boolean>(enabled ?? true);
+  const [active, setActive] = useState<boolean>(immediately ?? true);
 
   const intervalIdRef = useRef<ReturnType<typeof setInterval>>();
   const internalCallbackRef = useRef(callback);
@@ -71,22 +73,19 @@ export const useInterval = ((...params: any[]): UseIntervalReturn => {
     };
   }, [active, interval]);
 
-  useEffect(() => {
-    setActive(enabled);
-  }, [enabled]);
-
-  const pause = () => {
-    setActive(false);
-  };
+  const pause = () => setActive(false);
 
   const resume = () => {
     if (interval <= 0) return;
     setActive(true);
   };
 
+  const toggle = () => setActive(!active);
+
   return {
     active,
     pause,
-    resume
+    resume,
+    toggle
   };
 }) as UseInterval;

packages/core/src/hooks/useMemory/useMemory.ts

@@ -40,7 +40,7 @@ export const useMemory = (): UseMemoryReturn => {
     usedJSHeapSize: 0
   });
 
-  useInterval(() => setValue(performance.memory), 1000, { enabled: supported });
+  useInterval(() => setValue(performance.memory), 1000, { immediately: supported });
 
   return { supported, value };
 };

packages/core/src/hooks/useRenderInfo/useRenderInfo.test.ts

@@ -8,18 +8,23 @@ it('Should use render info', () => {
 
   expect(result.current.component).toBe('Component');
   expect(result.current.renders).toBe(1);
-  expect(result.current.timestamp).toBeTypeOf('number');
+  expect(result.current.timestamp).toBe(921196800000);
   expect(result.current.sinceLast).toBe(0);
 });
 
-it('Should increment renders on subsequent calls', () => {
+it('Should increment renders on subsequent calls', async () => {
   const { result, rerender } = renderHook(() => useRenderInfo('Component'));
 
   expect(result.current.renders).toBe(1);
+  expect(result.current.timestamp).toBe(921196800000);
+  expect(result.current.sinceLast).toBe(0);
 
+  await vi.advanceTimersByTimeAsync(1);
   rerender();
 
   expect(result.current.renders).toBe(2);
+  expect(result.current.timestamp).toBe(921196800001);
+  expect(result.current.sinceLast).toBe(1);
 });
 
 it('Should log render information when log is true', () => {

packages/core/src/hooks/useTimer/useTimer.demo.tsx

@@ -13,7 +13,7 @@ const Demo = () => {
         </code>
       </p>
       <p>
-        Timer running: <code>{String(timer.running)}</code>
+        Timer running: <code>{String(timer.active)}</code>
       </p>
 
       <button type='button' onClick={timer.start}>