¿Cómo obtienes datos en React y evitas las condiciones de carrera?

Question

Accepted Answer

El enfoque básico usa `useEffect`, pero debes gestionar la **limpieza** y las **respuestas fuera de orden**, o terminarás con datos obsoletos y advertencias.

```jsx
function User({ id }) {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);

useEffect(() => {
    const ctrl = new AbortController();
    fetch(`/api/users/${id}`, { signal: ctrl.signal })
      .then(r => r.json())
      .then(setUser)
      .catch(e => { if (e.name !== "AbortError") setError(e); });

return () => ctrl.abort(); // cancel the in-flight request when id changes/unmounts
  }, [id]);
}
```

## La condición de carrera que esto previene

Supongamos que `id` cambia rápidamente de `1` a `2`. Sin cancelación, ambas peticiones están en curso. Si la petición `1` es lenta y se resuelve **después** de la petición `2`, mostrarías los datos del usuario `1` para el usuario `2`:

```text
fetch(1) ───────────(slow)──────▶ setUser(user1)  ❌ shown last, but wrong
fetch(2) ──(fast)──▶ setUser(user2)
```

Abortar la petición anterior (la limpieza) soluciona esto. Un patrón más antiguo con una bandera booleana (`let active = true; ... if (active) setUser(...)`) logra lo mismo ignorando las respuestas obsoletas.

## En aplicaciones reales, usa una biblioteca

La obtención manual de datos se vuelve repetitiva y se le escapan el caché y los reintentos. **React Query (TanStack Query)** o **SWR** gestionan por ti los estados de carga/error, el caché, la deduplicación, el refetch en segundo plano y el patrón stale-while-revalidate:

```jsx
const { data, isLoading, error } = useQuery({ queryKey: ["user", id], queryFn: () => getUser(id) });
```

Con frameworks como Next.js, a menudo es preferible usar cargadores de datos del lado del servidor.

## Por qué es importante

Obtener datos de forma incorrecta produce errores sutiles —datos obsoletos, fugas de memoria y condiciones de carrera— que solo aparecen con interacciones rápidas. Manejar la limpieza y las respuestas fuera de orden (o delegarlo a una biblioteca) hace que la obtención de datos sea correcta y fiable.