UseDebounceCallback

1'use client';
2 
3import { useCallback, useEffect, useRef } from 'react';
4 
5export function useDebounceCallback<
6  Fn extends (...args: Parameters<Fn>) => void,
7>(callback: Fn, delay: number = 500): (...args: Parameters<Fn>) => void {
8  const callbackRef = useRef<typeof callback>(callback);
9  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
10 
11  useEffect(() => {
12    callbackRef.current = callback;
13  }, [callback]);
14 
15  const debouncedFn = useCallback(
16    (...args: Parameters<Fn>) => {
17      if (timeoutRef.current) {
18        clearTimeout(timeoutRef.current);
19      }
20      timeoutRef.current = setTimeout(() => {
21        callbackRef.current(...args);
22      }, delay);
23    },
24    [delay],
25  );
26 
27  // Clear the timeout when the component unmounts
28  useEffect(() => {
29    return () => {
30      if (timeoutRef.current) {
31        clearTimeout(timeoutRef.current);
32      }
33    };
34  }, []);
35 
36  return debouncedFn;
37}