আপনি 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** লোডিং/ত্রুটি অবস্থা, ক্যাশিং, ডিডুপ্লিকেশন, ব্যাকগ্রাউন্ড রিফেচ এবং stale-while-revalidate আপনার জন্য পরিচালনা করে:

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

Next.js-এর মতো ফ্রেমওয়ার্কগুলির সাথে, সার্ভার-সাইড ডেটা লোডাররা প্রায়শই পছন্দনীয়।