Do you Debounce?

Publicado em by Tiago Dias

What is Debounce?

Debounce is a programming technique used to limit the rate at which a function executes.
It ensures that a function is only triggered after a specified delay since the last time it was invoked.
This is particularly useful for optimizing performance in scenarios like handling user input events (e.g., key presses, button clicks, or window resizing).

How Debounce Works

  • When an event is fired multiple times in quick succession, debounce delays execution of the function.
  • The function will only execute after the event has stopped firing for a defined period.
  • If the event is triggered again before the delay period is over, the timer resets.

Use Cases

  1. Search Input Optimization: Prevents API calls on every keystroke and only sends the request after the user stops typing.
  2. Button Clicks: Prevents accidental multiple clicks (e.g., submitting a form multiple times).

Ok but what’s the point?

Let’s consider that you scaffold a database entity. By default you get a List and Detail page for the entity. In the List page you also get a search input, and each time you change the search input, a new request is made to the backend:

I the previous example, 10 requests were made to the backend (one for each typed character).
This don’t make sense correct? What’s the point to do a backend request while you still typing?

Let’s implement Debounce then…

In this article i’ll be using Debouce Reactive Outsystems Forge Component.

Adding debounce behavior is as simple as:

  • Assign the associated Widget Id (the input)
  • Setting the Debounce Delay (how many milliseconds to wait until invoke the Handler)
  • Set the Handler (the action to execute)
  • Remove the On Change handler in the associated widget (the input)

As you can see, a single backend request was executed (this is true as in between each typed character i took less than 500ms, the debounce delay that you can configure according your needs)

This is such a simple task and it reduced 100%-1 of useless backend requests.
Let’s consider that you use the default behavior and you have a lot of users using search. Have you wonder how a simple behavior change can impact the overall performance of your application without any drawback for the end user?

You can test the working example here: https://tiagomlcdias.outsystemscloud.com/BlogArticles/Debounce

Debounce: because even your code deserves a second chance to think before acting.