React useDebounce Hook

Introduction

In this lab, we will learn how to create a custom React hook called useDebounce that helps debounce user input. Debouncing is a technique that delays the invocation of a function until a certain amount of time has passed since the last time it was called. This technique is commonly used in scenarios where the user input triggers frequent updates to the application state, as it can help reduce unnecessary re-renders and improve performance.

Skills Graph

React useDebounce Hook

index.html and script.js have already been provided in the VM. In general, you only need to add code to script.js and style.css.

To debounce a given value, you can create a custom hook that takes a value and a delay. Use the useState() hook to store the debounced value, and the useEffect() hook to update the debounced value every time value is updated. To delay invoking the setter of the previous state variable by delay ms, use setTimeout(). To clean up when dismounting the component, use clearTimeout(). This is particularly useful when dealing with user input.

Here is an example implementation of the useDebounce() hook:

const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = React.useState(value);

  React.useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

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

  return debouncedValue;
};

You can use the useDebounce() hook in a component like this:

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 />);

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the React useDebounce Hook lab. You can practice more labs in LabEx to improve your skills.