Function useDebouncedValue

site/src/hooks/debounce.ts:87–115

(value: T, debounceTimeoutMs: number)

 * Takes any value, and returns out a debounced version of it.
 */
export function useDebouncedValue<T>(value: T, debounceTimeoutMs: number): T {
	if (!Number.isInteger(debounceTimeoutMs) || debounceTimeoutMs < 0) {
		throw new Error(
			`Invalid value ${debounceTimeoutMs} for debounceTimeoutMs. Value must be an integer greater than or equal to zero.`,
		);
	}

	const [debouncedValue, setDebouncedValue] = useState(value);

	// If the debounce timeout is ever zero, synchronously flush any state syncs.
	// Doing this mid-render instead of in useEffect means that we drastically cut
	// down on needless re-renders, and we also avoid going through the event loop
	// to do a state sync that is *intended* to happen immediately
	if (value !== debouncedValue && debounceTimeoutMs === 0) {
		setDebouncedValue(value);
	}
	useEffect(() => {
		if (debounceTimeoutMs === 0) {
			return;
		}

		const timeoutId = setTimeout(() => {
			setDebouncedValue(value);
		}, debounceTimeoutMs);
		return () => clearTimeout(timeoutId);
	}, [value, debounceTimeoutMs]);

	return debouncedValue;
}