import { useState, useEffect, useRef, useCallback } from "react"; /** * Resultado genérico de una búsqueda. * T es el tipo de cada item en los resultados. */ interface SearchResult { data: T[]; total: number; hasMore: boolean; } interface UseDebounceSearchOptions { /** Función que ejecuta la búsqueda contra la API */ searchFn: (query: string, signal: AbortSignal) => Promise>; /** Milisegundos de espera antes de ejecutar la búsqueda (default: 300) */ delay?: number; /** Longitud mínima del query para disparar la búsqueda */ minLength?: number; } interface UseDebounceSearchReturn { query: string; setQuery: (value: string) => void; results: T[]; total: number; hasMore: boolean; isLoading: boolean; error: string | null; clear: () => void; } /** * Hook para búsqueda con debounce y cancelación automática. * * Ejemplo de uso: * ```tsx * const { query, setQuery, results, isLoading } = useDebounceSearch({ * searchFn: (q, signal) => * fetch(`/api/users?q=${q}`, { signal }).then(r => r.json()), * delay: 400, * minLength: 2, * }); * ``` */ export function useDebounceSearch({ searchFn, delay = 300, minLength = 1, }: UseDebounceSearchOptions): UseDebounceSearchReturn { const [query, setQuery] = useState(""); const [results, setResults] = useState([]); const [total, setTotal] = useState(0); const [hasMore, setHasMore] = useState(false); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const abortRef = useRef(null); const timerRef = useRef | null>(null); // Limpiar al desmontar useEffect(() => { return () => { abortRef.current?.abort(); if (timerRef.current) clearTimeout(timerRef.current); }; }, []); useEffect(() => { // Si el query es muy corto, limpiar resultados if (query.trim().length < minLength) { setResults([]); setTotal(0); setHasMore(false); setError(null); setIsLoading(false); return; } // Cancelar petición anterior abortRef.current?.abort(); // Limpiar timer anterior if (timerRef.current) clearTimeout(timerRef.current); setIsLoading(true); setError(null); timerRef.current = setTimeout(async () => { const controller = new AbortController(); abortRef.current = controller; try { const result = await searchFn(query.trim(), controller.signal); // Solo actualizar si no fue abortado if (!controller.signal.aborted) { setResults(result.data); setTotal(result.total); setHasMore(result.hasMore); setIsLoading(false); } } catch (err) { if (err instanceof DOMException && err.name === "AbortError") { return; // Ignorar errores de cancelación } if (!controller.signal.aborted) { setError(err instanceof Error ? err.message : "Error desconocido"); setResults([]); setIsLoading(false); } } }, delay); }, [query, delay, minLength, searchFn]); const clear = useCallback(() => { setQuery(""); setResults([]); setTotal(0); setHasMore(false); setError(null); setIsLoading(false); abortRef.current?.abort(); if (timerRef.current) clearTimeout(timerRef.current); }, []); return { query, setQuery, results, total, hasMore, isLoading, error, clear }; }

useDebounceSearch hook