React components don’t just appear on the screen — they go through a life cycle. Understanding this flow helps you manage data, API calls, performance, cleanup, and more.

Whether you're using class components or functional components with hooks, the life cycle remains the same, but the way you implement it differs.

This guide explains the React Component Life-Cycle in a simple, beginner-friendly format.

---

🔄 What Is Component Life-Cycle?

Every React component passes through three major phases:

1️⃣ Mounting — Component is created and inserted into the DOM
2️⃣ Updating — Component re-renders when state/props change
3️⃣ Unmounting — Component is removed from the DOM

Let’s break each phase with both Class Components and Functional Components examples.

---

🟦 1. Mounting Phase

When does mounting happen?

✔ Component is created
✔ Initial state is set
✔ UI is rendered to DOM

Class Component Life-cycle Methods:

Example (Class Component)

class App extends React.Component {
  constructor() {
    super();
    console.log("Constructor - Component Created");
  }

  componentDidMount() {
    console.log("Component Mounted - Perfect for API calls!");
  }

  render() {
    return <h1>Hello React</h1>;
  }
}

---

🟩 2. Updating Phase

When does updating occur?

Whenever state or props change, React re-renders the component.

Class Component Life-cycle Methods:

Example

class Counter extends React.Component {
  state = { count: 0 };

  componentDidUpdate() {
    console.log("Component Updated!");
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return <button onClick={this.increment}>{this.state.count}</button>;
  }
}

---

🟥 3. Unmounting Phase

When does unmounting happen?

When a component is removed from the DOM.

Class Component Method:

Example

componentWillUnmount() {
  console.log("Component Removed - Cleanup here!");
}

---

⚡ React Functional Components Life-cycle (Using Hooks)

Functional components do not have explicit lifecycle methods.
Instead, they use useEffect(), which handles all phases.

useEffect() Breakdown:

Example

import React, { useEffect, useState } from "react";

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

  // Mount + Update
  useEffect(() => {
    console.log("Component Mounted or Updated");
  });

  // Mount only
  useEffect(() => {
    console.log("Runs only once on mount (API calls)");
  }, []);

  // Unmount cleanup
  useEffect(() => {
    return () => {
      console.log("Component Unmounted - cleanup");
    };
  }, []);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

---

🔥 Life-cycle Summary

✅ Mounting

• constructor

• render

• componentDidMount

• (useEffect with empty dependency)

✅ Updating

• render

• componentDidUpdate

• (useEffect with dependency list)

✅ Unmounting

• componentWillUnmount

• (cleanup in useEffect)

---

🎯 Final Thoughts

Mastering the React Component Lifecycle helps you:
✔ Make API calls at the right time
✔ Optimize performance
✔ Manage subscriptions & event listeners
✔ Avoid memory leaks
✔ Understand how React works under the hood