Lesson 1 — How React Really Works | Rendering & Reconciliation

🧭 Introduction

Most React developers know how to write components, but very few understand how React actually works internally.

This lack of understanding leads to:

• Confusion about re-renders
• Overuse of useEffect
• Performance problems
• Blind optimization

In this lesson, we will build a strong mental model of how React works behind the scenes — especially rendering and reconciliation.

👉 This lesson is the foundation of Advanced React. Everything else depends on it.

🎯 What You’ll Learn in This Lesson

By the end of this lesson, you will understand:

• What rendering really means in React
• What happens when state or props change
• What reconciliation is and why it exists
• How React decides what to update in the DOM
• Why unnecessary re-renders happen

❓ What Does “Rendering” Mean in React?

In simple terms, rendering means:

React calls your component function and calculates what the UI should look like.

⚠️ Important:
Rendering does NOT mean updating the browser DOM every time.

Example:

function Counter() {
  return <h1>Hello</h1>;
}

When React renders:

• It runs the Counter() function
• It creates a virtual representation of the UI
• No DOM changes happen yet

🧠 Rendering vs DOM Updates (Very Important)

👉 Rendering is cheap
👉 DOM updates are expensive

React minimizes DOM work using reconciliation.

❓ What Triggers a Re-render?

A component re-renders when:

1️⃣ Its state changes
2️⃣ Its props change
3️⃣ Its parent re-renders

Example:

setCount(count + 1);

This causes:

• Component function to run again
• New UI tree to be created

⚠ Common Misconception

❌ “React re-renders the entire page”
❌ “Re-render = DOM update”

✅ Truth:
React re-renders components in memory, then updates only what changed in the DOM.

🌳 What Is the Virtual DOM?

The Virtual DOM is:

A lightweight JavaScript object that represents the UI structure.

Example (simplified):

{
  type: "h1",
  props: { children: "Hello" }
}

React creates a Virtual DOM tree on every render.

🔁 What Is Reconciliation?

Reconciliation is the process where React:

Compares the previous Virtual DOM with the new Virtual DOM
and decides what needs to change in the real DOM

This comparison is called diffing.

🧠 Why Reconciliation Is Needed

Without reconciliation:

• React would destroy & rebuild the entire DOM
• Performance would be terrible

With reconciliation:

• Only changed nodes are updated
• UI stays fast and smooth

🔍 How React Compares Trees (Simplified)

React follows a few important rules:

Rule 1: Same Component Type → Reuse DOM

<h1>Hello</h1> → <h1>Hi</h1>

✅ Text updates
❌ DOM node not recreated

Rule 2: Different Component Type → Replace DOM

<h1>Hello</h1> → <p>Hello</p>

❌ Old node removed
✅ New node created

Rule 3: Lists Use Keys

items.map(item => <li key={item.id} />)

Keys help React:

• Match old items with new items
• Avoid unnecessary DOM changes

⚠️ Using index as key breaks reconciliation.

🔁 Rendering Flow (Mental Model)

When state changes:

1️⃣ State update happens
2️⃣ Component function runs again
3️⃣ New Virtual DOM is created
4️⃣ React compares old vs new Virtual DOM
5️⃣ Minimal DOM updates are applied

👉 This flow is the heart of React.

❓ Why Parent Re-render Affects Children?

function Parent() {
  return <Child />;
}

If Parent re-renders:

• Child also re-renders by default

❌ Even if props didn’t change

This is why:

• Memoization exists
• React.memo is useful

(We’ll cover this deeply in performance lessons.)

⚠ Common Developer Mistakes

❌ Assuming re-render is always bad
❌ Overusing useEffect to “control renders”
❌ Blindly using useMemo everywhere
❌ Ignoring parent-child render flow

🎯 Best Practices (At This Stage)

✅ Understand before optimizing
✅ Accept that re-renders are normal
✅ Optimize only when needed
✅ Learn reconciliation rules properly

❓ FAQs — React Rendering & Reconciliation

🔹 Is re-rendering bad?

No. Re-rendering is normal and usually cheap.

🔹 Does React update the whole DOM on every render?

No. Only changed parts are updated.

🔹 Why does my component render many times?

Because state, props, or parent renders changed.

🔹 Should I prevent all re-renders?

No. Prevent unnecessary re-renders only.

🧠 Quick Recap

✔ Rendering = calling component functions
✔ Virtual DOM represents UI in memory
✔ Reconciliation compares old & new UI
✔ DOM updates are minimal
✔ Parent renders affect children

🎉 Conclusion

Understanding how React really works changes the way you write code.

From now on:

• You’ll stop guessing
• You’ll debug re-render issues confidently
• You’ll know why performance problems happen

This lesson lays the foundation for senior-level React thinking 🧠⚛️

👉 Next Lesson

Lesson 2 — Virtual DOM vs Real DOM (Myths vs Reality)