value
and a delay
.useState()
hook to store the debounced value.useEffect()
hook to update the debounced value every time value
is updated.setTimeout()
to create a timeout that delays invoking the setter of the previous state variable by delay
ms.clearTimeout()
to clean up when dismounting the component.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.render(<Counter />, document.getElementById('root'));
Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️