Throttling and Debouncing -> A look into performance

Throttling and Debouncing -> A look into performance

Be it vanilla JavaScript or React, eventListeners and onChange methods are the life of the reactiveness of the application. But as Uncle Ben wisely states

With great power, comes great responsibility.

As eventListeners and onChange functions pile up on your app as it gets complex, even a minor input can trigger a lot of these function calls. It is considered best practice to control how often these functions are getting triggered to keep the call stack as empty as possible.

What's wrong?

Let's search for our solution with a simple example, A SEARCH BAR! In the below snippet, a very simple search bar is implemented. What is does? Just gives you how many times the onChange function is triggered.

CPT2205262237-463x117.gif

export default function App() {
  const [count,setCount] = useState(0);
  const handleChange = () => {
    setCount(count+1);
  }
  return (
    <div className="App">
      <input type="text" onChange={handleChange}/>
      <p>Times onChange has fired = {count}</p>
    </div>
  );
}

As you can see, in a simple scenario, in less than 5 seconds, we've triggered the onChange function 24 times. Now imagine sending an API request every time this function is triggered to search for something. NIGHTMARE!. Let's do the math, an API request takes about 500ms, 24 API requests will take 12s and we've only got 5.

And this is just a search, we've got clicks, moves, scrolls all kinds of window events to listen to.

I am speed -> Throttling and Debouncing

Before we get to speed coding these new things, let's oil our knowledge to understand what are these new terms.

Throttling

Throttling is a technique to limit the execution of a function even when it is continuously triggered by some event.

Let's take an example, GUNS but instead of violence, we execute functions. Get it? Shotguns for example are slow guns. Let's take the rate of fire for shotguns to be 500ms. Now we need a trigger function that even when continuously pressed, waits for 500ms to fire another bullet (read callback). This is throttling, as the trigger is pressed continuously, the function's execution is limited to only once in 500ms.

CPT2205262313-559x400.gif This is throttling in action, while the normal scroll event is called more than 200 times. When throttled the call is reduced to 8 times. The throttle time set in this example is 500ms. Visit this codesandbox-example for full code.

Debouncing

Debouncing is a technique to limit the execution of a function till a certain threshold value is reached.

Let's have cake for an example here. Your mom has brought home delicious blueberry cheesecake. You keep asking your mom for cake and she says no. You keep asking her every second, so she comes up with a debounce. She tells you that if you don't ask her for an hour straight, you'll get the cake. This means you will not get the cake if you keep asking, you will only get it after an hour from your last ask, once you stop asking.

So basically debouncing is a method with will stop a function from executing till a certain threshold value is reached after the continuous event trigger stops.

CPT2205270122-466x401.gif This is debouncing in action. The first input is not denounced and hence the supposed API call will fire 21 times. The second input is debounced with a delay of 200ms, this way the supposed API call will only be executed after 200ms when the user stops typing. This saves us almost 15 API calls, which were anyways not needed since the user was typing and did not expect a result. Visit this codesandbox-example for full code.

Use cases Debouncing vs Throttling

Throttling -> Generally used when you want to limit the execution of a continuously happening event. For example, scrolling, and resizing.

Debouncing -> Used when you want to wait for a certain threshold before executing once the continuously happening event stops. For example, the search bar, and query-based API calls.

Thanks for taking the time to read this article. If this article helps you in your journey as a React/JavaScript developer leave a ❤️ with your comments and suggestions. Thank You!