Do you use debounce?

(4 minutes read)

We've all been waiting for the elevator one time and pressed the button like crazy, hoping it arrives faster to our floor. But does it?

Today you'll learn what debounce is, what benefits it brings and how to use it in the UIs you're building.

Debounce explained

Going back to the elevator situation - the elevator doesn't move faster if you press the button many times. Sorry if I burst your bubble!
This happens because of a mechanism which ignores the button events if the button has already been pressed. This mechanism is called debounce; you can look at it as a way of ignoring the user input on a particular element if the user has already interracted with that element. Of course, the outcome should be benefic for the user. (more on that later)

The elevator's User Interface is made of buttons (input) and maybe a display showing some feedback (output). The same idea is present in the UIs we're developing in applications as software engineers.

Most of the times I used debounce as a function of time, meaning: don't perform an action for X amount of milliseconds if that action has already been triggered.

Let's have a look at the debounce package.

const fnDebounced = debounce(fn, wait, immediate = false);

fn - is the function you want to debounce.
wait - the period when the repeated fn calls are ignored.
immediate - is an optional parameter and by default it's false; if set to true, it will trigger fn at first occurrence, otherwise fn will be triggered at last occurrence.
fnDebounced - is a new function which has the debounce behavior in place.

So if you'd use it this way, pressing the button will show the alert then the other button click events will be ignored for 5 seconds.

...

<script>
function showAlert(m) {
  alert(m)
}

var showAlertDebounced = debounce(showAlert, 5000, true);
</script>
...

<button onClick="showAlertDebounced()">Show Alert</button>
...

When to use debounce?

Let's say the user is pressing a button twice by mistake. Are you going to perform the action twice? What if that button performs a heavy network request?

Or, imagine having a search input and you want to trigger the search when the user types something (i.e. there is no search button to trigger the search), but you don't want to perform the search for every added/removed letter.

Imagine you build a slider which controls the brightness of a light bulb. Are you going to make a network request for each increment/decrement? What if the slider has 100 steps? Are you going to make 100 requests for a simple swipe?

I'm pretty sure you can find more use cases which can benefit from using debounce in your work.

Debounce to protect the user

It is our duty to build effective UIs. I strongly believe good design goes beyong how things look. We can't expect the users to use the application in a certain way and a good UI should work for everyone.

Useful libraries

Luckily you don't have to write your debounce utility by yourself. Some useful libraries which can help you:

• debounce
• underscore debounce
• redux-debounced - useful if you are using redux

Thanks

Thanks for reading!

Code on!