# ⚛️ React Component Life-Cycle: A Complete Guide

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:

| Method | Purpose |
| --- | --- |
| `constructor()` | Initialize state & bind methods |
| `static getDerivedStateFromProps()` | Sync state from props |
| `render()` | Build UI |
| `componentDidMount()` | Run side effects (API calls, subscriptions) |

### Example (Class Component)

```apache
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:

| Method | Purpose |
| --- | --- |
| `static getDerivedStateFromProps()` | Sync state with props on change |
| `shouldComponentUpdate()` | Decide if re-render is needed |
| `render()` | Re-render UI |
| `componentDidUpdate()` | Run code after DOM update |

### Example

```apache
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:

| Method | Purpose |
| --- | --- |
| `componentWillUnmount()` | Cleanup (remove timers, unsubscribe events) |

### Example

```apache
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:

| What you want to do | Hook |
| --- | --- |
| Run once on mount | `useEffect(() => {}, [])` |
| Run on state/prop update | `useEffect(() => {}, [state])` |
| Run on unmount | return cleanup function |

### Example

```apache
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