useDebounce.ts

import { useMemo } from "react";
import { debounce } from "lodash";

export function useDebounceCallback(callback: (...values: any[]) => void, delay: number) {
	// eslint-disable-next-line react-hooks/exhaustive-deps
	const onChangeDebounce = useMemo(() => debounce(callback, delay), []);

	useEffect(() => {
		return () => onChangeDebounce.cancel();
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

	return onChangeDebounce;
}