useThrottler.ts

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

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

export const useThrottler = <T extends UseThrottlerCallback>(callback: T, delay: number): T & { clear: () => void } => {
  const scope = useScope({ callback, delay });
  const timeout = useRef<number>(0);

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

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

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