# 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.

```javascript
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`

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

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

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

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

```javascript
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

```javascript
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

```javascript
npm install use-debounce
```

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

```javascript
import { useDebounce } from "use-debounce";
```

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

```javascript
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`

```javascript
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.`

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

Now we can use the debouncedValue wherever [necessary. Here](http://necessary.Here) is the full solution

```javascript
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} />;
};
```