import { useMemo, useRef } from 'react'; import debounce from 'lodash-es/debounce'; export interface DebouncedFunc any> { (...args: Parameters): ReturnType | undefined; cancel(): void; flush(): ReturnType | undefined; } export type DebounceOptions = { leading?: boolean; maxWait?: number; trailing?: boolean; }; const defaultOptions: DebounceOptions = { leading: false, trailing: true, }; const useDebouncedFn = any>( fn: T, wait: number = 100, options: DebounceOptions = defaultOptions, dependencies?: ReadonlyArray, ): DebouncedFunc => { const fnRef = useRef(fn); fnRef.current = fn; return useMemo( () => debounce(((...args) => fnRef.current(...args)) as T, wait, options), [...(dependencies || [])], ); }; export default useDebouncedFn;