Sugerencias asíncronas con debounce

En lugar de filtrar un arreglo local, llame a un punto de conexión de la API que devuelva sugerencias coincidentes según la consulta. La llamada a la API se realiza en un useEffect que depende del valor de entrada con debounce. Esto traslada la responsabilidad del filtrado al servidor, lo que permite realizar coincidencias aproximadas, clasificar resultados y ofrecer sugerencias a partir de un conjunto de datos mucho mayor.

Añada dos nuevas variables de estado al autocompletado: isLoading (booleano) para mostrar un indicador mientras la solicitud está en curso, y error (cadena o null) para mostrar un mensaje de error cuando falle la solicitud. Así, los usuarios reciben información sobre la operación asíncrona en lugar de quedarse preguntándose por qué no aparecen las sugerencias.

En el useEffect de fetch, establezca setIsLoading(true) y setError(null) al principio; después, llame a fetch(url), analice el JSON, llame a setSuggestions(data) y, finalmente, establezca setIsLoading(false) en un bloque finally o después de las rutas de éxito y error. El arreglo de dependencias del efecto contiene únicamente debouncedInputValue.

Cree un nuevo AbortController al principio del efecto y pase controller.signal a las opciones de fetch. En la función de limpieza, llame a controller.abort(). Cuando el usuario escribe y cambia el valor con debounce, la solicitud fetch anterior se aborta antes de iniciar la nueva, lo que evita que lleguen resultados obsoletos fuera de orden.

Cuando se aborta una solicitud fetch, esta se rechaza con una DOMException cuyo nombre es AbortError. En el bloque catch, compruebe if (err.name === 'AbortError') return; para ignorar silenciosamente las solicitudes abortadas. Gestione únicamente los errores de red reales o los errores de la API que deban mostrarse al usuario.

Establezca isLoading en true antes de la solicitud fetch y en false después de que se resuelva o se rechace. Use un bloque finally para asegurarse de que siempre se restablezca: fetch(url).then(...).catch(...).finally(() => setIsLoading(false)). Sin el bloque finally, un error de fetch dejaría el indicador de carga ejecutándose indefinidamente.

Cuando isLoading sea true y el campo de entrada contenga texto, muestre la lista desplegable con un indicador de carga centrado en su interior, en lugar de la lista de sugerencias. Esto indica al usuario que los resultados están por llegar. Cuando la carga termine y hayan llegado las sugerencias, sustituya el indicador por los elementos de sugerencia correspondientes.

Cuando error no sea null, muestre la lista desplegable con el mensaje de error en lugar de las sugerencias. Un mensaje como "No se pudieron cargar las sugerencias. Inténtelo de nuevo." resulta más claro que una cadena de error sin procesar. También puede añadir un botón de reintento que vuelva a activar la solicitud fetch manualmente.

Evite realizar solicitudes fetch para cadenas vacías o consultas demasiado cortas que produzcan demasiados resultados irrelevantes. Añada esta condición al principio del efecto: if (debouncedInputValue.length < 2) { setSuggestions([]); return; }. Esto reduce las llamadas innecesarias a la API y evita mostrar una lista abrumadora de resultados a partir de un solo carácter.

Almacene los resultados obtenidos en un Map de useRef: const cache = useRef(new Map()). Antes de realizar la solicitud fetch, compruebe if (cache.current.has(query)) { setSuggestions(cache.current.get(query)); return; }. Después de una solicitud fetch correcta, almacene el resultado. Esto elimina las solicitudes de red redundantes para las consultas que el usuario ya ha escrito.

Para el autocompletado, específicamente, un retraso de debounce de 200-300 ms es el punto óptimo. Los retrasos más cortos (inferiores a 200 ms) activan demasiadas solicitudes cuando se escribe rápido. Los retrasos más largos (superiores a 400 ms) hacen que las sugerencias parezcan lentas y poco receptivas. 250 ms es un valor predeterminado habitual en implementaciones de autocompletado en producción.

¿Por qué es importante AbortController en un autocompletado con debounce que obtiene datos de una API?

Sustituya el filtrado estático por una solicitud fetch a una API dentro de un useEffect que dependa del valor con debounce. Use AbortController para cancelar las solicitudes obsoletas. Añada los estados isLoading y error para proporcionar información al usuario. Establezca un umbral mínimo de caracteres para evitar llamadas excesivas. Almacene los resultados en una referencia para omitir las solicitudes de red redundantes.