When I was learning web development I came across the jargon “DEBOUNCING” . I looked for more details about debouncing but unfortunately most of the technical blogs out there are not for beginners. So, let us try to understand what it is ? And Why do we need it ?
Did you ever notice what happens when you start searching for a product in an e-commerce site, say for example amazon ?
As you can see in above image when I typed google in search bar , it started showing me all the products having “google” in it’s name. But what will happen if I don’t stop and continuously keep typing in the search bar ?
When you will continuously keep typing in search bar , it will not show you anything but once you stop typing, it will show you the relevant products.
What exactly is happening?
As shown in above image, when you type something in the search bar , a request goes out to backend that returns name of all the products filtered by “XYZ”
But why request was not sent as soon as when you typed “X”, why it waited for sometime ? The reason behind this is a feature called debouncing. In simple terms it can be defined as delayed sending of requests. This feature is needed to avoid unnecessary calls to backend. Otherwise, the number of requests reaching out to backend would be enormous.
What should not happen?
I hope this explains what debouncing is and why it is needed.