# useDebounce

Source code is hosted on [GitHub](https://github.com/corets/use-debounce)

{% tabs %}
{% tab title="yarn" %}

```bash
yarn add @corets/use-debounce
```

{% endtab %}

{% tab title="npm" %}

```
npm install --save @corets/use-debounce
```

{% endtab %}
{% endtabs %}

## useDebounce() <a href="#usedebounce" id="usedebounce"></a>

This hook is built on top of [`debounce()`](https://lodash.com/docs/4.17.15#debounce) from lodash and accepts the same arguments.

Example of a debounced value:

```typescript
import React, { useState, useEffect } from "react"
import { useDebounce } from "@corets/use-debounce"

const Example = () => {
  const [input, setInput] = useState("")
  const debouncedInput = useDebounce(input, 300)
  
  const handleSearch = () => {
    // fetch some data based on input...
  }
  
  const handleChange = (e) => setInput(e.target.value)
  
  // react to changes of the debounced input
  useEffect(handleSearch, [debouncedInput])
  
  return (
    <input type="text" onChange={handleChange} />
  )
}
```

Example of a debounced function:

```typescript
import React, { useState, useEffect } from "react"
import { useDebounce } from "@corets/use-debounce"

const Example = () => {
  const [input, setInput] = useState("")
  
  const handleSearch = useDebounce((query: string) => {
    // you can also access variable "input" directly, if you want to
    // fetch some data based on input...
  }, 300)
  
  const handleChange = (e) => {
    setInput(e.target.value)
    // trigger search immediately, this call will be debounced
    handleSearch(e.target.value)
  }
  
  return (
    <input type="text" onChange={handleChange} />
  )
}
```

{% hint style="info" %}
This hook accepts a third argument, identical to the one expected by the [debounce()](https://lodash.com/docs/4.17.15#debounce) function from lodash.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.corets.io/hooks/use-debounce.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.