Today, data is issued and received so rapidly that solutions are needed to keep up with demand. When users are engaging with web applications, many times the content that they are engaging with is dynamic in nature. Essentially, this just means that the content that the user is receiving can be manipulated and served as situations unfold based on user input.
For example, imagine you have a search bar function on a web application. Popularly, many web applications have their search bar show results as the user is typing their input, rather than waiting for a 'submit' button. A common problem that arises from this, though, is that users are sending requests to the server with each keystroke (as the state of the search input updates). Naturally, it is not necessary for the user to have results returned after each keystroke - which is where debouncing comes into play.
What is debouncing?
Debouncing a function essentially is ensuring that the function in question is not getting called too hastily.
I remember first learning about debouncing in a front-end masters course taught by Jem Young. It was one of the solutions to an interview question simulation as part of the online course. I remember at the time not really being able to understand the use case in full; just hearing about things doesn't always give me the full understanding, often times I need to build with it myself.
At the time, all I knew was how to replicate the code for implementing debouncing as a solution and that it was used for the auto-suggesting text feature for the iPhone. After learning deeper, I have found that debouncing is a solution to a great number of different scenarios, many of which protect resource usage.
Building a Search Bar
As my previous blog posts have foretold, I am still going through the next.js /learn course and building out the dynamic user dashboard web app. In chapter 11, I was tasked with implementing a functional search bar for the customer invoices page.
Without Debounce
Going off the tutorial provided by Next.js, I was instructed to handle the search bar as above provided so that the handleSearch function could be passed with an event handler to the input element (search bar). This way, with the hooks like useSearchParams and usePathName, I am able to update the URL in real time based off of the input in the search bar.
The above method is not using debouncing, and would put the database at risk for many unnecessary search attempts once the users started adding up. This is because with each keystroke, the server would be reloading the search with the updated input field (because I am calling the function with an onChange event listener from the input element).
With Debounce
npm i use-debounce
After installing the use-debounce package and importing useDebouncedCallback in the search bar component, you can simply change the function code to above and the library function will automatically debounce your function for you (you can change the 300 number to however many milliseconds you would like the debounce to take).
With this method, keep in mind it is a downloadable solution. If you wanted to create your own solution and implement it, you might do something like this:
Now that debouncing has been added as a solution, users can get live results as they type in the search bar, but only after a brief pause. This way, resources from the database are saved once there are more users and the site is more performant in this area.
I have never before done a search bar this way, and am once again learning something new from this Next.js/learn course. With Next Meal, I had used a 'submit' button once the user had finished what they were typing to find their search. This was an attempt to avoid problems that come from not debouncing (as it didn't occur to me to use it as a solution here). In the near future, I will be implementing debouncing into Next Meal's search bar as well since it is so easy.
Credits:
Code Snippet Clips: Carbon
Learn Next.js 14: Learn Next.js
Frontend Masters - Jem Young: Front-end Masters - Jem Young
Top comments (0)