¿Tu useEffect tiene un bug silencioso?

Cambios rápidos en búsquedas o navegación generan múltiples peticiones simultáneas. Sin control, la respuesta que llegue última (aunque sea para datos obsoletos) sobrescribirá el estado, mostrando información incorrecta. Un error silencioso pero crítico.

El Problema: Race Conditions

Cuando el orden de las respuestas no coincide con el de las peticiones.

El Código Común (El error)

1. Click A → Se solicita "Datos A"
2. Click B → Se solicita "Datos B"
3. Red: Llega B (Rápido) → UI muestra "Datos B" ✓
4. Red: Llega A (Tarde) → UI sobrescribe con "Datos A" ✗

Aunque el usuario hizo clic en B último y quiere ver esos datos, la interfaz termina mostrando información obsoleta de A. Esto sucede porque cada petición actualiza el estado sin verificar si sigue siendo relevante.

La Solución (AbortController)

La clave para solucionar esto es cancelar la petición anterior antes de disparar la nueva. La API nativa AbortController nos permite hacer esto de forma elegante:

useEffect(() => {
  const controller = new AbortController(); // 1. Creamos el controlador

  fetch(`/api/user/${id}`, { signal: controller.signal }) // 2. Pasamos la señal
    .then(data => setUser(data))
    .catch(err => {
      if (err.name !== 'AbortError') {
        // Manejamos solo errores reales, no cancelaciones
      }
    });
  });

  // 3. Función de limpieza: cancelamos si el componente
  // se desmonta o el ID cambia
  return () => controller.abort();
}, [id]);