React Lifecycle Methods Bollywood Style mein ⚛🔥

---

“React components are like Bollywood heroes — they have a dramatic entry*, an intense **journey*, and a tragic (or happy?) *exit**.” 🎬*

But what most devs don’t know is that React doesn’t just throw components on screen randomly. There’s a systematic ritual, like a shaadi function — with phases, order, and a lot of drama!

So buckle up, kyunki aaj hum seekhne wale hain:

---

🎭 The 3 Phases of a React Component

1. Mounting — Component takes birth and enters DOM 👶

2. Updating — Component changes due to props/state updates 🔁

3. Unmounting — Component gets removed from the DOM (RIP) ⚰️

Optional:

Error Phase — Jab kuch toot jaaye 😵 (Error boundaries handle this)

Let’s break down each phase in order, with all lifecycle methods, funny examples, and modern functional equivalents with Hooks.

---

🌱 1. MOUNTING PHASE — “Swagat nahi karoge hamara?” 🎉

This is when the component is being created and inserted into the DOM for the first time.

🧓 Class Component: Lifecycle Methods (in order)

constructor() Initial setup (state, bindings).

static getDerivedStateFromProps() (Rarely used and please use this less this method is prone to errors 🚩) Sync state with props.

render() Returns the JSX 😃 we all know this.

componentDidMount() Component is on screen. Perfect for API calls.

🎬 Example:

class Welcome extends React.Component {

  constructor(props) {
    super(props);
    this.state = { message: 'Namaste Duniya' };
    console.log('👷 constructor');
  }

  static getDerivedStateFromProps(props, state) {
      console.log('📦 getDerivedStateFromProps');
      return null; // usually no changes
    }

    componentDidMount() {
      console.log('🎉 componentDidMount');
      // Fetch data, set up listeners
    }
    render() {
      console.log('🖼 render');
      return <h1>{this.state.message}</h1>;
    }
  }

🪄 Functional Equivalent:

function Welcome() {
  const [message, setMessage] = useState('Namaste Duniya');

  useEffect(() => {
      console.log('🎉 componentDidMount equivalent');
      // Fetch data here
      return () => {
        console.log('💀 componentWillUnmount equivalent');
      };
    }, []); // empty deps = run only on mount
    return <h1>{message}</h1>;
  }

“When useEffect(..., []) runs — a new component is born!”

---

🔁 2. UPDATING PHASE — “Zindagi badal gayi, par component zinda hai!” 😆

This phase is triggered every time props or state changes.

🧓 Class Component: Lifecycle Methods (in order)

All these will be called in synchronously :)

static getDerivedStateFromProps() Again gets called before every render (rarely used).

shouldComponentUpdate() Decide whether to re-render. If we return ‘false’ then render() method will not be executed.

render() UI re-renders.

getSnapshotBeforeUpdate() Capture info (like scroll position of user) before DOM updates.

componentDidUpdate() Do side effects after DOM update.

🎬 Example:

class Counter extends React.Component {
  constructor() {
    super();
    this.state = { count: 0 };
  }

  static getDerivedStateFromProps() {
    console.log('📦 getDerivedStateFromProps (update)');
    return null;
  }

  shouldComponentUpdate() {
    console.log('❓ shouldComponentUpdate');
    return true;
  }

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

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

  render() {
    console.log('🖼 render');
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          ➕
        </button>
      </div>
    );
  }
}

🪄 Functional Equivalent:

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

  useEffect(() => {
    console.log('🔄 componentDidUpdate equivalent for `count`');
  }, [count]); // runs when count changes

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>➕</button>
    </div>
  );
}

❗ getSnapshotBeforeUpdate() and shouldComponentUpdate() don’t have direct hook equivalents — but:

• You can optimize re-renders using React.memo

• Use useRef() to track snapshots manually

I haven’t used getSnapshotBeforeUpdate() till now in my react journey.

📸 MEME TIME :)

Shahrukh Khan shouting from a train "Every time state changes — useEffect be like: 'Palat... palat... update ho gaya' 🔁"

---

💀 3. UNMOUNTING PHASE — “Alvida component…” 💔

This is when the component is removed from DOM.

🧓 Class Component

Method Description componentWillUnmount() Clean up timers, subscriptions, listeners, etc.

componentWillUnmount() {
  console.log('💣 Cleaning up before component dies');
}

🪄 Functional Equivalent

useEffect(() => {
  // setup code...
return () => {
    console.log('💣 useEffect cleanup on unmount');
  };
}, []);

📸 MEME TIME :)

"componentWillUnmount() called. The end.

---

⚠️ BONUS PHASE: ERROR HANDLING 😵

When things break, React lets you catch errors gracefully.

🧓 Class Component Only

componentDidCatch(error, info) {
  console.log('🚨 Caught error:', error);
}

static getDerivedStateFromError(error) {
  return { hasError: true };
}

✅ Used in Error Boundaries
❌ No Hook alternative (yet).

---

🎯 Final Thoughts

React Lifecycle = “Entry ➡️ Update ➡️ Exit”
Hooks make this cleaner, but not everything has a direct equivalent.
Don’t just memorize — understand when & why each method runs. 😎

---

🤓 Your Homework

1. Replace all your old class components with functional ones.

2. Add a console.log() in useEffect and track the mount/update/unmount flow.

3. Share a React meme in the comments 💬