Why is Javascript Debounce important for our Web Applications
Tags: javascript, webdev, programming, performance
Published: 2021-08-21 20:33:01

One of the biggest mistakes we can see when optimizing existing code is the absence of the **debounce** function.  When we use **Javascript** for our web applications or even frameworks like **React**, **Vue**, and **Angular**, a **debounce** function is essential to ensuring a given task does not fire so often that it bricks the browser performance.

## What is Debounce?

> Bouncing is the tendency of any two metal contacts in an electronic device to generate multiple signals as the contacts close or open; debouncing is any kind of hardware device or software that ensures that only a single signal will be acted upon for a single opening or closing of a contact.

For example, when you press a key on your computer keyboard, you expect a single contact to be recorded by your computer. In fact, however, there is initial contact, a slight bounce or lightening up of the contact, then another contact as the bounce ends, yet another bounce back, and so forth. The usual solution is a debouncing device or software that ensures that only one digital signal can be registered within the space of a given time.

![Debounce concept.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628629785873/GcDW4xfiE.png)

## What is a Javascript Debounce? 

In the case of Javascript, the idea is similar to the previous one mentioned, basically, we want to trigger a function, but only once per use case. The debounce forces a function to wait a certain amount of time before running again. The debounce is used to limit the number of times a function is called. A debounce is a higher-order function that adds new behaviors to the functions we pass as parameters.

### Debounce Code Example

```javascript
const debounce = (funcCallBack, wait = 0) => {
  let timeoutId;

  return function(..args) {
     const later = () => {
      clearTimeout(timeoutId);
      funcCallBack(...args);
    };

    clearTimeout(timeoutId);
    timeoutId = setTimeout(later, wait);
  };
};
```

- **funcCallBack**: The function that you want to execute after the debounce time is finished
- **wait**: The amount of time you want the debounce function to wait after the last received action before executing the function again.

Also, there are some debounce implementations from some famous npm libraries as 
- [Lodash](https://lodash.com/docs/4.17.15#debounce)
- [Underscore](https://underscorejs.org/#debounce)

## Why should use Debounce?

A common example that requires the use of a **debounce** is in the case of a search field that will be processing, every character that it’s entered updating the state of our application and doing several unnecessary calls to our backend in some cases. The **debounce** function prevents your code from processing every event and in some cases reduces drastically the number of API calls sent to the server. 

Some other common use cases for a **debounce** are:
- Event listeners
- Real-time applications


## Conclusion

During this post, we have seen some important information about the Javascript **debounce** and why we will need to keep it in mind during the development of our applications.

Let me know in the comments recommendations or something else that can be added, also if you have some other common examples that require a **debounce** let me know I I will update the post based on that thanks! 👍

<a href="https://www.buymeacoffee.com/brayanarrieta"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=brayanarrieta&button_colour=5F7FFF&font_colour=ffffff&font_family=Cookie&outline_colour=000000&coffee_colour=FFDD00"></a>

## References
- [whatis.com](https://whatis.techtarget.com/definition/debouncing)