[fix]: useDebounceCallback behavior when delay changed

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

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { debounce } from '@/utils/helpers';
 import { useEvent } from '../useEvent/useEvent';
 /**
@@ -16,7 +16,30 @@ import { useEvent } from '../useEvent/useEvent';
  * const debouncedCallback = useDebounceCallback(() => console.log('callback'), 500);
  */
 export const useDebounceCallback = (callback, delay) => {
+  const mounted = useRef(false);
+  const lastDebounced = useRef(null);
   const internalCallback = useEvent(callback);
-  const debounced = useMemo(() => debounce(internalCallback, delay), [delay]);
-  return debounced;
+  const debounced = useMemo(() => debounce(internalCallback, delay), [internalCallback, delay]);
+  const safeDebounced = useCallback(
+    (...args) => {
+      lastDebounced.current?.cancel();
+      debounced(...args);
+    },
+    [debounced]
+  );
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  useEffect(
+    () => () => {
+      if (mounted.current) {
+        lastDebounced.current = debounced;
+      }
+    },
+    [debounced]
+  );
+  return safeDebounced;
 };

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

@@ -1,7 +1,10 @@
 export function 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

@@ -89,15 +89,31 @@ it('Should return new function when delay changes', () => {
   });
   const debouncedCallback = result.current;
 
-  debouncedCallback();
+  rerender(200);
 
-  act(() => vi.advanceTimersByTime(50));
-  expect(callback).not.toHaveBeenCalled();
+  const updatedDebouncedCallback = result.current;
 
-  rerender(200);
+  expect(debouncedCallback).not.toBe(updatedDebouncedCallback);
+});
+
+it('Should cancel callbacks that called before delay change', () => {
+  const callback = vi.fn();
+  const { result, rerender } = renderHook((delay) => useDebounceCallback(callback, delay), {
+    initialProps: 200
+  });
+
+  const debouncedCallback = result.current;
 
   debouncedCallback();
 
-  act(() => vi.advanceTimersByTime(200));
+  act(() => vi.advanceTimersByTime(100));
+  expect(callback).not.toBeCalled();
+
+  rerender(400);
+
+  const updatedDebouncedCallback = result.current;
+  updatedDebouncedCallback();
+
+  act(() => vi.advanceTimersByTime(400));
   expect(callback).toHaveBeenCalledOnce();
 });

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

@@ -1,4 +1,6 @@
-import { useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+
+import type { DebouncedCallback } from '@/utils/helpers';
 
 import { debounce } from '@/utils/helpers';
 
@@ -22,8 +24,35 @@ export const useDebounceCallback = <Params extends unknown[], Return>(
   callback: (...args: Params) => Return,
   delay: number
 ) => {
+  const mounted = useRef<boolean>(false);
+  const lastDebounced = useRef<DebouncedCallback<Params> | null>(null);
+
   const internalCallback = useEvent(callback);
-  const debounced = useMemo(() => debounce(internalCallback, delay), [delay]);
+  const debounced = useMemo(() => debounce(internalCallback, delay), [internalCallback, delay]);
+  const safeDebounced = useCallback(
+    (...args: Params) => {
+      lastDebounced.current?.cancel();
+      debounced(...args);
+    },
+    [debounced]
+  );
+
+  useEffect(() => {
+    mounted.current = true;
+
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+
+  useEffect(
+    () => () => {
+      if (mounted.current) {
+        lastDebounced.current = debounced;
+      }
+    },
+    [debounced]
+  );
 
-  return debounced;
+  return safeDebounced;
 };

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

@@ -1,11 +1,21 @@
+export type DebouncedCallback<Params extends unknown[]> = ((...args: Params) => void) & {
+  cancel: () => void;
+};
+
 export function 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;
 }