useDebouncedValue

Wait until a value has stopped changing.

const debouncedValue = useDebouncedValue(value, delay = 300, { leading, maxWait })

Returns the latest value after it has remained unchanged for delay milliseconds. A change to the value or delay cancels the pending update. Useful for debouncing search input before filtering or fetching.

leading also takes the first change after a quiet period at once and debounces the rest (a button that should react immediately, then settle). maxWait caps how long the update can be held back while the value keeps changing, so a live stream still updates every so often. A delay of 0 returns the value as it is.

trailing (default): —
leading: —
maxWait 1.5 s: —

API

Parameters

valueValue
The value to debounce.
delaynumber
Default: 300
Wait time in milliseconds.
options.leadingboolean
Default: false
Update at once on the first change after a quiet period.
options.maxWaitnumber
Longest time in ms an update may be held back.

Parameters props
Prop	Type	Default	Description
`value`	Value	–	The value to debounce.
`delay`	number	`300`	Wait time in milliseconds.
`options.leading`	boolean	`false`	Update at once on the first change after a quiet period.
`options.maxWait`	number	–	Longest time in ms an update may be held back.

Returns

debouncedValueValue
The last value that remained unchanged for the delay.

Returns props
Prop	Type	Default	Description
`debouncedValue`	Value	–	The last value that remained unchanged for the delay.