useThrottleCallback

1'use client'
2 
3import * as React from 'react'
4 
5export function useThrottledCallback<T extends (...args: any[]) => any>(
6  fn: T,
7  deps: React.DependencyList,
8  delay: number,
9): (...args: Parameters<T>) => void {
10  const lastExecutedRef = React.useRef(0)
11  const timerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
12  const argsRef = React.useRef<Parameters<T> | null>(null)
13 
14  const throttledFn = React.useCallback(
15    (...args: Parameters<T>) => {
16      const now = Date.now()
17      const remaining = delay - (now - lastExecutedRef.current)
18 
19      argsRef.current = args
20 
21      if (remaining <= 0) {
22        if (timerRef.current) {
23          clearTimeout(timerRef.current)
24          timerRef.current = null
25        }
26        lastExecutedRef.current = now
27        fn(...args)
28      }
29      else if (!timerRef.current) {
30        timerRef.current = setTimeout(() => {
31          lastExecutedRef.current = Date.now()
32          timerRef.current = null
33          if (argsRef.current) {
34            fn(...argsRef.current)
35          }
36        }, remaining)
37      }
38    },
39    [
40      fn,
41      delay,
42      // eslint-disable-next-line react-hooks/exhaustive-deps
43      ...deps,
44    ],
45  )
46 
47  React.useEffect(() => () => {
48    if (timerRef.current) {
49      clearTimeout(timerRef.current)
50    }
51  }, [])
52 
53  return throttledFn
54}