kitzo

React utilities library

useThrottle

Limit how frequently a value updates over a fixed interval.

Usage

Throttle.tsx

const throttledValue = useThrottle(value, delay);

Example

Raw value: —

Throttled value: —

Scroll.tsx

import { useThrottle } from 'kitzo';
            
function ScrollTracker() {
  const [y, setY] = useState(0);
  const throttledY = useThrottle(y, 200);

  useEffect(() => {
    const onScroll = () => setY(window.scrollY);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return <p>{throttledY}</p>;
}

API

Parameter	Type	Description
`value`	`any`	The value to throttle
`delay`	`number`	Throttle interval in milliseconds

Returns the throttled value.

Behavior

Updates at most once per delay interval
Ignores rapid changes between intervals
Does not delay the first value update
Ideal for scroll, resize, and mouse events