React-లో డేటా ఎలా పొందుతారు మరియు race conditions-ను ఎలా నివారిస్తారు?

Question

Accepted Answer

ప్రాథమిక విధానం `useEffect`-ను ఉపయోగిస్తుంది, కానీ మీరు **cleanup** మరియు **క్రమానికి రాని ప్రతిస్పందనలను** నిర్వహించాలి, లేదా మీరు పాతైన డేటా మరియు హెచ్చరికలను పొందుతారు.

```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`కు **తర్వాత** పరిష్కరిస్తే, మీరు వినియోగదారు `1`ගా డేటాను వినియోగదారు `2`కు ప్రదర్శించారు:

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

మునుపటి అభ్యర్థనను (cleanup) రద్దు చేయడం ఇది సరిచేస్తుంది. పాతైన boolean-flag నమూనా (`let active = true; ... if (active) setUser(...)`) పాతైన ప్రతిస్పందనలను విస్మరించడం ద్వారా ఇదే లక్ష్యను సాధిస్తుంది.

## నిజమైన అనువర్తనాల్లో, లైబ్రరీని ఉపయోగించండి

కైలాసంగా పొందడం పునరుచ్చరణీయమైనది మరియు caching/retries-ను కోల్పోతుంది. **React Query (TanStack Query)** లేదా **SWR** loading/error స్థితులు, 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 తరచుగా మంచివి.