অবশ্যই, একটু সহজ বাংলায় বুঝিয়ে দিচ্ছি 👉
🎯 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 দিয়ে দেখাবো। 🌼✅