Hook personalizado para debounce de valores e otimização de performance.
Hook que atrasa a atualização de um valor até que pare de mudar por um período específico
Valor atual: ""
Valor com debounce: ""
O hook useDebounce atrasa a atualização de um valor até que ele pare de mudar por um período específico (delay). Isso é útil para:
import { useState, useEffect } from 'react';
function useDebounce<T>(value: T, delay: number): T {
const [debouncedValue, setDebouncedValue] = useState<T>(value);
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
// Cleanup function que cancela o timeout anterior
return () => {
clearTimeout(handler);
};
}, [value, delay]);
return debouncedValue;
}
export default useDebounce;import { useCallback, useRef } from 'react';
function useDebounceCallback<T extends (...args: any[]) => any>(
callback: T,
delay: number
): T {
const timeoutRef = useRef<NodeJS.Timeout>();
return useCallback(
((...args: Parameters<T>) => {
clearTimeout(timeoutRef.current);
timeoutRef.current = setTimeout(() => {
callback(...args);
}, delay);
}) as T,
[callback, delay]
);
}