Hooks/State Management/useDebouncedValue

useDebouncedValue

A custom React hook to manage debounced state values.

You can use the useDebouncedValue hook to manage state values that need to be debounced. This is particularly useful for scenarios like form inputs, where you want to avoid excessive updates while the user is typing.

For example, you can use this hook to debounce a search input value, ensuring that the search function is not called on every keystroke but rather after the user has stopped typing for a specified delay.

Example

Loading...

Install

npx shadcn@latest add https://unlogg.com/r/use-debounced-value.json
pnpm dlx shadcn@latest add https://unlogg.com/r/use-debounced-value.json
bunx shadcn@latest add https://unlogg.com/r/use-debounced-value.json

API Reference

Parameters

PropTypeDefault
options?
{ onDebounce?: (value: T) => void }
{}
delay?
number
initialValue?
T

Returns

PropTypeDefault
handlers.setValue?
(val: T) => void
-
debouncedValue?
T
-