NotePerfect for search inputs or filter bars. It ensures that expensive operations (like API calls) only fire after the user has stopped typing for the duration of the delay.
TipThe value property provides the immediate state for a responsive UI, while debouncedValue should be used as a dependency for your useEffect or data fetching.
The useDebouncedState manages two versions of a state: an immediate value for responsive UI (like input typing) and a debounced value for expensive side effects (like API calls or heavy filtering). The debounced value only updates once the user has stopped changing the immediate value for a specified duration.
This pattern is the industry standard for search bars, preventing "server hammering" by ensuring a request is only sent after the user finishes typing their query.
| Name | Type | Description |
|---|---|---|
| initialValue | T | The starting value for both state versions. |
| options.delay | number | Inactivity period in milliseconds before updating the debounced value. |
| Name | Type | Description |
|---|---|---|
| value | T | The current, inmediate state (use for controlled inputs). |
| debouncedValue | T | The delayed state (use for effects or API calls). |
| setValue | Dispatch<SetStateAction<T>> | Standard React state setter for the inmediate value. |