Fetching Data with Effects

রিয়াক্টে ডাটা fetch করা একটি সাধারণ কাজ, বিশেষত যখন আমরা ইফেক্ট ব্যবহার করি। তবে, ডাটা fetch করার সময় কিছু বিষয় লক্ষ্য রাখতে হবে, বিশেষত ক্লিন-আপ ফাংশন এবং স্টেট আপডেটের বিষয়।

যখন আমরা ডেভেলপমেন্ট মোডে কাজ করি, তখন আমাদের লক্ষ্য রাখতে হবে যে, ইফেক্ট একাধিকবার রান হতে পারে, যার কারণে আমাদের স্টেটে ডাটা একাধিকবার সেট হতে পারে। এই সমস্যাটি এড়াতে, আমাদের ক্লিন-আপ ফাংশনে একটি পতাকা (flag) ব্যবহার করতে হবে যা আমাদের জানাবে কিভাবে এবং কখন স্টেট আপডেট করা উচিত।

ইফেক্টের মাধ্যমে ডাটা ফেচ করা

নিচে একটি উদাহরণ দেওয়া হলো কিভাবে রিয়াক্টে ইফেক্টের মাধ্যমে ডাটা fetch করতে হবে:

const [data, setData] = useState([]);
 
useEffect(() => {
  let ignore = false; // পতাকা সেট করা
 
  async function startFetching() {
    const fetched = await fetch(`apiurl/${id}`);
    const json = await fetched.json();
 
    if (!ignore) {
      // যদি ignore না হয়, তাহলে স্টেটে ডাটা সেট করুন
      setData(json);
    }
  }
 
  startFetching();
 
  return () => {
    ignore = true; // কম্পোনেন্ট আনমাউন্ট হলে ignore সেট করুন
  };
}, [id]);

কোড বিশ্লেষণ

1. স্টেট ডিফাইন করা: const [data, setData] = useState([]);

   • এখানে আমরা data নামক একটি স্টেট তৈরি করেছি যা একটি খালি অ্যারে দিয়ে শুরু হচ্ছে।

2. ইফেক্ট তৈরি করা: useEffect(() => {...}, [id]);

   • useEffect ফাংশনটি একটি কলব্যাক ফাংশন নেয় যা যখনই id পরিবর্তিত হয়, তখন রান হয়।

3. ignore পতাকা: let ignore = false;

   • এই পতাকাটি ব্যবহার করা হয় যাতে আমরা জানতে পারি যে আমরা স্টেটে ডাটা সেট করার চেষ্টা করছি কিনা।

4. ডাটা ফেচিং: startFetching();

   • একটি async ফাংশন তৈরি করা হয়েছে যেটি API থেকে ডাটা ফেচ করে।

5. ডাটা সেট করা: if (!ignore) { setData(json); }

   • যদি ignore ফ্ল্যাগ false থাকে, তাহলে আমরা setData দিয়ে ফেচ করা JSON ডাটা স্টেটে সেট করি।

6. ক্লিন-আপ ফাংশন: return () => { ignore = true; };

   • এই ফাংশনটি কম্পোনেন্টটি আনমাউন্ট হলে কল হয়। এটি ignore পতাকাকে true করে দেয়, যাতে পরবর্তীতে যদি ডাটা ফেচ হয়, তাহলে স্টেটে সেট না হয়।

রিয়াক্টের বাইরের ডাটা ফেচিং পদ্ধতি

যদিও উপরের পদ্ধতি কাজ করে, কিন্তু এটি সর্বদা সেরা পদ্ধতি নয়। রিয়াক্টে ডাটা ফেচিংয়ের জন্য কিছু অন্যান্য জনপ্রিয় লাইব্রেরি রয়েছে, যেমন:

• React Query: এটি ডাটা ফেচিং, ক্যাশিং এবং আপডেট করার জন্য একটি শক্তিশালী টুল, যা অ্যাপ্লিকেশনকে সহজ করে তোলে।

• useSWR: এটি একটি হুক যা ডাটা ফেচিং এবং রিফ্রেশিংয়ের জন্য ব্যবহৃত হয়। এটি ক্যাশিংয়ের মাধ্যমে ডাটা দ্রুত লোড করে।

• rtkQuery: এটি Redux Toolkit-এর একটি অংশ এবং ডাটা ফেচিং এবং ক্যাশিংয়ের জন্য ব্যবহার করা হয়। এটি ডেভেলপমেন্ট প্রক্রিয়াকে দ্রুত ও সহজ করে তোলে।

• বিল্ট-ইন ফ্রেমওয়ার্ক: যদি আপনি কোনো ফ্রেমওয়ার্ক ব্যবহার করেন, তবে সেখানে বিল্ট-ইন ডাটা ফেচিং মেকানিজম থাকতে পারে, যা রিয়াক্টের স্ট্যান্ডার্ড fetch পদ্ধতির থেকে অনেক বেশি কার্যকরী হতে পারে।

উপসংহার

রিয়াক্টে ডাটা fetch করার সময় আমাদের অবশ্যই ক্লিন-আপ ফাংশন ব্যবহার করা উচিত এবং স্টেট আপডেটের বিষয়ে সচেতন থাকতে হবে। যদিও useEffect দিয়ে ডাটা ফেচ করা যায়, কিন্তু আরও উন্নত এবং কার্যকরী পদ্ধতি ব্যবহারের জন্য অন্যান্য লাইব্রেরি ব্যবহার করাই বুদ্ধিমানের কাজ। এটি আমাদের কোডকে পরিষ্কার, রক্ষণাবেক্ষণযোগ্য এবং দক্ষ রাখতে সহায়তা করে।