React Component Lifecycle Explained: Birth, Life & Death 🧬

You open Swiggy to order food. 🍕

The moment you tap the app, the home screen appears (born). You scroll, search, and it updates as you type (lives). You close the app — the screen vanishes (dies).

That's exactly how a React component works.

Every component has three stages in life:

🟢 MOUNT     →   component appears on screen
🔄 UPDATE    →   something changes (user types, data loads)
🔴 UNMOUNT   →   component disappears from screen

🟢 Stage 1: Birth (Mount)

When a component first appears on the screen, React runs it for the very first time.

Think of it like Zomato loading your restaurant list — the moment the page opens, it fetches your location, loads the cards, shows the UI. All of that happens once at birth.

In code, this is useEffect with an empty array:

useEffect(() => {
  fetchRestaurants(); // runs ONCE when component appears
}, []);

The [] at the end = "run this only at birth, never again."

Memory trick: Empty [] = Empty womb = Born once 🐣

🔄 Stage 2: Life (Update)

Now you're using the app. You change the city from Mumbai → Delhi. The restaurant list re-renders with new data.

That's an update. React watches for state or prop changes and re-runs the component.

const [city, setCity] = useState("Mumbai");
 
useEffect(() => {
  fetchRestaurants(city); // runs every time 'city' changes
}, [city]);

Every time city changes → effect runs → new restaurants load. 🔄

Memory trick: [city] in the array = "Watch this thing, run when it changes."

❌ Stage 3: Death (Unmount)

You navigate away from the restaurant page. React removes that component from the screen entirely.

But here's the problem — if you had a timer running, or an API call in progress, it keeps running even after the component is gone. Like leaving a Swiggy order open after you've already eaten. 🍛

You need to clean up before dying:

useEffect(() => {
  const timer = setInterval(checkDelivery, 1000);
 
  return () => {
    clearInterval(timer); // runs when component dies
  };
}, []);

That return () => {} inside useEffect is the cleanup function — it runs at death.

The Full Picture

Component created
      ↓
  🟢 MOUNT
  useEffect([]) runs
      ↓
  State/props change?
      ↓
  🔄 UPDATE
  useEffect([dep]) runs
      ↓
  Component removed
      ↓
  ❌ UNMOUNT
  cleanup function runs

Lifecycle vs. Human Life 🧑‍🤝‍🧑

| Human Life | React Component | Code | | -------------- | ------------------- | --------------------------- | | Born | Mounted | useEffect(() => {}, []) | | Growing up | Re-rendering | useState, useEffect | | Daily habits | Watching for change | useEffect([dep]) | | Death | Unmounted | return () => cleanup() |

Class vs. Functional (Quick Look)

If you ever see older React code with class components, the lifecycle looks like this:

class OldSchool extends React.Component {
  componentDidMount()   { /* birth */ }
  componentDidUpdate()  { /* update */ }
  componentWillUnmount(){ /* death */ }
}

In modern React (hooks), all three collapse into just useEffect. One hook to rule them all. 💍

The Full Flow as a Diagram

One-Line Memory Tricks 🧠

• useEffect(() => {}, []) → Runs once at birth
• useEffect(() => {}, [x]) → Runs when x changes
• return () => {} inside effect → Runs at death
• No deps array? → Runs every single render (usually avoid this)

Real Scenario: Swiggy Live Tracker 🛵

Let's say you're building that little "order is 2km away" tracker:

function DeliveryTracker({ orderId }) {
  const [distance, setDistance] = useState(null);
 
  useEffect(() => {
    // 🟢 BIRTH: start tracking
    const interval = setInterval(async () => {
      const d = await fetchDistance(orderId);
      setDistance(d);
    }, 3000);
 
    // ❌ DEATH: stop tracking
    return () => clearInterval(interval);
  }, [orderId]); // 🔄 UPDATE: if order changes, restart
 
  return <p>Delivery is {distance}km away</p>;
}

Three lines of logic. Three lifecycle stages. One clean component. ✨

TL;DR

React components live a full life:

1. Mount → appears on screen, run side effects once
2. Update → state/props changed, re-render, re-run watched effects
3. Unmount → gone from screen, run cleanup

useEffect is your lifecycle manager. Master it, and you've mastered 70% of React.

Now go build something. 🚀