How to Perform Debouncing in ReactJS In Correct Way ?

In this tutorial, we will discuss how to perform debounce in react. Debounce is an optimization method of limiting the function calls so that it does not trigger so often. For example, Triggering the search API on every text. Debouncing optimizes this process by triggering the search at a certain interval instead of on every text change. There are various methods to perform debounce in react. In this tutorial, we will be discussing two methods to perform debouncing in reactjs:

• Using Javascript setTimeout() function
• Using lodash

Using Javascript setTimeout() function

The debounce function can be performed using the setTimeout() function on every text change and optimizing the process.

Prerequisites

• useState and useEffect hooks
• Javascript setTimeout() function

Example

Let’s create a simple function that stores searchText from the input provided by the user. Using debounce to store the searchText on a certain delay.

import React, { useState, useEffect } from "react";

export default function Homepage() {
  const [text, setText] = useState("");
  const [searchText, setSearchText] = useState("");

  useEffect(() => {
    const delayDebounce = setTimeout(() => {
      setSearchText(text);
    }, 500);

    return () => clearTimeout(delayDebounce);
  }, [text]);

  return (
    <div className="row m-4">
      <div className="col-4 d-flex flex-column gap-2">
        <span>Normal: {text}</span>
        <span>Debounce: {searchText}</span>
        <input
          type="text"
          className="form-control"
          onChange={(e) => setText(e.target.value)}
        />
      </div>
    </div>
  );
}

Here, The input provided by the user is stored in a state text using useState hooks and another state searchText is used to store the search text. A debounce function delayDebounce() is created inside useEffect with text as its dependency so that the delayDebounce() function triggers everytime the text state is changed. The setSearchText(text) function is wrapped inside the setTimeout() function so that the text is stored in the searchText state only after a delay of 0.5 seconds. clearTimeout(delayDebounce) is returned as the cleanup function to clear the timeout after storing the text in searchText.

Using lodash

We can also perform debounce in react using lodash. lodash is a JavaScript library that provides utility functions for common programming tasks. It provides a debounce function that delays invoking function until the provided milliseconds have elapsed since the last time the debounce function was invoked.

We need to install the lodash package and import it into the component.

npm install lodash

Example

import React, { useState } from "react";
import {debounce} from 'lodash';

export default function Homepage() {
  const [text, setText] = useState("");
  const [searchText, setSearchText] = useState("");

  const handleChange = debounce(() => {
    setSearchText(text);
  }, 500);

  return (
    <div className="row m-4">
      <div className="col-4 d-flex flex-column gap-2">
        <span>Normal: {text}</span>
        <span>Debounce: {searchText}</span>
        <input
          type="text"
          className="form-control"
          onChange={(e) => {
            setText(e.target.value);
            handleChange();
          }}
        />
      </div>
    </div>
  );
}

Here, the debounce() function from the lodash library is used in the handleChange() function which is triggered when the user provides input text. setSearchText(text) is wrapped inside the debounce() function and the delay is set to 0.5 seconds.

Output

The output is same for both methods.

Conclusion

In this tutorial, we discussed how to perform debounce in react. We performed debounce using two methods: Javascript setTimeout() function and lodash library.