Why is Javascript Debounce important for our Web Applications

#javascript #webdev #programming #performance

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.

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

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

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! 👍