React.js Component Lifecycle (Functional Equivalent) বিস্তারিত ব্যাখ্যা

React.js এর পূর্বের ভার্সনে ক্লাস কম্পোনেন্ট ব্যবহার করা হত, যেখানে componentDidMount, componentDidUpdate, componentWillUnmount এর মতো লাইফসাইকেল মেথড ছিল। কিন্তু বর্তমান React অ্যাপ্লিকেশনে আমরা প্রধানত Functional Component + Hooks ব্যবহার করি।

ফাংশনাল কম্পোনেন্টে লাইফসাইকেল মেথড নেই — কিন্তু useEffect() Hook ব্যবহার করে আমরা একই কাজ করতে পারি। তাই এটাকেই বলা হয়ঃ Functional Component Lifecycle Equivalent.

🔵 React Component Lifecycle কী?

একটি React কম্পোনেন্ট তৈরি হওয়া থেকে শুরু করে DOM থেকে অদৃশ্য হওয়া পর্যন্ত যেসব ধাপ মাধ্যমে যায়, সেই ধাপগুলোকেই Component Lifecycle বলা হয়।

Component Lifecycle তিন ভাগে ভাগ করা হয়ঃ

• ১. Mounting — কম্পোনেন্ট প্রথমবার DOM এ যুক্ত হওয়া
• ২. Updating — কম্পোনেন্টের state বা props পরিবর্তন হলে আপডেট হওয়া
• ৩. Unmounting — কম্পোনেন্ট DOM থেকে সরিয়ে ফেলা

Functional Component এ এই ৩টি লাইফসাইকেল useEffect() ব্যবহার করে নিয়ন্ত্রণ করা হয়।

🔵 Functional Component Lifecycle Equivalent (useEffect)

useEffect হলো React এর সবচেয়ে গুরুত্বপূর্ণ Hook যা তিন ধরনের lifecycle behavior handle করতে পারে।

useEffect(() => {
  // effect code
  return () => {
    // cleanup code
  };
}, [dependencies]);

🟢 ১. Mounting Phase (componentDidMount Equivalent)

যখন কম্পোনেন্ট প্রথমবার লোড হয় (render হয়), তখন যে কোড চালানো প্রয়োজন তা useEffect এর খালি dependency array ব্যবহার করে করা হয়।

useEffect(() => {
  console.log("Component Mounted");
}, []);

➡️ এই ফেজে সাধারণত যেসব কাজ করা হয়:

• API Call
• Event Listener যোগ করা
• Initial Data Load

🟡 ২. Updating Phase (componentDidUpdate Equivalent)

যখন কম্পোনেন্টের state বা props পরিবর্তন হয় তখন useEffect আবার রান হয় — যদি dependency array-তে সেই state বা prop এর নাম দেওয়া থাকে।

useEffect(() => {
  console.log("Component Updated");
}, [count]);

➡️ এই ফেজে কাজগুলো:

• State বা Props আপডেট ধরার কাজ
• Dependent Data Reload
• DOM Change Handle

🔴 ৩. Unmounting Phase (componentWillUnmount Equivalent)

কম্পোনেন্ট যখন স্ক্রিন থেকে অদৃশ্য (remove) হয়ে যায় তখন cleanup ফাংশন রান হয়।

useEffect(() => {
  console.log("Component Mounted");

  return () => {
    console.log("Component Unmounted");
  };
}, []);

➡️ Cleanup কোথায় প্রয়োজন?

• Event Listener remove করা
• Interval/Timeout clear করা
• WebSocket disconnect করা
• API request cancel করা

🔵 useEffect দিয়ে তিন ধরনের Lifecycle দেখানো

useEffect(() => {
  console.log("Mounted + Updated");

  return () => {
    console.log("Cleanup");
  };
}, [state]);

🟣 Full Example: Component Lifecycle Equivalent

import { useState, useEffect } from "react";

function LifecycleExample() {
  const [count, setCount] = useState(0);

  // Mounting
  useEffect(() => {
    console.log("Component Mounted");

    // Unmounting
    return () => {
      console.log("Component Unmounted");
    };
  }, []);

  // Updating
  useEffect(() => {
    console.log("Component Updated: Count Changed");
  }, [count]);

  return (
    <div>
      <h2>Lifecycle Example</h2>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default LifecycleExample;

✅ সারসংক্ষেপ

• React Functional Component এ lifecycle handle করা হয় useEffect দিয়ে।
• Mount, Update এবং Unmount — এই তিনটি কাজই useEffect করতে পারে।
• Cleanup function Unmounting phase এর কাজ করে।
• Dependency Array ঠিকভাবে ব্যবহার করাই সবচেয়ে গুরুত্বপূর্ণ।

🎯 এই টপিক শিখলে আপনি যা করতে পারবেন

• React অ্যাপের বিভিন্ন পর্যায়ের আচরণ বুঝতে পারবেন
• API calling timing নিয়ন্ত্রণ করতে পারবেন
• Side effects সঠিকভাবে manage করতে পারবেন
• Advanced React concept যেমন Custom Hooks তৈরি করতে পারবেন