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 பெரும்பாலும் விரும்பத்தக்கவை.