# useThrottle

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

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

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

{% endtab %}

{% tab title="npm" %}

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

{% endtab %}
{% endtabs %}

## useThrottle() <a href="#usethrottle" id="usethrottle"></a>

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

Example of a throttled value:

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

const Example = () => {
  const [input, setInput] = useState("")
  const throttledInput = useThrottle(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, [throttledInput])
  
  return (
    <input type="text" onChange={handleChange} />
  )
}
```

Example of a throttled function:

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

const Example = () => {
  const [input, setInput] = useState("")
  
  const handleSearch = useThrottle((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 throttled
    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 [throttle()](https://lodash.com/docs/4.17.15#throttle) function from lodash.
{% endhint %}