Increase performance in your app using debouncing

Photo by Caspar Camille Rubin on Unsplash

Ever typed furiously in your app’s search bar, only to witness a flurry of glitchy loading screens and irrelevant results? The culprit behind this performance lag may just be an overeager search engine, bombarding your backend with requests after every keystroke. This is where debouncing, a powerful optimization technique, steps in to turn your sluggish search into a sleek, lightning-fast experience. Let’s ditch the stutter and dive into how debouncing can transform your app/website’s search, saving you resources and delivering a smooth search experience.

But first…

What is debouncing?

Debouncing is a programming practice or technique employed to ensure that certain time or resource consuming tasks do not fire too many times leading to crashes or laggy performance of your app or website. Simply, it limits the rate at which a function gets invoked.

How does it work?

The following flowchart explains how debouncing a task actually works.

Here’s a step by step breakdown of the diagram:

1. Start: User initiates a task
2. Debounce Logic:

• Wait 3 seconds: The system waits for 3 seconds.
• Is there a new action: During the 3-second wait time, the system checks if the user initiates any new actions.
  1. Yes: If the user initiates a new action, the 3-second wait timer is restarted. This ensures that the task is only executed if there are no new actions for the entire 3-second window.
  2. No: If the user doesn’t initiate any new actions within the 3-second window, the system proceeds to the next step.

3. Execute task: Once the 3-second window elapses without any new actions, the system finally executes the task.

4. Task completed: The task is completed.

A real world example

Here’s an example from an android app called “Findr for GitHub” which uses GitHub’s search API to find users and repositories that matches with the entered query.

We define a task, in the above snippet, a search task(searchJob). The task takes user’s query as an input and calls the search API call. But before calling the API, it delays it by x amount of time, say 3 seconds.

Now, before the 3 seconds are up, if user changes the text in the search field, the current queued task is cancelled and a new task is queued. If user doesn’t type for the next 3 seconds, API is called, and results are shown in the case of a successful response from the server.

This prevents our search feature to call the API after each character being typed or erased from the search field saving us resource both on the frontend and backend.

Conclusion

Debouncing can have a huge impact on features where the input keeps changing and the output is shown based on the latest input value.

Note: The debounce time window should be chosen carefully. While a shorter window offers faster responses, it may trigger premature searches during user input. Conversely, a longer window might feel unresponsive to users. Choosing the right balance is crucial for optimal performance.

By implementing debouncing, you can transform your software’s experience from clunky to swift, ensuring a pleasant and efficient experience for your users.

I hope this article helped you understand debouncing! If you liked this article, share it with your coder friends.