React मा डेटा कसरी fetch गर्ने र race conditions कसरी अनुगमन गर्ने?

Question

Accepted Answer

बुनियादी दृष्टिकोण `useEffect` प्रयोग गर्छ, तर तपाईंले **cleanup** र **out-of-order responses** सँग सम्भाल्नु पर्छ, अन्यथा तपाईंले stale डेटा र चेतावनी पाउनुहुनेछ।

```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 flight मा छन्। यदि request `1` ढिलो छ र 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 प्याटर्न (`let active = true; ... if (active) setUser(...)`) stale responses लाई बेवास्ता गरेर एकै गरी काम गर्छ।

## वास्तविक अनुप्रयोगहरूमा, एक लाइब्रेरी प्रयोग गर्नुहोस्

म्यानुएल 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 अक्सर प्राधान्यदेय हुन्छन्।