useDebouncer.ts

import { useMemo, useRef } from 'react';
import { useScope } from './useScope';

export type UseDebouncerCallback = (...args: any[]) => void;

export const useDebouncer = <T extends UseDebouncerCallback>(
  callback: T,
  delay: number,
  runFirst?: boolean
): T & { clear: () => void } => {
  const scope = useScope({ callback, delay, runFirst });
  const timeout = useRef<number>(0);

  return useMemo(() => {
    const debounce = (...args: T[]) => {
      if (!timeout.current && scope.runFirst) {
        scope.callback(...args);
      }

      window.clearTimeout(timeout.current);
      timeout.current = window.setTimeout(() => {
        timeout.current = 0;
        scope.callback(...args);
      }, scope.delay);
    };

    debounce.clear = () => window.clearTimeout(timeout.current);
    return debounce as T & { clear: () => void };
  }, [scope]);
};