use-throttle-fn

1import { throttle } from 'es-toolkit'
2import { useMemo } from 'react'
3import { useLatest } from '@/registry/hooks/use-latest'
4import { useUnmount } from '@/registry/hooks/use-unmount'
5import type { ThrottleOptions } from 'es-toolkit'
6 
7export type { ThrottleOptions }
8 
9export function useThrottleFn<Fn extends (...args: any[]) => any>(
10  fn: Fn,
11  throttleMs?: number,
12  options?: ThrottleOptions,
13) {
14  const fnRef = useLatest(fn)
15 
16  const throttledFn = useMemo(
17    () =>
18      throttle(
19        (...args: Parameters<Fn>) => fnRef.current(...args),
20        throttleMs ?? 1000,
21        options,
22      ),
23    [],
24  )
25 
26  useUnmount(() => throttledFn.cancel())
27 
28  return {
29    run: throttledFn,
30    cancel: throttledFn.cancel,
31    flush: throttledFn.flush,
32  }
33}