Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProTurn a function into one that runs at most once per interval, on the first call and again with the latest arguments when the interval ends.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it to limit a handler on a high-frequency event: scroll, pointer move, resize, drag, progress reporting.
Do not use it to wait for quiet (that is a debounce) or to run something exactly once.
import { useThrottledCallback } from "@/hooks/use-throttled-callback"const onScroll = useThrottledCallback(() => update(window.scrollY), 100)
useEventListener("scroll", onScroll)useThrottledCallback(fn, interval = 200, options?): ThrottledFunction
| Option | Type | Default | Description |
|---|---|---|---|
leading | boolean | true | Run on the first call of an interval. |
trailing | boolean | true | Run once more at the end with the latest arguments. |
The returned function keeps one identity, calls the newest fn, and has cancel(). A pending trailing call is cancelled on unmount.
A hook has no markup. Do not throttle updates that a screen reader depends on to the point of missing the final state: keep the trailing call on (the default).
The hook ships with renderHook tests (use-throttled-callback.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.