useDebouncedValue
Function: useDebouncedValue()
function useDebouncedValue<TValue>(value, options): [TValue, Debouncer<Dispatch<SetStateAction<TValue>>>]
function useDebouncedValue<TValue>(value, options): [TValue, Debouncer<Dispatch<SetStateAction<TValue>>>]
Defined in: react-pacer/src/debouncer/useDebouncedValue.ts:41
A React hook that creates a debounced value that updates only after a specified delay. Unlike useDebouncedState, this hook automatically tracks changes to the input value and updates the debounced value accordingly.
The debounced value will only update after the specified wait time has elapsed since the last change to the input value. If the input value changes again before the wait time expires, the timer resets and starts waiting again.
This is useful for deriving debounced values from props or state that change frequently, like search queries or form inputs, where you want to limit how often downstream effects or calculations occur.
The hook returns the current debounced value and the underlying debouncer instance. The debouncer instance can be used to access additional functionality like cancellation and execution counts.
Type Parameters
• TValue
Parameters
value
TValue
options
DebouncerOptions<Dispatch<SetStateAction<TValue>>>
Returns
[TValue, Debouncer<Dispatch<SetStateAction<TValue>>>]
Example
// Debounce a search query
const [searchQuery, setSearchQuery] = useState('');
const [debouncedQuery, debouncer] = useDebouncedValue(searchQuery, {
wait: 500 // Wait 500ms after last change
});
// debouncedQuery will update 500ms after searchQuery stops changing
useEffect(() => {
fetchSearchResults(debouncedQuery);
}, [debouncedQuery]);
// Handle input changes
const handleChange = (e) => {
setSearchQuery(e.target.value);
};
// Debounce a search query
const [searchQuery, setSearchQuery] = useState('');
const [debouncedQuery, debouncer] = useDebouncedValue(searchQuery, {
wait: 500 // Wait 500ms after last change
});
// debouncedQuery will update 500ms after searchQuery stops changing
useEffect(() => {
fetchSearchResults(debouncedQuery);
}, [debouncedQuery]);
// Handle input changes
const handleChange = (e) => {
setSearchQuery(e.target.value);
};
Subscribe to Bytes
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.