use-debounce-fn

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