📝 Assignments
AI Studio
Take help If you need
Can We Fetch Data without Useeffect

অবশ্যই, একটু সহজ বাংলায় বুঝিয়ে দিচ্ছি 👉


🎯 useEffect ছাড়া React এ ডেটা ফেচ করা কি সম্ভব?

হ্যাঁ, সম্ভব। কিন্তু কিভাবে ও কখন করছো সেটার উপর নির্ভর করে।


🟢 ১️⃣ ইভেন্ট হ্যান্ডলারে ডেটা ফেচ করা → খুবই ঠিক

👉 যেমন, যখন ইউজার কোনো বাটনে ক্লিক করে, তখন API থেকে ডেটা নিয়ে আসা:

function MyComponent() {
  const [data, setData] = useState(null);
 
  const handleClick = async () => {
    const res = await fetch("https://api.example.com/data");
    const json = await res.json();
    setData(json);
  };
 
  return (
    <div>
      <button onClick={handleClick}>ডেটা আনো</button>
      {data && <pre>{JSON.stringify(data)}</pre>}
    </div>
  );
}

👉 এখানে useEffect লাগছে না, কারণ ইউজার ক্লিক করার পর ডেটা আনা হচ্ছে।


🔴 ২️⃣ Component render এর ভিতরে সরাসরি fetch করা → খারাপ প্র্যাকটিস

function MyComponent() {
  const res = fetch("https://api.example.com/data"); // ভুল
  const json = res.json(); // ভুল
 
  return <div>{JSON.stringify(json)}</div>;
}

👉 এটা করলে অনেক সমস্যা হবে:

  • ইনফিনিট লুপ হতে পারে
  • React চায় render pure থাকুক → মানে এখানে কোনো API call, side effect করা যাবে না।

🟢 ৩️⃣ Server Component (Next.js এর App Router) → এখানে করা যায়

export default async function MyPage() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();
 
  return <pre>{JSON.stringify(data)}</pre>;
}

👉 এখানে useEffect লাগছে না কারণ data server side এ আগেই ফেচ করে তারপর render হচ্ছে।


🟢 ৪️⃣ React Query বা SWR এর মতো লাইব্রেরি use করলে → তারা নিজেরাই effect এর মতো কাজ করে


📝 সংক্ষেপে

হ্যাঁ, useEffect ছাড়াও fetch করা যায়:

  • ইভেন্ট হ্যান্ডলারে (যেমন, বাটন ক্লিক করলে)
  • Server Component এ
  • React Query এর মাধ্যমে

❌ সরাসরি component render এ fetch করা যাবে না (এতে সমস্যা হবে)।


আপনি কবে ডেটা আনতে চান সেটা গুরুত্বপূর্ণ:

কবে ডেটা আনতে চান?কোন পদ্ধতি ভালো?
Component load হলে (প্রথমবার)useEffect / React Query
Button ক্লিক করলেEvent handler এ fetch
Server-side rendering এNext.js server component এ fetch

আপনি চাইলে আমি আপনার নিজের কাজের context অনুযায়ী (যেমন: আপনি Login page এ ডেটা আনতে চান, নাকি একটা Table এ ডেটা দেখাতে চান?) → সেইটা অনুযায়ী সরাসরি কোড দিয়ে বুঝিয়ে দিতে পারি।

আপনি কি বলতে পারেন, কোন type এর কাজের জন্য জানতে চাচ্ছেন? 👉 তাহলে আরো সুন্দর করে Banglay example দিয়ে দেখাবো। 🌼✅


© 2025 React JS Bangla Tutorial.