Custom react hooks for 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.
Using yarn or npm:
yarn add use-lodash-debounce
npm i use-lodash-debounce
⚠️ [email protected]
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.
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)
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)}
/>
);
}
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.
The callback returned by useDebouncedCallback
has a method cancel
to cancel delayed function invocations and a flush
method to immediately invoke them.
If you're looking for a debounce hook that don't use lodash internally, check out use-debounce.