आप React में डेटा को कैसे प्राप्त करते हैं और रेस कंडीशन से कैसे बचते हैं?

Question

Accepted Answer

मूल दृष्टिकोण `useEffect` का उपयोग करता है, लेकिन आपको **सफाई** और **क्रम से बाहर प्रतिक्रियाओं** को संभालना होगा, अन्यथा आप पुरानी डेटा और चेतावनियां प्राप्त करेंगे।

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

## वह रेस कंडीशन जिसे यह रोकता है

मान लीजिए `id` `1` से `2` तक तेजी से बदल जाता है। रद्दीकरण के बिना, दोनों अनुरोध उड़ान में हैं। यदि अनुरोध `1` धीमा है और अनुरोध `2` के **बाद** हल होता है, तो आप उपयोगकर्ता `2` के लिए उपयोगकर्ता `1` की डेटा प्रदर्शित करेंगे:

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

पिछले अनुरोध को रद्द करना (सफाई) इस समस्या को ठीक करता है। एक पुराने बूलियन-फ्लैग पैटर्न (`let active = true; ... if (active) setUser(...)`) पुरानी प्रतिक्रियाओं को अनदेखा करके समान कार्य करते हैं।

## वास्तविक ऐप्स में, एक लाइब्रेरी का उपयोग करें

मैनुअल प्राप्ति दोहराव वाली हो जाती है और कैशिंग/पुनः प्रयास को मिस कर देती है। **React Query (TanStack Query)** या **SWR** आपके लिए लोडिंग/त्रुटि स्थिति, कैशिंग, डीडुप्लीकेशन, बैकग्राउंड रिफ्रेश, और स्टेल-व्हाइल-रीवैलिडेट को संभालते हैं:

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

Next.js जैसे फ्रेमवर्क के साथ, सर्वर-साइड डेटा लोडर्स अक्सर बेहतर होते हैं।