Wie rufen Sie Daten in React ab und vermeiden Race Conditions?

Question

Accepted Answer

Der grundlegende Ansatz verwendet `useEffect`, aber Sie müssen **Cleanup** und **out-of-order responses** handhaben, sonst erhalten Sie veraltete Daten und Warnungen.

```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]);
}
```

## Warum es wichtig ist

Angenommen, `id` ändert sich schnell von `1` zu `2`. Ohne Abbruch sind beide Anfragen in Bearbeitung. Wenn Anfrage `1` langsam ist und **nach** Anfrage `2` abgeschlossen wird, zeigen Sie Benutzerdaten `1` für Benutzer `2` an:

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

Das Abbrechen der vorherigen Anfrage (Cleanup) behebt dies. Ein älteres Boolean-Flag-Muster (`let active = true; ... if (active) setUser(...)`) erreicht dasselbe, indem veraltete Responses ignoriert werden.

## In echten Apps eine Bibliothek verwenden

Manuelles Abrufen wird wiederholt und vermisst Caching/Retries. **React Query (TanStack Query)** oder **SWR** handhaben Loading/Error-States, Caching, Deduplizierung, Background Refetch und Stale-While-Revalidate für Sie:

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

Bei Frameworks wie Next.js sind Server-seitige Data Loader oft vorzuziehen.