Hur hämtar du data i React och undviker race conditions?

Question

Accepted Answer

Det grundläggande sättet använder `useEffect`, men du måste hantera **cleanup** och **svar som kommer i fel ordning**, eller så får du inaktuell data och varningar.

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

## Varför det är viktigt

Säg att `id` ändras snabbt från `1` till `2`. Utan avbrytning är båda förfrågningarna aktiva. Om förfrågan `1` är långsam och löses **efter** förfrågan `2`, skulle du visa data för användare `1` för användare `2`:

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

Att avbryta den tidigare förfrågan (cleanup) löser detta. Ett äldre boolean-flag-mönster (`let active = true; ... if (active) setUser(...)`) uppnår samma sak genom att ignorera inaktuella svar.

## I riktiga appar, använd ett bibliotek

Manuell hämtning blir repetitiv och missar caching/omförsök. **React Query (TanStack Query)** eller **SWR** hanterar loading/error-tillstånd, caching, deduplicering, bakgrundsuppdatering och stale-while-revalidate åt dig:

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

Med ramverk som Next.js är data loaders på serversidan ofta att föredra.