React'te veri nasıl alırsınız ve race conditions'ı nasıl önlersiniz?

Question

Accepted Answer

Temel yaklaşım `useEffect` kullanır, ancak **cleanup** ve **sıradışı gelen yanıtları** işlemek zorundasınız, yoksa eski veri ve uyarılar alırsınız.

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

## Neden önemli

`id` hızlı bir şekilde `1`'den `2`'ye değişirse söyleyin. İptal olmadan her iki istek de uçuştadır. İstek `1` yavaş ise ve istek `2`'den **sonra** çözülürse, kullanıcı `1`'in verilerini kullanıcı `2` için gösterirsiniz:

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

Önceki isteği (cleanup) iptal etmek bunu düzeltir. Eski bir boolean-flag deseni (`let active = true; ... if (active) setUser(...)`) eski yanıtları yok sayarak aynı şeyi başarır.

## Gerçek uygulamalarda bir kütüphane kullanın

Manuel getirme tekrarlayıcı ve caching/retries'i kaçırır. **React Query (TanStack Query)** veya **SWR** yükleme/hata durumlarını, önbelleğe almayı, yinelenme giderimini, arka plan yenilemeyi ve stale-while-revalidate'i sizin için işler:

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

Next.js gibi frameworks ile sunucu tarafı veri yükleyicileri genellikle tercih edilir.