React useDebounce hook

React, Hooks, State, Effect · Jan 4, 2021

Debounces the given value.

  • Create a custom hook that takes a value and a delay.
  • Use the useState() hook to store the debounced value.
  • Use the useEffect() hook to update the debounced value every time value is updated.
  • Use setTimeout() to create a timeout that delays invoking the setter of the previous state variable by delay 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(() => {
    }, delay);

    return () => {
  }, [value]);

  return debouncedValue;
const Counter = () => {
  const [value, setValue] = React.useState(0);
  const lastValue = useDebounce(value, 500);

  return (
        Current: {value} - Debounced: {lastValue}
      <button onClick={() => setValue(value + 1)}>Increment</button>

ReactDOM.render(<Counter />, document.getElementById('root'));

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this

  • React useMediaQuery hook

    Checks if the current environment matches a given media query and returns the appropriate value.

    React, Hooks · Oct 13, 2021

  • React useHash hook

    Tracks the browser's location hash value, and allows changing it.

    React, Hooks · Oct 2, 2021

  • React usePersistedState hook

    Returns a stateful value, persisted in localStorage, and a function to update it.

    React, Hooks · Oct 13, 2021