How to useDebounce hooks in React

When you create an input in a React application such as a search input and update its state, React will trigger an API call every time the state changes. This frequent API calling can potentially impact both the server hosting the API and the overall performance of your application negatively.

Therefore, we should call the API when we have finished typing an input by creating a delay, this delay technique is called debounce.

What is debounce

The Debounce technique comes from electronic devices. For example, when we press the button on the TV remote, the signal sent by the remote to the TV will be sent continuously, therefore, to prevent this, the TV chip will delay receiving the signal from the remote for several milliseconds.

Just like in electronic devices, in JavaScript there is also a debounce technique when we want to run a function only once every few moments.

Here is example of a function for saving data with debounce in JavaScript.

function debounce(func, timeout = 300) {
  let timer
  
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, timeout)
  }
}

function saveInput() {
  console.log('Save Data')
}

const changeData = debounce(() => saveInput())

Explanation :

In the function above, when we call change data when inputting, the debounce function will be executed and wait for the timer to reach 300ms then the saveInput() function will be called, if there is a change in the input of the debounce function before the timer ends then the timer will be reset and wait again for 300ms until the timer After that, just call the saveInput() function.

Using useDebounce in React

In React.js applications we can use hooks called useDebounce so that we don't have to create functions every time and our code becomes reusable.

The following is an example of use in React JS

Create a useDebounce hooks file first

// hooks/useDebounce.jsx
import { useEffect, useState } from "react";

export function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);
  
  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
    return () => {
      clearTimeout(timer);
    };
  }, [value, delay]);
  
  return debouncedValue;
}

Then in the App.jsx file makes it look like this

// App.jsx
import { useEffect, useState } from "react";
import { useDebounce } from "./hooks/useDebounce";

export default function Component() {
  const [value, setValue] = useState("");
  const debouncedValue = useDebounce(value, 500);
  const [data, setData] = useState([]);
  
  const handleChange = event => {
    setValue(event.target.value);
  };
  
  // Fetch API (optional)
  const fetchData = async () => {
    try {
      const response = await fetch(
        `https://api.escuelajs.co/api/v1/products/?title=${debouncedValue}`
      );
      const data = await response.json();
      setData(data);
    } catch (err) {
      console.log(err);
    }
  };
  
  // Triggers when "debouncedValue" changes
  useEffect(() => {
    fetchData();
  }, [debouncedValue]);
  
  return (
    <div>
      <p>Value without debounce: {value}</p>
      <p>Value with debounce : {debouncedValue}</p>
      <input type="text" value={value} onChange={handleChange} />
      {data.map(item => (
        <li>{item.title}</li>
      ))}
    </div>
  );
}

Or you can try directly at codesandbox.

I hope this guide has clarified useDebounce hooks for you and next time u have react.js project you can try it yourself.