Lesson 3 — React Component Lifecycle | Modern Hooks View

🧭 Introduction

Before React Hooks, developers had to rely on class components to manage lifecycle events like:

• Component mounting
• Updating
• Unmounting

With hooks, React didn’t remove the lifecycle — it reimagined it.

Many developers today:

• Use useEffect without understanding lifecycle phases
• Mix multiple responsibilities in one effect
• Create memory leaks unknowingly

In this lesson, you’ll learn the React component lifecycle from a modern, hooks-based perspective — the way React is actually used today.

🎯 What You’ll Learn in This Lesson

By the end of this lesson, you will understand:

• The three main lifecycle phases in React
• How hooks map to lifecycle behavior
• When useEffect runs and why
• Cleanup logic and unmounting
• Common lifecycle mistakes

🔄 The Three Phases of React Component Lifecycle

Every React component goes through three core phases:

1️⃣ Mounting – component is added to the UI
2️⃣ Updating – component re-renders due to changes
3️⃣ Unmounting – component is removed from the UI

Hooks give us full control over these phases.

🟢 Phase 1 — Mounting (Component Appears)

Mounting happens when:

• A component renders for the first time
• React inserts it into the DOM

🔹 Hook Equivalent

useEffect(() => {
  console.log("Component mounted");
}, []);

🧠 Why the Empty Dependency Array?

• [] tells React: run this effect only once
• Equivalent to componentDidMount

🔍 Common Use Cases for Mounting

• Fetching initial data
• Setting up subscriptions
• Adding event listeners
• Initializing third-party libraries

🔵 Phase 2 — Updating (Re-rendering)

Updating happens when:

• State changes
• Props change
• Parent re-renders

🔹 Hook Equivalent

useEffect(() => {
  console.log("Count changed");
}, [count]);

This effect runs:

• After first render
• Whenever count changes

🧠 Important Mental Model

Every render is fresh.
React does not “patch” your component function.

Your component function runs from top to bottom on every render.

🔴 Phase 3 — Unmounting (Cleanup)

Unmounting happens when:

• Component is removed from UI
• Route changes
• Conditional rendering hides the component

🔹 Hook Equivalent

useEffect(() => {
  return () => {
    console.log("Component unmounted");
  };
}, []);

The cleanup function runs:

• Before component unmounts
• Or before effect re-runs

🧹 Why Cleanup Is Critical

Without cleanup:

• Memory leaks occur
• Event listeners pile up
• Timers continue running
• App performance degrades

🔍 Example: Event Listener Leak

useEffect(() => {
  window.addEventListener("resize", handleResize);
}, []);

❌ Missing cleanup
✅ Correct version:

useEffect(() => {
  window.addEventListener("resize", handleResize);
  return () => window.removeEventListener("resize", handleResize);
}, []);

⚠ Understanding useEffect Execution Order

React follows this sequence:

1️⃣ Render component
2️⃣ Paint UI to screen
3️⃣ Run useEffect
4️⃣ Cleanup old effects (before next effect run)

👉 Effects never block UI rendering.

❓ What About componentDidUpdate?

In hooks, componentDidUpdate is replaced by:

useEffect(() => {
  // logic
}, [dependency]);

React decides when to run based on dependency changes.

🚨 Common Lifecycle Mistakes (Very Important)

❌ Mistake 1: Putting Everything in One useEffect

Leads to:

• Hard-to-debug code
• Unclear lifecycle logic

✅ Solution: Use multiple effects with clear responsibilities.

❌ Mistake 2: Missing Dependencies

useEffect(() => {
  console.log(count);
}, []);

❌ Bug-prone
✅ React expects dependencies to be declared.

❌ Mistake 3: Overusing useEffect

Not everything belongs in useEffect.

Example:

const doubled = count * 2; // No effect needed

🧠 Lifecycle & Rendering Connection

Lifecycle hooks:

• Do NOT control rendering
• Run after rendering

Rendering is triggered by:

• State change
• Props change

Lifecycle effects respond to rendering.

🔍 Visual Lifecycle Summary (Hooks View)

🎯 Best Practices (Advanced Level)

✅ Keep effects small and focused
✅ Always clean up subscriptions
✅ Avoid unnecessary effects
✅ Think in terms of render → effect → cleanup

❓ FAQs — React Lifecycle & Hooks

🔹 Do hooks replace lifecycle methods?

Yes. Hooks provide more flexible lifecycle control.

🔹 Can I simulate componentDidMount exactly?

Yes, using useEffect with empty dependency array.

🔹 Can effects run multiple times?

Yes, based on dependency changes.

🔹 Should I fear useEffect?

No — but you should respect it.

🧠 Quick Recap

✔ React lifecycle has 3 phases
✔ Hooks represent lifecycle behavior
✔ useEffect runs after render
✔ Cleanup prevents memory leaks
✔ Rendering and lifecycle are different

🎉 Conclusion

Understanding the React lifecycle through hooks gives you control, confidence, and clarity.

From now on:

• You’ll write cleaner effects
• You’ll avoid common bugs
• You’ll understand when and why code runs

This lesson completes your React Internals foundation and prepares you for Advanced Hooks ⚛️🧠

👉 Next Lesson

Lesson 4 — useReducer Hook (Advanced State Logic)