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} />;
};
Top comments (7)
Really useful and informative, thank you!
no it's wrong
how can a constant (500) be a dependency of useEffect? it will never trigger useEffect more than one, which is the first load of the component
Thanks! It was very useful.
Why is there '500' as a dependency in useEffect in first solution?
idk, I'm pretty sure you're right and that number 500 shouldn't be there. It's literally impossible for the literal number 500 to ever change to become any other value. 😅 I suspect that there was maybe an inadvertently partial refactor here.
Thanks! Just what I needed to learn.
(I think there is a typo at the start of Solution 2, you mention "use-debounce" but then install "lodash").