Header Ads

Header ADS

Clena up code : (useEffect ( ) ) :

🔥 কেন cleanup দরকার?

React কম্পোনেন্ট বারবার render হয়, আর তার মানে useEffect() বারবার চলতে পারে।
তুমি যদি effect-এর ভিতরে:

  1. event listener দাও

  2. timer/setInterval দাও

  3. subscription করো

  4. 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]);


Powered by Blogger.