Q257- How React works internally

React internally handles UI updates through a series of smart optimizations so your app remains fast, predictable, and efficient.

It mainly relies on:

1. Virtual DOM
2. Fiber Architecture
3. Reconciliation (diffing algorithm)
4. Render Phase & Commit Phase
5. Scheduling & Prioritization

Let’s break it down.

---

✅ 1. Virtual DOM (VDOM)

React does not update the browser DOM directly.
It creates a lightweight in-memory copy of the UI called the Virtual DOM.

How it works:

• You update state → React creates a new VDOM tree.
• It compares (diffs) it with the previous VDOM.
• Only the changed parts are updated in the real DOM.

Why?

• DOM operations are slow
• Virtual DOM diffing is fast
• React batches updates → better performance

---

✅ 2. React Fiber (Internal Engine)

React Fiber is the core algorithm behind React since version 16.

It allows:

✔ Interruptible rendering

React can pause work and continue later.

✔ Prioritizing updates

User interactions (typing, clicks) get higher priority.

✔ Splitting work into small units (fibers)

Each component = a fiber node.

✔ Concurrent rendering (React 18)

Allows preparing UI in background without blocking UI.

---

✅ 3. Reconciliation (Diffing Algorithm)

This is how React decides what changed.

Rules:

• Different element types → replace entire subtree
• Same type → update props
• Keys help React match list items efficiently
• Minimal DOM updates

Example:

Updating a button label updates only the text, not the whole button.

---

✅ 4. Two Phases of React Rendering

React updates the UI in two phases:

---

🔵 A. Render Phase (pure calculations)

• Build the fiber tree
• Compare old vs new VDOM
• Determine what needs to change
• Calculate changes (diff output)

⏳ This phase is interruptible
React can pause or restart it.

---

🔴 B. Commit Phase (actual DOM updates)

• Apply changes to the real DOM
• Run useLayoutEffect
• Attach refs

⚡ This is synchronous and cannot be interrupted.

---

✅ 5. React's Scheduling (Event Loop Integration)

React works cooperatively with the browser:

• Checks if the browser is busy
• If user interacts → React pauses background rendering
• Low priority updates wait (e.g., offscreen components)

This reduces UI freezes and gives smooth UX.

---

🧠 Full Internal Workflow Example

You update state → setState() or useState():

1. React marks the component as dirty.
2. Adds update to the Fiber work queue.
3. Starts Render Phase:
   • Builds new VDOM
   • Performs diffing
   • Prepares a list of DOM mutations
4. Moves to Commit Phase:
   • Applies only the changed DOM nodes
   • Runs effects (useEffect after paint, useLayoutEffect before paint)
5. Browser paints updated UI.

---

🎯 Short Interview Answer

React works internally using the Virtual DOM, Fiber architecture, and a two-phase rendering system (Render Phase + Commit Phase).
When state changes, React creates a new Virtual DOM, diffs it with the previous one, and updates only the changed parts of the real DOM.
Fiber enables prioritized, interruptible rendering to keep the UI responsive.

---

⭐ Super-Crisp 1-Liner (If interviewer wants very short)**

React uses Virtual DOM + Fiber to perform fast, optimized, and interruptible rendering by diffing UI changes and updating only what’s necessary.