Debounce Input in React

#debounce #react #performance #javascript

Debouncing an input is a technique used to improve web application performance and user experience. When a user types into an input field, the application may perform several operations, such as filtering a list, fetching data from an API, or performing other processes based on the user's input. These operations can be computationally expensive and slow down the application or even cause it to crash if performed too frequently.

Debouncing an input in React involves setting a delay between when a user types into an input and when the input's value is updated.

To create a debounce input in react you can use the following steps.

Solution 1

First we use the useState hook provided by React to store the input variable in a state.

const [inputValue, setInputValue] = React.useState("")

Then we create a function called handleInputChange which will handle the input changes and then update the input value with setInputValue

const handleInputChange = (event) => {
   setInputValue(event.target.value);
}

Moving forward we again use the useState hook provided by React to store the debounced input value

const [debouncedInputValue, setDebouncedInputValue] = React.useState("")

Now we use the useEffect hook and perform a delay before we update the debouncedInputValue.

React.useEffect(() => {
  const delayInputTimeoutId = setTimeout(() => {
    setDebouncedInputValue(inputValue);
  }, 500);
  return () => clearTimeout(delayInputTimeoutId);
}, [inputValue, 500]);

500 milliseconds is used as the delay time to update the deboucedInputValue. We can add the time according to our requirements.

The useEffect will run every time the inputValue changes, after which the delay of 500 milliseconds will happen, and then the deboucneInputValue get updated with the inputValue

Now we can use the debounceInputValue while calling the API or wherever needed. Here the full solution

import React from "react";

const DebounceInput = () => {
  const [inputValue, setInputValue] = React.useState("");
  const [debouncedInputValue, setDebouncedInputValue] = React.useState("");

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  React.useEffect(() => {
    const timeoutId = setTimeout(() => {
      setDebouncedValue(inputValue);
    }, 500);
    return () => clearTimeout(timeoutId);
  }, [inputValue, 500]);

  return <input type="text" value={inputValue} onChange={handleInputChange} />;
};

Solution 2

For this solution we will be using the debounce function from use-debounce

Firstly we will need to install lodash in our application by running the following command

npm install use-debounce

Then we import the debounce function from use-debounce in out React component

import { useDebounce } from "use-debounce";

After the import is done state is declared for storing the input value

const [inputValue, setInputValue] = React.useState("");

Then we create a function called handleInputChange which will handle the input changes and then update the input value with setInputValue

const handleInputChange = (event) => {
   setInputValue(event.target.value);
}

Then we will use the useDebounce hook to debounce the input value. The first argument of useDebounce takes the input value, and the second argument takes the time for the delay. Then the hook will return debounced value which is debouncedValue.

const [debouncedValue] = useDebounce(inputValue, 500);

Now we can use the debouncedValue wherever necessary.Here is the full solution

import React from "react";
import { useDebounce } from "use-debounce";
const DebounceInput = () => {
  const [inputValue, setInputValue] = React.useState("");
  const [debouncedValue] = useDebounce(inputValue, 500);

  const handleInputChange = (event) => {
    const value = event.target.value;
    setInputValue(value);
  };

  return <input type="text" value={inputValue} onChange={handleInputChange} />;
};