El Fetcher con Condición de Carrera
medium⏱ 20 minreactlesson
APRENDE HACIENDOPon a prueba tu intuición3 pasos
El Fetcher con Condición de Carrera
Usa los ejemplos y la explicación de la lección para comprobar tu idea.
Reflexión personal. No se envía a ningún servicio de IA.ENEste enunciado todavía está solo en inglés; la traducción al español está en camino.
Tenemos una barra de búsqueda. Si escribes "React" rápidamente, las llamadas a la API para "R", "Re", "Rea", etc., se disparan. Si la respuesta de "R" llega después de la respuesta de "React", la interfaz muestra datos incorrectos.
El Desafío: Selecciona "Alice", luego inmediatamente selecciona "Bob". Observa que después de que Bob se carga, los datos de Alice los sobrescriben 2 segundos después.
La Tarea:
- Selecciona "Alice", luego inmediatamente selecciona "Bob".
- Observa que después de que Bob se carga, los datos de Alice los sobrescriben 2 segundos después.
- Corrígelo: Usa un flag de limpieza o
AbortController para ignorar la respuesta obsoleta.
Why this happens
Cuando person cambia rápidamente, múltiples solicitudes asíncronas están en vuelo. La respuesta lenta de "Alice" (2 segundos) puede llegar después de la respuesta rápida de "Bob" (200ms), sobrescribiendo los datos correctos. Usa una función de limpieza con un flag para rastrear si el efecto sigue siendo relevante, o usa AbortController para cancelar la solicitud.