What is Debouncing?

Debouncing functionality is used to reduce the unnecessary amount time to complete the computation, so it can increase the performance of the browser.

Let’s consider a scenario that you’re working in a e-commerce company and you have to implement a functionality to call an api on change of search bar. So for example: If you want to search for Iphone 6, then it you will type Iphone 6 in the search bar and you’ll get the result as you consider following piece of code but can you guess what could be the problem here?

If you’ve guessed that the API will get called 7 time (length of the string you searched for) then you’re right.
So in this kind of situations debouncing comes to rescue us.

A Simple Debouncing Implementation

So, when we type something in the input box the handleChange function gets called with the delay of 600ms (you can specify as long delay as you can, this is general used case).
This is the implementation and use case for debouncing in javascript. This is very important topic as per the interview preparation and for performance point of view as well, this question is asked many times in most giant companies.

Should I use debouncing in this way?

Generally nobody writes our own implementation for this in production instead developers prefer to use lodash which is great library to implement this kind of functionalities. You’ll just need to load _.debounce() from lodash and boom you’re done. Works absolute fine.