useThrottle

Timing & async

A high-performance React hook for throttling values with leading/trailing edge support

Install

$ npm install @usefy/use-throttle

Quick start

useThrottle.tsx

import { useThrottle } from "@usefy/use-throttle";

function ScrollTracker() {
  const [scrollY, setScrollY] = useState(0);
  const throttledScrollY = useThrottle(scrollY, 100);

  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return <div>Scroll position: {throttledScrollY}px</div>;
}

API reference

`useThrottle<T>(value, delay?, options?)`

A hook that returns a throttled version of the provided value, limiting updates to at most once per interval.

Parameters

Parameter	Type	Default	Description
`value`	`T`	—	The value to throttle
`delay`	`number`	`500`	The throttle interval in milliseconds
`options`	`UseThrottleOptions`	`{}`	Additional configuration options

Options

Option	Type	Default	Description
`leading`	`boolean`	`true`	Update on the leading edge (first change)
`trailing`	`boolean`	`true`	Update on the trailing edge (after interval)

Returns

Type	Description
`T`	The throttled value

Go deeper

This page is the quick reference. For every example, prop, and edge case, read the full README — or open Storybook to change props live.

Full README →Open in Storybook →