Top 5 Mistakes Developers Make with React useEffect

React useEffect হুক: ডেভেলপাররা যেসব ভুল সবচেয়ে বেশি করে।

React এর useEffect হুকটি অনেক পাওয়ারফুল, কিন্তু ভুলভাবে ব্যবহার করলে performance issue, memory leak, বা infinite loop-এর মতো জটিল সমস্যা দেখা দিতে পারে। এই ব্লগে আমরা বিস্তারিতভাবে আলোচনা করবো useEffect ব্যবহারে ডেভেলপাররা যেসব কমন ভুল করেন এবং কীভাবে সেগুলো এড়ানো যায়।

1. Dependency Array ভুলভাবে ব্যবহার করা

সমস্যা:

• Dependency array না দিলে প্রতিটি render এ useEffect চলবে → Performance কমে যাবে।
• Dependency ভুলভাবে সেট করলে (stale closure) → outdated ডাটা ব্যবহার হবে

ভুল উদাহরণ:

useEffect(() => {
fetchData(); // ❌ 'fetchData' কে dependency হিসেবে add করা হয়নি
}, []);

সঠিক সমাধান:

useEffect(() => {
fetchData();
}, [fetchData]); 

2. Side Effects ক্লিনআপ না করা (Memory Leak)

সমস্যা:

• Event listeners, intervals, subscriptions ক্লিনআপ না করলে memory leak হতে পারে।
• component unmount হওয়ার পরেও ব্যাকগ্রাউন্ডে কোড চলতে থাকবে যার কারণে অ্যাপ স্লো হবে। এমনকি Stale state সমস্যা দেখা দিতে পারে।

ভুল উদাহরণ:

useEffect(() => {
const timer = setInterval(() => {
console.log("Running..."); // ❌ ক্লিনআপ না করলে interval বন্ধ হবে না
}, 1000);
}, []);

সঠিক সমাধান:

useEffect(() => {
const timer = setInterval(() => { ... }, 1000);
return () => clearInterval(timer); 
}, []);

3. স্টেট আপডেটের কারণে Infinite Re-renders

সমস্যা:

• useEffect-এর ভিতরে স্টেট আপডেট করলে কম্পোনেন্ট বারবার re-render হয়ে infinite loop তৈরি হয়।

ভুল উদাহরণ:

useEffect(() => {
setCount(count + 1); // ❌ 'count' আপডেট হলে useEffect আবার চালু হবে
}, [count]);

সঠিক সমাধান:

কন্ডিশন ব্যবহার করুন:

useEffect(() => {
if (count < 10) setCount(count + 1); 
}, [count]);

Functional updates ব্যবহার করুন:
setCount(prev => prev + 1); 

4. Derived State-এর জন্য useEffect ব্যবহার করা

সমস্যা:

• Derived state-এ useEffect ব্যবহার unnecessary রেন্ডার বাড়ায় এবং কোড maintenance কঠিন হয়ে পড়ে।

ভুল উদাহরণ:

const [fullName, setFullName] = useState("");
useEffect(() => {
setFullName(`${firstName} ${lastName}`); // ❌ অপ্রয়োজনীয় useEffect
}, [firstName, lastName]);

সঠিক সমাধান:

const fullName = `${firstName} ${lastName}`;

5. Synchronization এর জন্য এক useEffect-এ সব রাখা

সমস্যা:

• একাধিক unrelated task একই effect-এ রাখলে debug কঠিন হয়।
• Race condition তৈরি হয়।

ভুল উদাহরণ:

useEffect(() => {
fetchUser();
updateAnalytics(); // ❌ মিক্সড কনসার্ন
}, [userId]);

সঠিক সমাধান:

// আলাদা আলাদা ইফেক্ট ব্যবহার করুন
useEffect(() => { fetchUser(); }, [userId]);
useEffect(() => { updateAnalytics(); }, [userId]);

বোনাস: অন্যান্য কমন ইস্যু

Async/Await ভুলভাবে ব্যবহার:

useEffect(async () => { … }, []); // ❌ কখনই এভাবে ব্যবহার করবেন না!

সঠিক সমাধান:

useEffect(() => {
const fetchData = async () => { ... };
fetchData();
}, []);

অবজেক্ট/অ্যারে ডিপেন্ডেন্সি:

Object টাইপের ডেটা ডিপেন্ডেন্সি অ্যারেতে ব্যবহার না করে primitive data type ব্যবহার করুন। এতে re-render কমে যাবে।

useEffect(() => { ... }, [user]); // ❌ 'user' প্রতিটি রেন্ডারে চেঞ্জ হয়

সঠিক সমাধান:

useEffect(() => { ... }, [user.id]); 

এখানে শুধুমাত্র user id চেঞ্জ হইলে useEffect রেন্ডার হবে।

উপসংহার

React useEffect হুক সঠিকভাবে ব্যবহার করতে পারলে অ্যাপের performance এবং behavior দুটোই more efficient হয়। এই ব্লগে আলোচিত ভুলগুলো এড়িয়ে চললে আপনি অনেক ভালোভাবে useEffect manage করতে পারবেন।

Technology এর সকল আপডেট সবার আগে বিস্তারিত পেতে চেক করুন