Hook / useInterval changed implementation

hooks/use-interval/package.json

@@ -37,6 +37,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@byndyusoft-ui/types": "^0.3.0",
     "@byndyusoft-ui/use-latest-ref": "^1.0.0"
   }
 }

hooks/use-interval/src/useInterval.tests.ts

@@ -1,7 +1,8 @@
 import { Renderer, renderHook, RenderHookResult } from '@testing-library/react-hooks';
-import useInterval from './useInterval';
+import { Callback, Nullable } from '@byndyusoft-ui/types';
+import useInterval, { IUseInterval } from './useInterval';
 
-const setup = (callback: () => void, delay: number | null): RenderHookResult<void, () => void, Renderer<void>> =>
+const setup = (callback: Callback, delay: Nullable<number>): RenderHookResult<void, IUseInterval, Renderer<void>> =>
     renderHook(() => useInterval(callback, delay));
 
 describe('hooks/useInterval', () => {
@@ -11,11 +12,14 @@ describe('hooks/useInterval', () => {
 
     test('calls callback', () => {
         const callback = vi.fn();
+        const delay = 100;
 
-        setup(callback, 100);
+        const { result } = setup(callback, delay);
 
         expect(callback).not.toBeCalled();
 
+        result.current.start();
+
         vi.advanceTimersByTime(101);
 
         expect(callback).toHaveBeenCalledTimes(1);
@@ -31,8 +35,9 @@ describe('hooks/useInterval', () => {
 
     test('does not call callback if delay is null', () => {
         const callback = vi.fn();
+        const delay = null;
 
-        setup(callback, null);
+        setup(callback, delay);
 
         expect(callback).not.toBeCalled();
 
@@ -41,20 +46,27 @@ describe('hooks/useInterval', () => {
         expect(callback).not.toBeCalled();
     });
 
-    test('clears interval', () => {
+    test('stops interval', () => {
         vi.spyOn(global, 'clearInterval');
         const callback = vi.fn();
+        const delay = 100;
 
-        const { result } = setup(callback, 100);
+        const { result } = setup(callback, delay);
         expect(clearInterval).toHaveBeenCalledTimes(0);
 
         expect(callback).not.toBeCalled();
 
-        result.current();
+        result.current.start();
 
-        vi.advanceTimersByTime(150);
+        vi.advanceTimersByTime(delay + 1);
+
+        expect(callback).toHaveBeenCalledTimes(1);
 
-        expect(callback).toHaveBeenCalledTimes(0);
+        result.current.stop();
+
+        vi.advanceTimersByTime(delay + 1);
+
+        expect(callback).toHaveBeenCalledTimes(1);
         expect(clearInterval).toHaveBeenCalledTimes(1);
     });
 });

hooks/use-interval/src/useInterval.ts

@@ -1,25 +1,32 @@
 import { useCallback, useEffect, useRef } from 'react';
+import { Callback, IntervalId, Nullable } from '@byndyusoft-ui/types';
 import useLatestRef from '@byndyusoft-ui/use-latest-ref';
 
-export default function useInterval(callback: () => void, delay: number | null): () => void {
+export interface IUseInterval {
+    start: Callback;
+    stop: Callback;
+}
+
+export default function useInterval(callback: Callback, delay: Nullable<number>): IUseInterval {
     const savedCallback = useLatestRef(callback);
-    const timer = useRef<ReturnType<typeof setInterval>>();
+    const timer = useRef<IntervalId>();
 
-    const clear = useCallback(() => {
+    const stop = useCallback(() => {
         if (timer.current) {
             clearInterval(timer.current);
+            timer.current = undefined;
         }
     }, []);
 
-    useEffect(() => {
-        if (delay === null) {
-            return undefined;
-        }
+    const start = useCallback(() => {
+        stop();
 
-        timer.current = setInterval(() => savedCallback.current(), delay);
+        if (delay !== null && delay >= 0) {
+            timer.current = setInterval(() => savedCallback.current(), delay);
+        }
+    }, [delay, stop, savedCallback]);
 
-        return () => clear();
-    }, [delay, clear, savedCallback]);
+    useEffect(() => stop, []);
 
-    return clear;
+    return { start, stop };
 }

hooks/use-timeout/src/useTimeout.tests.ts

@@ -1,8 +1,8 @@
-import { Callback } from '@byndyusoft-ui/types';
 import { Renderer, renderHook, RenderHookResult } from '@testing-library/react-hooks';
+import { Callback, Nullable } from '@byndyusoft-ui/types';
 import useTimeout, { IUseTimeout } from './useTimeout';
 
-const setup = (callback: Callback, delay: number): RenderHookResult<void, IUseTimeout, Renderer<void>> =>
+const setup = (callback: Callback, delay: Nullable<number>): RenderHookResult<void, IUseTimeout, Renderer<void>> =>
     renderHook(() => useTimeout(callback, delay));
 
 describe('hooks/useTimeout', () => {

hooks/use-timeout/src/useTimeout.ts

@@ -1,28 +1,30 @@
-import { Callback, TimeoutId } from '@byndyusoft-ui/types';
+import { useCallback, useEffect, useRef } from 'react';
+import { Callback, Nullable, TimeoutId } from '@byndyusoft-ui/types';
 import useLatestRef from '@byndyusoft-ui/use-latest-ref';
-import { useEffect, useRef } from 'react';
 
 export interface IUseTimeout {
     start: Callback;
     stop: Callback;
 }
 
-export default function useTimeout(callback: Callback, delay: number): IUseTimeout {
+export default function useTimeout(callback: Callback, delay: Nullable<number>): IUseTimeout {
     const savedCallback = useLatestRef(callback);
     const timer = useRef<TimeoutId>();
 
-    const stop = (): void => {
+    const stop = useCallback(() => {
         if (timer.current) {
             clearTimeout(timer.current);
+            timer.current = undefined;
         }
-    };
+    }, []);
 
-    const start = (): void => {
+    const start = useCallback((): void => {
         stop();
-        timer.current = setTimeout(() => {
-            savedCallback.current();
-        }, delay);
-    };
+
+        if (delay !== null && delay >= 0) {
+            timer.current = setTimeout(() => savedCallback.current(), delay);
+        }
+    }, [delay, stop, savedCallback]);
 
     useEffect(() => stop, []);