Debouncing and Throttling in ReactJs
Tags: react, javascript, webdev, tutorial
Published: 2023-03-11 20:53:40

## Why we use debouncing and throttling ?

Debouncing and throttling are two commonly used techniques in web development to **optimize** performance and **reduce** the load on web servers. These techniques are particularly useful when dealing with events that can trigger multiple times in quick succession, such as user inputs or page scrolling. By implementing debouncing and throttling, we can limit the number of times a function is called and prevent overwhelming the server with **requests**, resulting in a better user experience and improved website performance.



## Debounicng real world example

When you search for something on Flipkart's website, the **search** results appear as you type. But if every keystroke triggers a request, it could slow down the website. That's where debouncing comes in. It delays the request until you stop typing for a short period of time, ensuring that only the final keystroke triggers the request. This prevents the server from being overloaded with requests and delivers search results quickly.


![Many people do it for save time](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktgsiw84atruf1cff2ae.gif)

### Lets deep dive into code snippet

```js
export default function App() {
  const handleChange = e => {
    console.log('api call...')
  } 

  return (
    <div className="App">
      <header className="App-header">
        <p> Search  </p>
        <input type='text' onChange={handleChange} />
      </header>
    </div>
  );
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7fxa3b41sozbwmjoje9.gif)



When we search for something in a search box, the number of API requests increases rapidly, which can slow down the website. To address this issue, we use a simple word that doesn't require an API request. However, if we're calling an API for something like searching for a black shirt, every keystroke can trigger a new API request, leading to a flood of requests. To prevent this, we use a technique called "debouncing." Debouncing delays the API request until the user stops typing for a short period of time, so that only the final search term triggers the request. This ensures that the website isn't overwhelmed with requests and delivers search results quickly.

### How to implement debounce using react ?

```js
import React, { useState, useEffect } from 'react';

export default function App() {
  const [searchTerm, setSearchTerm] = useState('');

  useEffect(() => {
    const debounceTimer = setTimeout(() => {
      console.log('API call with search term:', searchTerm);
      // make API call with searchTerm
    }, 500);

    return () => clearTimeout(debounceTimer);
  }, [searchTerm]);

  const handleChange = e => {
    setSearchTerm(e.target.value);
  } 

  return (
    <div className="App">
      <header className="App-header">
        <p> Search  </p>
        <input type='text' onChange={handleChange} />
      </header>
    </div>
  );
}
```
![debouncing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3plu4xyj8te9auu9on5.gif)




In this example, we're using the `useState` hook to create a state variable called `searchTerm`, which holds the current value of the search input field. We're also using the `useEffect` hook to debounce the API call.

Inside the `useEffect` hook, we're setting a timeout of 500 milliseconds. This means that the API call will be made 500 milliseconds after the user stops typing. We're also returning a function that clears the timeout if the `searchTerm` changes before the timeout is executed.

In the `handleChange` function, we're updating the `searchTerm` state with the current value of the input field. This will cause the `useEffect` hook to be executed, and the API call will be debounced.


## Throttling real world example

A real-world example of throttling is scrolling on a website. When you scroll down a page, the browser fires a scroll event for every pixel you move. If you have a lot of content on the page, this can cause performance issues as the browser tries to handle all the events.

To fix this, we can use throttling to limit the number of scroll events that the browser handles. For example, we might set a limit of one scroll event per 100 milliseconds. This means that the browser will handle only one scroll event during that time, no matter how many times the event is fired.

Throttling ensures that the browser doesn't get overwhelmed with events and that the page stays responsive, even when scrolling through a lot of content.

### How to implement debounce using react ?

```js
import React, { useState, useEffect, useCallback } from 'react';

export default function App() {
  const [searchTerm, setSearchTerm] = useState('');

  // Define a throttled version of the API call function
  const throttledAPICall = useCallback(throttle((searchTerm) => {
    console.log('API call with search term:', searchTerm);
    // make API call with searchTerm
  }, 500), []);

  useEffect(() => {
    throttledAPICall(searchTerm);
  }, [searchTerm, throttledAPICall]);

  const handleChange = e => {
    setSearchTerm(e.target.value);
  } 

  return (
    <div className="App">
      <header className="App-header">
        <p> Search  </p>
        <input type='text' onChange={handleChange} />
      </header>
    </div>
  );
}

function throttle(func, limit) {
  let inThrottle = false;
  return function() {
    const args = arguments;
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  }
}

```
In this example, we define a `throttle` function that limits the rate at which the API call function is called. We then create a new function `throttledAPICall` using `useCallback` and `throttle`, which will ensure that the API call function is called no more than **once every 500 milliseconds**.

We pass `throttledAPICall` as the callback function to `useEffect`. Now, even if the user types rapidly, the API calls will be throttled to prevent overloading the server.


![Throtlling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67is4mhil2loh15t1lhe.gif)

### How throttling works?

Throttle function that takes a function `func` and a `limit` parameter. This function will return a new function that limits the rate at which func is called. The throttled function will only call `func` once per `limit` milliseconds.

```js
function throttle(func, limit) {
  let inThrottle = false;
  return function() {
    const args = arguments;
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  }
}

```
Next, we define a new function `throttledAPICall` using `useCallback` and `throttle`. `useCallback` is a hook that memoizes a function, so that it only gets redefined when its dependencies change. We pass in `throttle` as a dependency, so that the `throttledAPICall` function only gets redefined when the throttle limit changes.

```js
const throttledAPICall = useCallback(throttle((searchTerm) => {
  console.log('API call with search term:', searchTerm);
  // make API call with searchTerm
}, 500), []);

```
We then use the `throttledAPICall` function as the callback function for the `useEffect` hook. This means that whenever `searchTerm` changes, the throttled API call function will be called instead of the original API call function.

```js
useEffect(() => {
  throttledAPICall(searchTerm);
}, [searchTerm, throttledAPICall]);

```
This ensures that the API calls are throttled to a maximum of once every 500 milliseconds, even if the user types quickly or repeatedly triggers the `handleChange` function.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yfbvhh32j4upla91rpy.gif)
### Conclusion
In conclusion, throttling and debouncing are important techniques in optimizing the performance of web applications, especially when it comes to handling user input. Throttling **limits** the rate at which a function can be called, while debouncing **delays** a function call until a certain amount of time has passed without the function being called again.

In the case of the search bar example, debounce ensures that an API call is only made after the user has **stopped** typing for a certain amount of time, while throttle **limits** the frequency of API calls, preventing excessive requests when the user types too quickly.

Using these techniques can help improve the user experience and reduce the load on the server, making web applications **faster** and **more efficient**.


### Quick Link 



[Debounce And Throttle in JS](https://www.youtube.com/watch?v=cjIswDCKgu0)

[LinkedIn](https://www.linkedin.com/in/abhishekrawe/)

[GitHub](https://github.com/abhishekrawe)