Patrón de optimización que retrasa la ejecución de una función hasta que haya transcurrido un tiempo de inactividad.
Se utiliza para evitar el procesamiento excesivo en eventos rápidos, como búsquedas en tiempo real (mientras se escribe) o actualizaciones de cantidad en un carrito de compras.
// Implementación de debounce function debounce<T extends (...args: any[]) => any>( func: T, delay: number ): (...args: Parameters<T>) => void { let timeoutId: NodeJS.Timeout; return (...args: Parameters<T>) => { clearTimeout(timeoutId); timeoutId = setTimeout(() => func(...args), delay); }; } // Uso en búsqueda en tiempo real function BuscadorConDebounce() { const [query, setQuery] = useState(''); const [resultados, setResultados] = useState([]); // Crear función debounced (solo se ejecuta 300ms después de dejar de escribir) const buscarDebounced = useMemo( () => debounce(async (termino: string) => { if (termino.length < 2) return; const res = await fetch(`/api/buscar?q=${termino}`); setResultados(await res.json()); }, 300), [] ); const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { const valor = e.target.value; setQuery(valor); buscarDebounced(valor); // No ejecuta inmediatamente }; return ( <input type="text" value={query} onChange={handleChange} placeholder="Buscar..." /> ); } // Debounce vs Throttle // Debounce: espera a que el usuario PARE de escribir // Throttle: ejecuta como máximo cada X ms (ej: scroll)
