React मध्ये डेटा कसे fetch करायचा आणि race conditions कसे टाळायचे?

Question

Accepted Answer

मूलभूत दृष्टिकोन `useEffect` वापरतो, परंतु तुम्हाला **cleanup** आणि **out-of-order responses** हाताळायला हवेत, अन्यथा तुम्हाला stale data आणि warnings मिळतील.

```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` मध्ये त्वरीत बदलते. cancellation केल्याशिवाय, दोन्ही requests चालू असतात. जर request `1` हा slow असेल आणि request `2` **नंतर** resolve व्हावेल, तर तुम्ही user `2` साठी user `1` चा डेटा दाखवाल:

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

मागील request abort करणे (cleanup) हे ठीक करते. एक जुनी boolean-flag pattern (`let active = true; ... if (active) setUser(...)`) stale responses ignore करून हीच गोष्ट साध्य करते.

## वास्तविक apps मध्ये, library वापरा

Manual fetching पुनरावृत्ती होते आणि 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) });
```

Next.js सारख्या frameworks सह, server-side data loaders बहुतेक वेळा बेहतर असतात.