Custom React Hook: useDebounce
Hook personalizado para debounce de valores. Perfecto para busquedas en tiempo real sin sobrecargar la API.
import { useState, useEffect, useCallback, useRef } from 'react';
function useDebounce(value, delay = 300) {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const timer = setTimeout(() => setDebouncedValue(value), delay);
return () => clearTimeout(timer);
}, [value, delay]);
return debouncedValue;
}
function useDebouncedCallback(callback, delay = 300) {
const callbackRef = useRef(callback);
const timerRef = useRef(null);
useEffect(() => {
callbackRef.current = callback;
}, [callback]);
return useCallback((...args) => {
if (timerRef.current) clearTimeout(timerRef.current);
timerRef.current = setTimeout(() => callbackRef.current(...args), delay);