Debounce, Throttle Hook

React에서 debounce, throttle을 구현할 때 사용할 수 있는 hook을 만들어보았다.

단점: 여기서 구현한 debounce, throttle 함수는 파라미터로 넣은 함수의 function signature를 무시하고, 무조건 (...args: any[]) => void 형태의 함수를 리턴한다.

useDebounce

const useDebounce = () => {
  const debounceId = useRef<number | null>(null);
  const debounce = useCallback((fn: (...args: any[]) => void, delay: number) => {
    return (...args: any[]) => {
      if (debounceId.current) {
        clearTimeout(debounceId.current);
      }
      debounceId.current = window.setTimeout(() => fn.apply(fn, args), delay);
    };
  }, []);
  return debounce;
};

useThrottle

const useThrottle = () => {
  const throttleId = useRef<number | null>(null);
  const throttle = useCallback((fn: (...args: any[]) => void, delay: number) => {
    return (...args: any[]) => {
      if (!throttleId.current) {
        throttleId.current = window.setTimeout(() => {
          throttleId.current = null;
          fn.apply(fn, args);
        }, delay);
      }
    };
  }, []);
  return throttle;
};