use-lodash-debounce-throttle/src/use-debounce.mdx

Bring debounce & throttle of lodash version to react-hooks

---
name: use-debounce
route: /
---

import { Playground } from 'docz';
import { useState, useEffect } from 'react';
import useDebounce from './use-debounce.ts';

# use-debounce

```js
const debouncedFn = useDebounce(func, [wait=0], [options={}])
```

<Playground>
  {() => {
    const [wait, setWait] = useState(500);
    const debouncedChange = useDebounce((value) => {
      console.log('debounced value', value);
    }, wait, { maxWait: 2000 });

    return (
      <div>
        <input
          type="text"
          onChange={(e) => {
            debouncedChange(e.target.value);
          }}
        />
        <button onClick={() => setWait(wait + 2000)}>add wait</button>
        <div>wait: {wait}ms, max 2s</div>
      </div>
    )
  }}
</Playground>