useDebounceValue (hooks/use-debounce-value.ts)

nao · apps/frontend/src/hooks/use-debounce-value.ts · typescript · Apache-2.0
ui, UI / Frontend

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