🔄 Component Lifecycle Overview

Every React component goes through phases from creation to removal. Understanding these phases helps you run code at the right time.

Three Main Phases

1. Mounting (Component Created & Rendered)

Component is being initialized and added to the DOM.

function WelcomeComponent() {
  // Component mounted when it appears on screen
  return <h1>Welcome!</h1>;
}

2. Updating (Component Re-rendered)

Component re-renders when props or state change.

function Counter({ increment }) {
  const [count, setCount] = React.useState(0);

  // Updates when 'increment' prop changes or count state changes
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + increment)}>Increment</button>
    </div>
  );
}

3. Unmounting (Component Removed)

Component is removed from the DOM.

function App() {
  const [showComponent, setShowComponent] = React.useState(true);

  return (
    <div>
      {showComponent && <ComponentToRemove />}
      <button onClick={() => setShowComponent(!showComponent)}>
        {showComponent ? "Remove" : "Show"}
      </button>
    </div>
  );
}

Lifecycle Timeline

┌─────────────────────────────────────────────────────┐
│                   MOUNTING PHASE                     │
│  1. Component created                               │
│  2. State initialized (useState)                    │
│  3. First render                                    │
│  4. Effects with [] run (useEffect)                 │
│  5. Component ready!                                │
└─────────────────────────────────────────────────────┘
                        ↓
┌─────────────────────────────────────────────────────┐
│                   UPDATING PHASE                     │
│  1. Props or state changes                          │
│  2. Re-render happens                               │
│  3. Effects with dependencies run                   │
│  4. Previous effect cleanups run first              │
└─────────────────────────────────────────────────────┘
                        ↓
┌─────────────────────────────────────────────────────┐
│                  UNMOUNTING PHASE                    │
│  1. Component removed from DOM                      │
│  2. Cleanup functions run                           │
│  3. Component destroyed                             │
└─────────────────────────────────────────────────────┘

Lifecycle with Hooks

function LifecycleExample() {
  const [data, setData] = React.useState(null);

  // Mounting: Runs once when component first appears
  React.useEffect(() => {
    console.log("Component mounted!");
    return () => console.log("Component unmounting");
  }, []);

  // Updating: Runs when data dependency changes
  React.useEffect(() => {
    console.log("Data updated:", data);
  }, [data]);

  return <div>{data}</div>;
}

Key Lifecycle Moments

✅ Key Takeaways

• Components have **3 phases**: mounting, updating, unmounting

• **Mounting** happens when component first appears

• **Updating** happens when props or state change

• **Unmounting** happens when component is removed

• Use **useEffect** to run code at lifecycle moments

• Always **clean up** subscriptions and timers