Class component life cycle

 React-এর Class Component Lifecycle হল সেই ধাপগুলো যেগুলোর মধ্য দিয়ে একটি class component যায় — component তৈরি হওয়া থেকে শুরু করে destroy হওয়া পর্যন্ত। এই লাইফসাইকেলটি মূলত ৩টি বড় ভাগে ভাগ করা হয়:

---

🧠 React Class Component Lifecycle (বাংলায় ব্যাখ্যা)

🔵 1. Mounting Phase (Component তৈরি ও DOM-এ যুক্ত হওয়া)

Mounting হচ্ছে যখন component প্রথমবার তৈরি হয় এবং DOM-এ যুক্ত হয়।

🧩 Methods:

1. constructor()

2. static getDerivedStateFromProps()

3. render()

4. componentDidMount()

বিস্তারিত:

Method	কাজ কি করে
constructor()	Initial state setup এবং props-access করার জন্য ব্যবহৃত হয়।
static getDerivedStateFromProps(props, state)	props থেকে state update করতে চাইলে এটি ব্যবহার করা হয়। এটি static হয় বলে this ব্যবহার করা যায় না।
render()	JSX return করে, DOM তৈরি হয়।
componentDidMount()	DOM তৈরির পর একবারই call হয়। API call বা side effects করার জন্য পারফেক্ট জায়গা।

---

🟠 2. Updating Phase (Component rerender হয় props/state পরিবর্তনের জন্য)

Component rerender হয় যখন:

1. props বদলায়

2. state বদলায়

3. forceUpdate() হয়

🧩 Methods:

1. static getDerivedStateFromProps()

2. shouldComponentUpdate()

3. render()

4. getSnapshotBeforeUpdate()

5. componentDidUpdate()

বিস্তারিত:

Method	কাজ কি করে
shouldComponentUpdate(nextProps, nextState)	component update হবে কি না, তা return করে true/false। Optimization এর জন্য ব্যবহার হয়।
getSnapshotBeforeUpdate(prevProps, prevState)	DOM update হওয়ার আগে কিছু তথ্য (যেমন scroll position) ক্যাপচার করার জন্য। return মান componentDidUpdate() এ পাওয়া যায়।
componentDidUpdate(prevProps, prevState, snapshot)	DOM update হয়ে গেলে এই method call হয়। API call করতে পারো এখানে।

---

🔴 3. Unmounting Phase (Component DOM থেকে সরিয়ে ফেলা)

Component যখন DOM থেকে সরানো হয় তখন:

🧩 Method:

1. componentWillUnmount()

বিস্তারিত:

Method	কাজ কি করে
componentWillUnmount()	Cleanup করার জন্য (যেমন timer clear, subscription বন্ধ করা)।

---

🟣 4. Error Handling Phase (Component-এ কোনো error ধরা পড়লে)

React 16+ থেকে Error Boundary support এসেছে।

🧩 Methods:

1. static getDerivedStateFromError()

2. componentDidCatch()

Method	কাজ কি করে
getDerivedStateFromError()	Error ঘটলে fallback UI দেখানোর জন্য state update করতে ব্যবহার হয়।
componentDidCatch()	Error log করার জন্য ব্যবহৃত হয় (যেমন Sentry-তে পাঠানো)।

---

🔁 Lifecycle Flow Chart (সারাংশ):

MOUNTING:
    constructor() →
    getDerivedStateFromProps() →
    render() →
    componentDidMount()

UPDATING:
    getDerivedStateFromProps() →
    shouldComponentUpdate() →
    render() →
    getSnapshotBeforeUpdate() →
    componentDidUpdate()

UNMOUNTING:
    componentWillUnmount()

ERROR:
    getDerivedStateFromError() →
    componentDidCatch()

---

🧪 উদাহরণ সহ ব্যবহার:

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    console.log("Constructor");
  }

  static getDerivedStateFromProps(props, state) {
    console.log("getDerivedStateFromProps");
    return null;
  }

  componentDidMount() {
    console.log("componentDidMount");
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate");
    return true;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("getSnapshotBeforeUpdate");
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("componentDidUpdate");
  }

  componentWillUnmount() {
    console.log("componentWillUnmount");
  }

  render() {
    console.log("Render");
    return (
      <div>
        <h2>Count: {this.state.count}</h2>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

export default MyComponent;

---

✅ উপসংহার

ফেজ	কবে হয়	কোন কাজের জন্য
Mounting	প্রথমবার component তৈরি হলে	Initial API call, state setup
Updating	state/props পরিবর্তন হলে	রি-রেন্ডার, DOM update
Unmounting	component মুছে ফেলা হলে	Cleanup করার জন্য
Error Handling	কোনো child component-এ error হলে	fallback UI ও error log করার জন্য

---