How to use debounce in class components in React

Debouncing is used for optimizing the performance of a web app. It is done by limiting the rate of execution of a particular function (also known as rate limiting).

The most clear example is an input box with an onChange event. When we’ll type something inside this input box, on every keystroke an API call will be made. If we go to the network tab on Chrome, and type results in the input box, we’ll see that on every letter we type, a network/API call is being made.

This is not good from a performance point of view because if the user is typing, let’s say, 50 or 100 characters in the input box, then 50-100 API calls will be made.

We will fix it with the help of debouncing.

Different methods for implementing debouncing

There are different methods to implement this:

• Coding a function with the use of a timer and the setTimeout function.
• Using already debounced components as react-debounce-input.
• Use of the debounce function of the lodash package, which is the one which worked better for me with class components and which is the one we will focus on in this article.

The lodash library

Lodash is a very popular JavaScript library with a great variety of functions which make JavaScript easier by taking the hassle out of working with arrays, numbers, objects, strings, etc…

Lodash’s modular methods are great for:

• Iterating arrays, objects, & strings
• Manipulating & testing values
• Creating composite functions

The debounce function

The syntax of this function is:

_.debounce(func, [wait=0], [options={}])

As said in its manual, this function:

Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked. The debounced function comes with a cancel method to cancel delayed func invocations and a flush method to immediately invoke them. Provide options to indicate whether func should be invoked on the leading and/or trailing edge of the wait timeout. The func is invoked with the last arguments provided to the debounced function. Subsequent calls to the debounced function return the result of the last func invocation.

One of its best advantages, as mentioned there, is that you don’t need to redefine the arguments of the debounced function, as it will automatically take the last arguments of the original non debounced one.

So, in the end, it makes it very easy to apply the debounced behavior to any of our already existing functions.

Example of debounce function in a class component

Let’s suppose we have a handleChange function linked to an onChange event of a search input box to query the API the items matching the search text.

function handleChange(event) {
    event.preventDefault();
    name = event.target.name
    value = event.target.value;
    this.setState({[`${name}`]: value}, () => {
        fetch(`https://apidomain.ext/api/search?q=${value}`)
            .then((res) => res.json())
            .then((json) => setSuggestions(json.data.items));
    });
};

The rendering of the input component would be something like:

<Input
   type="text"
   name="search"
   id="search"
   value={this.state["search"]}
   onChange={this.handleChange}
/>

In the constructor of the class component we will have the binding refered to this function:

this.handleChange = this.handleChange.bind(this);

To start the magic and apply the lodash debounce function, we just have to insert the import in the header of the component code:

import debounce from "lodash/debounce";

And then, just after the binding of the original function, define the debounced version of the function:

this.handleChange = this.handleChange.bind(this);
this.debouncedHandleChange = debounce(this.handleChange, 500);

Now we can call to the debounced function in the onChange event of the search input box:

<Input
   type="text"
   name="search"
   id="search"
   value={this.state["search"]}
   onChange={this.debouncedHandleChange}
/>

And that’s it! The magic is done! Now the handleChange function will only be executed after 500 miliseconds of the last time it was invoked, that means, after 0.5 seconds from you stopped typing in it. If you typed 20 characters before stopping, you saved 19 calls to the API and made just the last one with the whole string you wanted to search for.

I hope this tip will be useful for all the people who, as me, were searching for it for quite a while and could only find examples for React functional components and not for React class components. As you can see, in the end the solution was surprisingly easy to implement.