Throttling and Debouncing in ReactJS
Tags: javascript, performance, react
Published: 2021-07-01 07:18:26

#Introduction

**This article talks about how these two techniques can be applied to optimize website performance and covers how to make a optimized searchbar.**

Suppose there is a program in which the programmer gives users to run any function, users can run them by firing events such as `click`, `change`, `resize`, `scroll` etc. So it's upto the user that how many times they want to run that function. The user can spam any number of times which is not good for the website, because those functions maybe going through heavy computations which may slow the website.

Let's consider an example in which whenever user types in searchbar, `function` is called which returns the total number of letter changes. 
![search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s7hybjclcut49qkflnig.gif)

Now imagine, if there is a program in which for each change there is an function call which have heavy computations, this will slow down the website.

To prevent this kind of scenario, programmers use **Throttling** and **Debouncing** to limit the number of function calls so that even if the user spams, the performance will not be affected.


#Implementation
These two techniques are not something which is provided by javascript itself.
These are the two techniques which uses web APIs i.e. `setTimeout()` and `clearTimeout()`.

* `setTimeout()` function takes a function and a time delay as parameters, call that function after the given delay and returns us a `timerId` which we can store. 
* `clearTimeout()` function takes that `timerId` as a parameter and clears the timeout set by the `setTimeout()` function.

##Throttling

> Throttling is a technique in which no matter how many times user fires the event, the function will run once in a given interval of time.

Suppose there is an API which fetches some data from the server.
Whenever the user searches something in the searchbar, then the `function` searches the letters typed by the user and returns the data accordingly. By using `throttling` here, the `function` will be called once in every 1 second.

{% codesandbox throttling-prrcq module=/src/App.jsx runonclick=1 %}

Let's examine what is happening in the code.
1. Whenever user types something, `handleChange()` function is called which contains a `search()` function.
2. The `search()` function returns the data according to user typed letters, but it is not yet called.
3. The `search()` function is passed to `throttlingFunc()` as a parameter with delay of 1 second.
4. Inside `throttlingFunc()`, it checks if there is some value in `timerId` which is a global variable, if true it don't call `setTimeout()`.
5. If there is some value in `timerId`, it calls the `setTimeout()` which calls the `search()` and sets previous value of `timerId` as undefined.
6. In this way the `search()` function will be called only after 1 seconds when user types something.

##Debouncing

>Debouncing is a technique in which no matter how many times user fires an event, the function will run only after a certain time after user stops firing events.

We will use the same API to fetch some data from the server and the same function which searches the data according to the letters typed by the user.But here, we will use `debouncing` and the `function` will be called after 1 second after user stops typing.

{% codesandbox debouncing-frtw4 module=/src/App.jsx runonclick=1 %}

Let's examine what is happening in the code.
1. Whenever user types something `handleChange()` function is called which contains a `search()` function.
2. The `search()` function returns the data according to user typed letters, but it is not yet called.
3. The `search()` function is passed to `debouncingFunc()` as a parameter with delay of 1 second.
4. Inside `debouncingFunc()`, `clearTimeout()` clears the previous timeout by taking previous `timerId` value.
5. Then calls `setTimeout()` which calls `search()` and gives new `timerId`.
6. In this way the `search()` function will be called only after 1 seconds when user stops typing something.

#Conclusion
In this article we understood how `debouncing` and `throttling` technique works while implementing it on a search function.

Hope you find it helpful 😄 .

**References**
[https://www.telerik.com/blogs/debouncing-and-throttling-in-javascript](https://www.telerik.com/blogs/debouncing-and-throttling-in-javascript)

[Cover image](https://i.ytimg.com/vi/mD-TCX2LWls/maxresdefault.jpg)