React useDebounce hook
Debounces the given value.
- Create a custom hook that takes a
value
and adelay
. - Use the
useState()
hook to store the debounced value. - Use the
useEffect()
hook to update the debounced value every timevalue
is updated. - Use
setTimeout()
to create a timeout that delays invoking the setter of the previous state variable bydelay
ms. - Use
clearTimeout()
to clean up when dismounting the component. - This is particularly useful when dealing with user input.
const useDebounce = (value, delay) => { const [debouncedValue, setDebouncedValue] = React.useState(value); React.useEffect(() => { const handler = setTimeout(() => { setDebouncedValue(value); }, delay); return () => { clearTimeout(handler); }; }, [value]); return debouncedValue; }; const Counter = () => { const [value, setValue] = React.useState(0); const lastValue = useDebounce(value, 500); return ( <div> <p> Current: {value} - Debounced: {lastValue} </p> <button onClick={() => setValue(value + 1)}>Increment</button> </div> ); }; ReactDOM.createRoot(document.getElementById('root')).render( <Counter /> );