Q291- How does React work under the hood (Virtual DOM, reconciliation, rendering)?

React updates the UI using three core ideas:

1. Virtual DOM
2. Reconciliation (diffing)
3. Rendering (Render phase + Commit phase)

---

✅ 1. Virtual DOM (VDOM)

The Virtual DOM is a lightweight JavaScript object that represents the UI.

• It is a copy of the real DOM
• Much faster to create and compare than the real DOM

What happens?

• Your JSX → converted into Virtual DOM objects
• React never directly updates the real DOM first

<h1>Hello</h1>

Becomes:

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

---

✅ 2. State or Props Change → New Virtual DOM

When:

• setState / useState is called
• props change
• parent re-renders

React:

1. Creates a new Virtual DOM tree
2. Keeps the previous Virtual DOM tree

---

✅ 3. Reconciliation (Diffing Algorithm)

Reconciliation is the process of comparing:

Old Virtual DOM vs New Virtual DOM

React uses smart rules to minimize work:

Diffing rules:

• Same element type → update only changed props
• Different element type → replace the subtree
• Lists use keys to match items efficiently

<li key={id}>Item</li>

✔ Keys help React avoid unnecessary DOM updates
✔ Without keys → more re-renders

---

✅ 4. Render Phase (Calculation Phase)

During this phase React:

• Builds a new Virtual DOM
• Runs reconciliation (diffing)
• Figures out what needs to change
• Does NOT touch the real DOM

📌 This phase:

• Is pure
• Can be paused or interrupted (React Fiber)
• Runs multiple times if needed

---

✅ 5. Commit Phase (DOM Update Phase)

Once React knows exactly what changed, it enters the commit phase.

Here React:

• Updates the real DOM
• Applies minimal changes
• Updates refs
• Runs lifecycle methods
• Runs useLayoutEffect

📌 This phase:

• Is synchronous
• Cannot be interrupted
• Is usually very fast

---

✅ 6. React Fiber (Important)

React Fiber is the internal engine that enables:

• Interruptible rendering
• Update prioritization
• Concurrent rendering (React 18)

This means:

• User interactions get higher priority
• Background updates can wait
• UI stays responsive

---

🧠 Complete Flow (Simple)

1. State/props change
2. React creates new Virtual DOM
3. React compares it with old Virtual DOM (reconciliation)
4. React calculates minimal changes
5. React updates real DOM in commit phase
6. Browser repaints the UI

---

🎯 Short Interview Answer

React works by creating a Virtual DOM, comparing it with the previous Virtual DOM using reconciliation, and updating only the changed parts of the real DOM.
Rendering happens in two phases: the render phase (diffing and calculation) and the commit phase (actual DOM updates).
React Fiber enables interruptible and prioritized rendering for better performance.

---

⭐ One-Line Summary

React calculates UI changes using the Virtual DOM and reconciliation, then efficiently updates only what changed in the real DOM.