Table of Contents
What is debouncing?
Consider an API call that takes some time to return a response. If such an API is invoked frequently, it’s likely to affect the performance of your software. So we turn towards debouncing. Debouncing makes sure that the difference between two subsequent calls is at least the time specified. In this article, we’ll find out how long the debounce timeout must be.
Let’s check the code now
Join our discord server for more such content
How long should the debounce timeout be?
Now you would ask why is this necessary? why can’t we use our favorite number?
let’s understand this with 2 scenarios
Short debounce value
Let’s assume your debounce value is 200ms, this will appear instantly to your user. Imagine your user typing their email, and as they are typing it you give an error message that the email is incorrect. Well, of course, it’ll be incorrect, they are typing it. Still didn’t get it? let’s take another example
Your mom asks you to sweep the floor, you miss a spot and are about to reach it when your mom shouts that you missed a spot. Irritating isn’t it?
Long debounce value
Now, let’s consider an alternate universe where your debounce value is 2000ms. You have a long-form and the last field is email. Your user fills in the email and clicks on submit. But oops, the email is incorrect, the page reloads, and all the form fields are blank again. You just lost a customer. Let’s go to our household example.
Your mother asks you to sweep and mop the floor. You are done with sweeping and are halfway done with moping when your mother comes in and says that you didn’t sweep under the bed. Now you have to go back to sweeping again.
Reaction Times
One important number to remember is 250 ms. Studies show that it is the average reaction time of a human. You can check some more information about it here. I’m not saying that this is the ideal debounce value, and everyone who’s not using this is a shithole. The ideal debounce value is subjective, it depends on the below factors
1. Backend capacity
You need to select a value keeping in mind your backend load capacity. For eg – Your backend can handle 10 requests per second and during peak hours your user count is around 30. You need to select a value that does not exceed the 10 requests per second threshold. So we can serve almost 1 request per user every 3 seconds which gives us a debounce value of 300ms.
2. Target audience
Typing speed of people varies. You can decide your debouncing value depending on your user’s typing speed. Another factor is whether your application serves on a phone or a desktop. Because you see, people type slower on phones as compared to desktops.
Conclusion
It’s important that you conduct user testing to find your ideal debounce value. I hope you learnt something from this article. Show your love for this article by commenting below.