use-debounced-function.ts

use-debounced-function.ts

//
// example:
//   <button onClick={useDebouncedFunction(() => console.log("debounced?"), 500)} />
//

export function useDebouncedFunction<T extends (...args: any[]) => void>(
  original: T,
  ms: number
): (...args: Parameters<T>) => void {
  const [call, setCall] = React.useState<() => void>();

  // make original callback stable for simplicity
  const originalRef = React.useRef(original);
  originalRef.current = original;

  React.useEffect(() => {
    if (call) {
      const timeout = window.setTimeout(call, ms);
      return () => window.clearTimeout(timeout);
    }
  }, [call, ms]);

  const debounced = React.useCallback(
    (...args: Parameters<T>) => {
      setCall(_prev => () => originalRef.current(...args));
    },
    [original]
  );

  return debounced;
}