Debounce Input in React
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 debounced 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 gets updated with the inputValue
Now we can use the debounceInputValue while calling the API or wherever needed. Here is 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 our 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} />;
};