A debounce hook for react
useDebounceCallback
doesn't have deps
argument. If you want to cache your callback it's better to use:const myCallback = useDebouncedCallback(
useCallback(() => {
/* do some stuff */
}, [value]),
500
);
size-limit
to the project.callPending
callback to useDebouncedCallback
method. It allows to call the callback manually if it hasn't fired yet. This method is handy to use when the user takes an action that would cause the component to unmount, but you need to execute the callback.import React, { useState, useCallback } from 'react';
import useDebouncedCallback from 'use-debounce/lib/callback';
function InputWhichFetchesSomeData({ defaultValue, asyncFetchData }) {
const [debouncedFunction, cancel, callPending] = useDebouncedCallback(
(value) => {
asyncFetchData;
},
500,
[],
{ maxWait: 2000 }
);
// When the component goes to be unmounted, we will fetch data if the input has changed.
useEffect(
() => () => {
callPending();
},
[]
);
return <input defaultValue={defaultValue} onChange={(e) => debouncedFunction(e.target.value)} />;
}
More examples are available here: https://github.com/xnimorz/use-debounce/commit/989d6c0efb4eef080ed78330233186d7b0c249e3#diff-c7e0cfdec8acc174d3301ff43b986264R196
The full example: https://codesandbox.io/s/4wvmp1xlw4
maxWait
option. The maximum time func is allowed to be delayed before it's invoked.Old:
import { useDebounce, useDebouncedCallback } from 'use-debounce';
...
const debouncedValue = useDebounce(value, 1000);
const debouncedCallback = useDebouncedCallback(() => {...}, 1000);
New:
import { useDebounce, useDebouncedCallback } from 'use-debounce';
...
const [ debouncedValue, cancelValueDebouncingCycle ] = useDebounce(value, 1000);
const [ debouncedCallback, cancelCallback ] = useDebouncedCallback(() => {...}, 1000);
You still can use only value and callback:
import { useDebounce, useDebouncedCallback } from 'use-debounce';
...
const [ debouncedValue ] = useDebounce(value, 1000);
const [ debouncedCallback ] = useDebouncedCallback(() => {...}, 1000);