Bring debounce & throttle of lodash version to react-hooks.

useDebounce & useThrottle will auto create, update and cancel debounced & throttled instance, so you do not need to cancel manually.

demo

https://frezc.github.io/use-lodash-debounce-throttle/

usage

install

1yarn add use-lodash-debounce-throttle

useDebounce

1import { useDebounce } from 'use-lodash-debounce-throttle';
2
3const Com = () => {
4  const debouncedChange = useDebounce((v) => {
5    postUpdate();
6  }, 500, { maxWait: 2000 });
7
8  return (
9    <input
10      type="text"
11      onChange={(e) => {
12        debouncedChange(e.target.value)
13      }}
14    />
15  )
16}

useThrottle

1import { useThrottle } from 'use-lodash-debounce-throttle';
2
3const Com = () => {
4  const debouncedChange = useThrottle((v) => {
5    sendMessage();
6  }, 500, { leading: false });
7
8  return (
9    <input
10      type="text"
11      onChange={(e) => {
12        debouncedChange(e.target.value)
13      }}
14    />
15  )
16}

API

• useDebounce: same as https://lodash.com/docs/4.17.11#debounce
• useThrottle: same as https://lodash.com/docs/4.17.11#throttle

DEV

yarn install
yarn start