# 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 %}