Πώς λαμβάνετε δεδομένα στο React και αποφεύγετε race conditions;

Question

IT Interview Practice · Accepted Answer

Η βασική προσέγγιση χρησιμοποιεί `useEffect`, αλλά πρέπει να χειρίσετε **cleanup** και **out-of-order responses**, ή θα πάρετε stale data και προειδοποιήσεις.

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

## Η race condition που αυτό αποτρέπει

Ας υποθέσουμε ότι το `id` αλλάζει γρήγορα από `1` σε `2`. Χωρίς ακύρωση, και τα δύο αιτήματα είναι σε εξέλιξη. Αν το αίτημα `1` είναι αργό και επιλυθεί **μετά** το αίτημα `2`, θα εμφανίσετε δεδομένα χρήστη `1` για χρήστη `2`:

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

Η ακύρωση του προηγούμενου αιτήματος (cleanup) διορθώνει αυτό. Ένα παλαιότερο boolean-flag pattern (`let active = true; ... if (active) setUser(...)`) επιτυγχάνει το ίδιο αγνοώντας stale responses.

## Σε πραγματικές εφαρμογές, χρησιμοποιήστε μια βιβλιοθήκη

Το ручное λήψη γίνεται επαναλαμβανόμενο και χάνει caching/retries. **React Query (TanStack Query)** ή **SWR** χειρίζονται loading/error states, caching, deduplication, background refetch και stale-while-revalidate για εσάς:

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

Με frameworks όπως Next.js, οι server-side data loaders είναι συχνά προτιμητέοι.

Η race condition που αυτό αποτρέπει

Σε πραγματικές εφαρμογές, χρησιμοποιήστε μια βιβλιοθήκη

Σχετικές ερωτήσεις