main 🧊 rework use debounce callback

Author: debabin

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

@@ -1,6 +1,4 @@
-import { useMemo } from 'react';
-import { debounce } from '@/utils/helpers';
-import { useEvent } from '../useEvent/useEvent';
+import { useMemo, useRef } from 'react';
 /**
  * @name useDebounceCallback
  * @description - Hook that creates a debounced callback
@@ -16,7 +14,26 @@ import { useEvent } from '../useEvent/useEvent';
  * const debouncedCallback = useDebounceCallback(() => console.log('callback'), 500);
  */
 export const useDebounceCallback = (callback, delay) => {
-  const internalCallback = useEvent(callback);
-  const debounced = useMemo(() => debounce(internalCallback, delay), [delay]);
+  const internalCallbackRef = useRef(callback);
+  const timerRef = useRef(null);
+  const delayRef = useRef(delay);
+  internalCallbackRef.current = callback;
+  delayRef.current = delay;
+  const debounced = useMemo(() => {
+    const cancel = () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = undefined;
+      }
+    };
+    const debouncedCallback = function (...args) {
+      cancel();
+      timerRef.current = setTimeout(() => {
+        internalCallbackRef.current.apply(this, args);
+      }, delayRef.current);
+    };
+    debouncedCallback.cancel = cancel;
+    return debouncedCallback;
+  }, []);
   return debounced;
 };

packages/core/src/bundle/utils/helpers/debounce.js

@@ -1,7 +1,10 @@
-export function debounce(callback, delay) {
+export const debounce = (callback, delay) => {
   let timer;
-  return function (...args) {
-    clearTimeout(timer);
+  const cancel = () => clearTimeout(timer);
+  const debounced = function (...args) {
+    cancel();
     timer = setTimeout(() => callback.apply(this, args), delay);
   };
-}
+  debounced.cancel = cancel;
+  return debounced;
+};

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

@@ -87,16 +87,15 @@ it('Should return new function when delay changes', () => {
   const { result, rerender } = renderHook((delay) => useDebounceCallback(callback, delay), {
     initialProps: 100
   });
-  const debouncedCallback = result.current;
 
-  debouncedCallback();
+  result.current();
 
   act(() => vi.advanceTimersByTime(50));
   expect(callback).not.toHaveBeenCalled();
 
   rerender(200);
 
-  debouncedCallback();
+  result.current();
 
   act(() => vi.advanceTimersByTime(200));
   expect(callback).toHaveBeenCalledOnce();

packages/core/src/hooks/useDebounceCallback/useDebounceCallback.ts

@@ -1,8 +1,8 @@
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 
-import { debounce } from '@/utils/helpers';
-
-import { useEvent } from '../useEvent/useEvent';
+export type DebouncedCallback<Params extends unknown[]> = ((...args: Params) => void) & {
+  cancel: () => void;
+};
 
 /**
  * @name useDebounceCallback
@@ -21,9 +21,33 @@ import { useEvent } from '../useEvent/useEvent';
 export const useDebounceCallback = <Params extends unknown[], Return>(
   callback: (...args: Params) => Return,
   delay: number
-) => {
-  const internalCallback = useEvent(callback);
-  const debounced = useMemo(() => debounce(internalCallback, delay), [delay]);
+): DebouncedCallback<Params> => {
+  const internalCallbackRef = useRef(callback);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const delayRef = useRef(delay);
+
+  internalCallbackRef.current = callback;
+  delayRef.current = delay;
+
+  const debounced = useMemo(() => {
+    const cancel = () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = undefined as any;
+      }
+    };
+
+    const debouncedCallback = function (this: any, ...args: Params) {
+      cancel();
+      timerRef.current = setTimeout(() => {
+        internalCallbackRef.current.apply(this, args);
+      }, delayRef.current);
+    };
+
+    debouncedCallback.cancel = cancel;
+
+    return debouncedCallback;
+  }, []);
 
   return debounced;
 };

packages/core/src/utils/helpers/debounce.ts

@@ -1,11 +1,21 @@
-export function debounce<Params extends unknown[]>(
+type DebouncedCallback<Params extends unknown[]> = ((...args: Params) => void) & {
+  cancel: () => void;
+};
+
+export const debounce = <Params extends unknown[]>(
   callback: (...args: Params) => void,
   delay: number
-): (...args: Params) => void {
+): DebouncedCallback<Params> => {
   let timer: ReturnType<typeof setTimeout>;
 
-  return function (this: any, ...args: Params) {
-    clearTimeout(timer);
+  const cancel = () => clearTimeout(timer);
+
+  const debounced = function (this: any, ...args: Params) {
+    cancel();
     timer = setTimeout(() => callback.apply(this, args), delay);
   };
-}
+
+  debounced.cancel = cancel;
+
+  return debounced;
+};