# How to use Debounce in React (Lodash)

As a user typing in an `input` field or performing a particular action - an efficient method of making requests from the *API* is to allow for user action to be completed before interacting with the *API*. This prevents your UI code from needing to process every event and also drastically reduces the number of calls sent to your server.

One of the solutions to this is to use debounce/throttle, and a **Lodash** provides us with the `debounce` function. **Lodash’s** debounce function delays invoking a function passed into it; It can help performance in some situations.

In this article, we would be taking a look at the right implementation of `debounce` in a **React App.**

## Our App
Let's take this sample React Application that contains a search input field and each time the user types a request is made that loads the data into the UI. 

```jsx
export default function App() {
  const [users, setUsers] = React.useState([]);

  async function search(value) {
    const res = await fetch(
      // Fake API 
      `https://api.github.com/?search=${value}`
    );
    const body = await res.json();
    return body.results.map((result) => result.name);
  }

  async function handleChange(event) {
    setUsers(await search(event.target.value));
  }

  return (
    <div className="App">
      <input
        type="search"
        placeholder="Enter your search"
        onChange={handleChange}
      />
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.firstname}</li>
        ))}
      </ul>
    </div>
  );
}
```

With the above code, the search request is made every time the user makes a keystroke in the input element. Ideally, we want the search request to be made only when the user has stopped typing. We can use the `debounce` function from **Lodash** to do this. The `debounce` function delays the processing of the key-up event until the user has stopped typing for a predetermined amount of time. 

## Implementing Debounce in React

```jsx
npm install lodash
```

Create a `debounce` function, and call it inside of the `handlechange`, a timer is set to the debounced function that determines the intervals between each call.

```jsx
import { debounce } from 'lodash';

const handleSearchDebounce = debounce(async (value) => {
    setUser(await search(value));
}, 300);

async function handleChange(event) {
  handleSearchDebounce(event.target.value);
}
```

#### Approach 2
With the first method, a new version of the debounced method is created on every render. We can use the `useRef` hook to store the debounced function across renders instead:
```jsx
import { debounce } from 'lodash';

const handleSearchDebounce = React.useRef(
  debounce(async (value) => {
    setUsers(await search(value));
  }, 300)
).current;

/* We can use the `useEffect` hook to cancel the debounced function 
so whenever the component unmounts the search stops running, and
the function gets canceled */
React.useEffect(() => {
  return () => {
    handleSearchDebounce.cancel();
  };
}, [handleSearchDebounce]);
```


## Conclusion

In this article, I showed you how to implement a `debounce` function in React using **Lodash**. However, you don’t need to use **Lodash's** implementation of `debounce` in your projects if you don’t want to. You can decide to [write your own](https://www.freecodecamp.org/news/javascript-debounce-example) debounce function and some other libraries offer this same debounce function. 

👉🏾 [Learn more about me](https://www.abdulqudus.com/)

👉🏾 [Connect on LinkedIn](https://www.linkedin.com/in/jideabdqudus/)

👉🏾 [Subscribe to my blog, let's feast](blog.abdulqudus.com)