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(() => {
      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'));

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.

React useDebounce hook

Written by Angelos Chalaris

More like this

React useMediaQuery hook

React useHash hook

React usePersistedState hook