use-lodash-debounce

use-lodash-debounce ⏳

Custom react hooks for lodash debounce that provides an easy way to debounce any value, debounced callbacks and types out of the box.

Install

Using yarn or npm:

yarn add use-lodash-debounce

npm i use-lodash-debounce

⚠️ react@16.8.0 or greater is required due to the usage of hooks.

Notice that react and lodash.debounce are defined as peer dependencies in order to get a smaller bundle size. This means they should be installed in your project.

Usage

Debounce values throughout re-renders with useDebounce. The debounce will be triggered everytime the value changes (compared using strict equality).

import { useDebounce } from 'use-lodash-debounce'

const [value, setValue] = useState()
const debouncedValue = useDebounce(value, 800)

Create debounced callbacks with useDebouncedCallback.

import { useDebouncedCallback } from 'use-lodash-debounce'

const [value, setValue] = useState()
const debouncedSetValue = useDebouncedCallback(setValue, 800)

Example

import { useDebounce } from 'use-lodash-debounce'

function SearchInput() {
  const [value, setValue] = useState();
  const debouncedValue = useDebounce(value, 1000);

  useEffect(() => {
    // do search stuff
  }, [debouncedValue]);

  return (
    <input
      placeholder="Type to search"
      onChange={e => setValue(e.target.value)}
    />
  );
}

Debounce Options

Lodash debounce supports a set of additional options which can be provided through a third parameter for useDebounce and useDebouncedCallback.

const options = { leading: true, maxWait: 1600, trailing: false }
const debouncedSetValue = useDebouncedCallback(setValue, 800, options)

See lodash debounce docs for details.

Cancel / Flush

The callback returned by useDebouncedCallback has a method cancel to cancel delayed function invocations and a flush method to immediately invoke them.

Alternatives

If you're looking for a debounce hook that don't use lodash internally, check out use-debounce.

License

MIT