useDebounceCallback

1'use client'
2 
3import * as React from 'react'
4 
5export function useDebouncedCallback<T extends (...args: any[]) => any>(
6  fn: T,
7  deps: React.DependencyList,
8  delay: number,
9): (...args: Parameters<T>) => void {
10  const timerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
11 
12  const debouncedFn = React.useCallback(
13    (...args: Parameters<T>) => {
14      if (timerRef.current) {
15        clearTimeout(timerRef.current)
16      }
17 
18      timerRef.current = setTimeout(() => {
19        fn(...args)
20      }, delay)
21    },
22    [
23      fn,
24      delay,
25      // eslint-disable-next-line react-hooks/exhaustive-deps
26      ...deps,
27    ],
28  )
29 
30  React.useEffect(() => () => {
31    if (timerRef.current) {
32      clearTimeout(timerRef.current)
33    }
34  }, [])
35 
36  return debouncedFn
37}