Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProTurn a function into one that runs only after calls have stopped for a delay, with cancel, flush and an optional leading call.
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 run an effect-like action after a burst of events: autosave after typing, a resize handler, a search request fired from an onChange.
Do not use it to derive a render value from fast state; useDebouncedValue is simpler for that.
import { useDebouncedCallback } from "@/hooks/use-debounced-callback"const save = useDebouncedCallback((text: string) => api.save(text), 800)
<textarea onChange={(e) => save(e.target.value)} onBlur={() => save.flush()} />useDebouncedCallback(fn, delay = 300, options?): DebouncedFunction
| Option | Type | Default | Description |
|---|---|---|---|
leading | boolean | false | Also call right away on the first call of a burst. |
maxWait | number | - | Call at least this often while calls keep coming. |
The returned function has the same identity on every render and always calls the newest fn. It also has cancel() (drop the pending call), flush() (run the pending call now) and pending() (is a call waiting). A pending call is cancelled on unmount.
A hook has no markup. If a delayed action changes the page (an autosave, a filter), show its state in text, such as "Saving...", in a polite live region.
The hook ships with renderHook tests (use-debounced-callback.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.