Function useDebouncedFunction

site/src/hooks/debounce.ts:35–82

(
	callback: (...args: Args) => void | Promise<void>,
	debounceTimeoutMs: number | ((...args: Args) => number),
)

 * debounce a text input).
 */
export function useDebouncedFunction<
	// Parameterizing on the args instead of the whole callback function type to
	// avoid type contravariance issues
	Args extends unknown[] = unknown[],
>(
	callback: (...args: Args) => void | Promise<void>,
	debounceTimeoutMs: number | ((...args: Args) => number),
): UseDebouncedFunctionReturn<Args> {
	const timeoutIdRef = useRef<ReturnType<typeof setTimeout> | undefined>(
		undefined,
	);
	const cancelDebounce = useCallback(() => {
		if (timeoutIdRef.current !== undefined) {
			clearTimeout(timeoutIdRef.current);
		}

		timeoutIdRef.current = undefined;
	}, []);

	const debounceTimeRef = useRef(debounceTimeoutMs);
	useEffect(() => {
		debounceTimeRef.current = debounceTimeoutMs;
	}, [debounceTimeoutMs]);

	const callbackRef = useRef(callback);
	useEffect(() => {
		callbackRef.current = callback;
	}, [callback]);

	// Returned-out function will always be synchronous, even if the callback arg
	// is async. Seemed dicey to try awaiting a genericized operation that can and
	// will likely be canceled repeatedly
	const debounced = useCallback(
		(...args: Args): void => {
			cancelDebounce();

			timeoutIdRef.current = setTimeout(
				() => void callbackRef.current(...args),
				typeof debounceTimeRef.current === "function"
					? debounceTimeRef.current(...args)
					: debounceTimeRef.current,
			);
		},
		[cancelDebounce],
	);

	return { debounced, cancelDebounce } as const;
}

/**
 * Takes any value, and returns out a debounced version of it.