# useDebouncedCallback

Makes passed function debounced, otherwise acts like `useCallback`. Similar to [useDebounce](/packages/hooks/src/useDebounce/README.md) but with a callback. Useful for fast events such as `scroll` or `resize`.

[What is debouncing?](https://css-tricks.com/the-difference-between-throttling-and-debouncing/#debouncing-enforces-that-a-function-not-be-called-again-until-a-certain-amount-of-time-has-passed-without-it-being-called-as-in-execute-this-function-only-if-100-milliseconds-have-passed-witho)

The third argument is a dependency list on `useCallback`, passed function will be re-wrapped when delay or dependencies have changed. Changed debounce callbacks still has same timeout, meaning that calling new debounced function will abort previously scheduled invocation.

It clears the calls when the component is unmounted.

## Example usage

```jsx
import { useDebouncedCallback } from '@10up/react-hooks';

function MyComponent() {
    const handleChange = useDebouncedCallback( event => {
        // This will be called 300ms after the last change
    }, [], 300 );

    return (
        <div>
            <label htmlFor="field">Search</label>
            <input
                id="field"
                onChange={ handleChange }
            />
        </div>
    );
}
```

## Arguments

* **callback** _`function`_ - Function to be called once the time has passed.
* **deps** _`Array<any>`_ - Dependency array to be passed so function can be re-wrapped.
* **delay** _`number`_ - Debounce delay.

### Return

* **function** - Function to be called which will result in invoking the `callback` after `delay` ms.