useDebounce.js

import { useEffect, useState } from "react";

function useDebounce(value, delay) {
	const [debouncedValue, setDebouncedValue] = useState(value);

	useEffect(() => {
		const handler = setTimeout(() => {
			setDebouncedValue(value);
		}, delay);

		return () => {
			clearTimeout(handler);
		};
	}, [value, delay]);

	return debouncedValue;
};

function useDebouncedState(initialState, interval) {
	const [value, setValue] = useState(initialState);
	const debouncedValue = useDebounce(value, interval);

	return [value, setValue, debouncedValue];
}

function useDebouncedEffect(value, interval, effect) {
	const debouncedValue = useDebounce(value, interval);

	useEffect(() => effect(debouncedValue), [debouncedValue, effect]);
}