useDebouncedState
Description and use case
useDebouncedState reduces render churn for bursty updates like search input while exposing profiling stats for skipped commits.
API signature
function useDebouncedState<T>(
initialState: T | (() => T),
delay?: number
): [T, Dispatch<SetStateAction<T>>, DebouncedStateStats]
Parameters
| Name | Type | Required | Description |
|---|---|---|---|
initialState | T | (() => T) | Yes | Initial state value or lazy initializer. |
delay | number | No | Debounce delay in ms. Defaults to 300. |
Return value
| Position | Type | Description |
|---|---|---|
0 | T | Current committed value. |
1 | Dispatch<SetStateAction<T>> | Debounced setter function. |
2 | DebouncedStateStats | { skippedRenders, totalUpdates } counters. |
Live interactive demo (StackBlitz)
This demo uses an embedded StackBlitz sandbox. Load it inline or open it in a new tab.
Open demo in StackBlitzCode example
import {useDebouncedState} from 'react-perf-hooks';
export function SearchInput() {
const [query, setQuery, stats] = useDebouncedState('', 250);
return (
<div>
<input value={query} onChange={(event) => setQuery(event.target.value)} />
<p>Skipped renders: {stats.skippedRenders}</p>
<p>Total updates: {stats.totalUpdates}</p>
</div>
);
}