function useDebouncedState<TValue>(value, options): readonly [TValue, (...args) => void, {
cancel: () => void;
getExecutionCount: () => number;
maybeExecute: (...args) => void;
}]
function useDebouncedState<TValue>(value, options): readonly [TValue, (...args) => void, {
cancel: () => void;
getExecutionCount: () => number;
maybeExecute: (...args) => void;
}]
Defined in: react-pacer/src/debouncer/useDebouncedState.ts:35
A React hook that creates a debounced state value, combining React's useState with debouncing functionality. This hook provides both the current debounced value and methods to update it.
The state value is only updated after the specified wait time has elapsed since the last update attempt. If another update is attempted before the wait time expires, the timer resets and starts waiting again. This is useful for handling frequent state updates that should be throttled, like search input values or window resize dimensions.
The hook returns a tuple containing:
• TValue
TValue
DebouncerOptions
readonly [TValue, (...args) => void, { cancel: () => void; getExecutionCount: () => number; maybeExecute: (...args) => void; }]
// Debounced search input
const [searchTerm, setSearchTerm, debouncer] = useDebouncedState('', {
wait: 500 // Wait 500ms after last keystroke
});
// Update value - will be debounced
const handleChange = (e) => {
setSearchTerm(e.target.value);
};
// Get number of times the debounced function has executed
const executionCount = debouncer.getExecutionCount();
// Debounced search input
const [searchTerm, setSearchTerm, debouncer] = useDebouncedState('', {
wait: 500 // Wait 500ms after last keystroke
});
// Update value - will be debounced
const handleChange = (e) => {
setSearchTerm(e.target.value);
};
// Get number of times the debounced function has executed
const executionCount = debouncer.getExecutionCount();
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.