Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProFollow a fast-changing value only after it has settled for a delay, with an isPending flag and a flush to apply it now.
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 keep an input responsive while an expensive step (a search request, a filter over thousands of rows, a layout measurement) runs on the settled value. The input stays bound to the live value, so typing never lags.
Do not use it to throttle events at a steady rate: a debounce waits for quiet, a throttle does not.
import { useDebouncedValue } from "@/hooks/use-debounced-value"const [query, setQuery] = React.useState("")
const [debouncedQuery, { isPending, flush }] = useDebouncedValue(query, 250)
// Bind the input to `query`; search with `debouncedQuery`.useDebouncedValue<T>(value: T, delay = 300): [T, { isPending: boolean; flush: () => void }]
| Name | Type | Default | Description |
|---|---|---|---|
value | T | - | The live value to follow. |
delay | number | 300 | Milliseconds the value must stay unchanged. 0 or less applies changes on the next render. |
isPending | boolean | - | True while a newer value is waiting. |
flush | () => void | - | Applies the latest value now, for example when Enter is pressed. |
The first value is returned at once. The timer is cleared on unmount.
A hook has no markup. When you show a "searching" state from isPending, put it in an aria-live="polite" region, as the demo does, so it is announced without interrupting typing.
The hook ships with fake-timer tests (use-debounced-value.test.ts) for the delay, resetting on a new value, flush, a zero delay and cleanup on unmount.