> ## Documentation Index
> Fetch the complete documentation index at: https://use-any-hook-d92674ab.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# useDebounce

> Delay the execution of function or state update with useDebounce.

#### **Install**

```bash npm theme={null}
npm i use-any-hook
```

#### **Description**

The `useDebounce` hook is useful for delaying the execution of functions or state updates until a specified time period has passed without any further changes to the input value. This is especially useful in scenarios such as handling user input or triggering network requests, where it effectively reduces unnecessary computations and ensures that resource-intensive operations are only performed after a pause in the input activity.

#### **Parameters**

| Name  | Type   | Description                                                                          |
| ----- | ------ | ------------------------------------------------------------------------------------ |
| value | any    | The value that you want to debounce. This can be of any type.                        |
| delay | number | The delay time in milliseconds. After this amount of time, the latest value is used. |

#### **Return Values**

| Name           | Type | Description                                                                                                                    |
| -------------- | ---- | ------------------------------------------------------------------------------------------------------------------------------ |
| debouncedValue | any  | The debounced value. After the delay time has passed without the `value` changing, this will be updated to the latest `value`. |

#### **Example**

```javascript useDebounce.example.tsx theme={null}
import { useDebounce } from "use-any-hook";

function MyComponent() {
  const [searchTerm, setSearchTerm] = useState("");
  const debouncedSearchTerm = useDebounce(searchTerm, 1000);

  const handleSearch = async () => {
    const response = await fetch(
      `https://dummyjson.com/products/search?q=${debouncedSearchTerm}`
    );
  };

  useEffect(() => {
    handleSearch();
    // This will be called after (1000ms = 1second) from your last keypress
  }, [debouncedSearchTerm]);

  return (
    <input
      type="text"
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
    />
  );
}
```