useThrottle

This hook allows you to give function runs only once at a specified period of time.

Code

JSX
import { useState, useEffect, useRef } from 'react';

function useThrottle(value, interval) {
  const [throttledValue, setThrottledValue] = useState(value);
  const lastExecuted = useRef(Date.now());

  useEffect(() => {
    if (Date.now() >= lastExecuted.current + interval) {
      lastExecuted.current = Date.now();
      setThrottledValue(value);
    } else {
      const timeId = setTimeout(() => {
        lastExecuted.current = Date.now();
        setThrottledValue(value);
      }, [interval]);

      return () => clearTimeout(timerId);
    }
  }, [value, interval]);
}

Last Updated:Jul 9, 2022