Clena up code : (useEffect ( ) ) :
🔥 কেন cleanup দরকার?
React কম্পোনেন্ট বারবার render হয়, আর তার মানে useEffect() বারবার চলতে পারে।
তুমি যদি effect-এর ভিতরে:
event listener দাও
-
timer/setInterval দাও
-
subscription করো
-
memory বা network ব্যবহার করো
তাহলে পুরনোগুলা বন্দ না করলে তারা memory leak করে, error দিতে পারে, পুরানো state দিয়ে কাজ করে, বা performance কমিয়ে দেয়।
🎯 উদাহরণ ১: setInterval cleanup না করলে
useEffect(() => {
const timer = setInterval(() => {
console.log("Running...");
}, 1000);
return () => {
clearInterval(timer); // ✅ cleanup
};
}, []);
না করলে কী হতো?
প্রতিবার render হওয়ার পর একটা নতুন timer তৈরি হতো, কিন্তু পুরনোটা বন্দ হতো না। এতে অনেকগুলা timer একসাথে চলতে থাকতো — performance খারাপ হতো।
🎯 উদাহরণ ২: event listener
useEffect(() => {
function handleResize() {
console.log("Window resized");
}
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize); // ✅ cleanup
};
}, []);
না করলে কী হতো?
প্রতিবার render এ নতুন event listener যুক্ত হতো, কিন্তু পুরনোটা থেকে যেতো। ফলে একবার resize করলেই বহুবার callback চলত।
🧼 সংক্ষেপে: Cleanup Code কেন দরকার?
| কারণ | ব্যাখ্যা |
|---|---|
| Memory leak আটকাতে | পুরনো resource বন্ধ না করলে memory ফাঁস হয় |
| Performance ঠিক রাখতে | একই কাজ বারবার হলে system স্লো হয় |
| Bug এড়াতে | পুরনো timer বা listener চলতে থাকে |
| Subscription বন্ধ করতে | WebSocket, API listener ইত্যাদি |
✅ ফর্মেট:
useEffect(() => {
// কাজ (side effect)
return () => {
// cleanup (side effect বন্ধ করা)
};
}, [dependency]);