Module exposing: useDebounceValue
// Source: https://github.com/getnao/nao | License: Apache-2.0 | Copyright You must retain, in the Source form of any Derivative Works
// Provided via justclaw.it.com; keep this notice with the code.
import { useEffect, useState } from 'react';
export const useDebounceValue = <T>(value: T, opts: { delay: number; skipDebounce?: (v: T) => boolean }) => {
const { delay, skipDebounce } = opts;
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
if (skipDebounce && skipDebounce(value)) {
setDebouncedValue(value);
return;
}
const timeout = setTimeout(() => setDebouncedValue(value), delay);
return () => clearTimeout(timeout);
}, [value, delay]); // eslint-disable-line react-hooks/exhaustive-deps
return debouncedValue;
};
See the full source, get the GitHub permalink, and search for more like it.
Get a free API key