What is the Virtual DOM?

The Virtual DOM is an in-memory JavaScript representation of the UI — plain objects created by React.createElement, not real DOM nodes. On state change, React builds a new VDOM tree, diffs it against the previous tree, and applies minimal updates to the real DOM.

What is Fiber in React?

Fiber is React 16's reconciliation engine. Each component gets a Fiber node that tracks props, state, and work to do. Fiber enables incremental rendering — React can pause, resume, and prioritize updates instead of blocking the main thread synchronously like React 15's stack reconciler.

What is the difference between render phase and commit phase?

Render phase is pure and interruptible: React runs components, builds the new VDOM, and reconciles. No DOM mutations happen. Commit phase is synchronous: React applies DOM updates, runs useLayoutEffect, and schedules useEffect. Think: render = planning, commit = execution.

Why must hooks be called in the same order?

React stores hooks as a linked list on the Fiber node's memoizedState. Each useState, useEffect, etc. is a node in that list. If hook order changes between renders, React reads the wrong state slot — which is why hooks cannot be conditional.

React Internals

Virtual DOM, Fiber, reconciliation, hooks, and React 18 — how React works under the hood.

Module 4 · React Internals

How React works under the hood: Virtual DOM, Fiber architecture, render vs commit phases, reconciliation, diffing, hooks storage, state updates, and React 18 concurrent features.

Virtual DOM, Fiber architecture, render vs commit phases, reconciliation and diffing, hooks on Fiber nodes, setState batching, and React 18 concurrent features — how React works under the hood from first render to DOM update.

About this module

Understanding React internals helps you write efficient code, debug performance issues, and explain architectural trade-offs in SDE-2 interviews.

This module covers Virtual DOM vs Fiber, the two-phase rendering model, reconciliation rules, why keys matter, how hooks are stored on Fiber nodes, and automatic batching in React 18.

Expect deep-dive questions on useTransition, useDeferredValue, why you cannot call hooks conditionally, and how the commit phase applies DOM updates without blocking the main thread unnecessarily.

Walk through Virtual DOM diffing, Fiber's linked-list structure, reconciliation with keys, hooks storage on fiber.memoizedState, and React 18 automatic batching with concrete diagrams and interview drills.

Why this matters

SDE-2 frontend interviews ask how React updates the DOM, why keys matter, and what happens when you call setState. Internals knowledge explains performance patterns like memo, transitions, and why conditional hooks break. It also helps you debug mysterious double renders and understand when React 18 batching applies.

Key topics covered

Virtual DOM
Fiber Architecture
Render Phase
Commit Phase
Reconciliation
Diffing Algorithm
Keys in Lists
Hooks Internals
setState and Batching
Concurrent Mode
useTransition

Where you'll use it

Debugging unnecessary re-renders in large component trees
Choosing keys correctly in dynamic lists
Explaining render vs commit phase in system design interviews
Using useTransition for non-urgent UI updates
Tracing Fiber reconciliation with React DevTools Profiler

What Are React Internals?

How React works under the hood — for SDE-2 Frontend Engineer interviews.

React Internals is how React converts your JSX into DOM updates. Understanding this layer helps you write efficient code, debug performance issues, and explain why certain patterns work.

•Write more efficient React code
•Debug performance issues with confidence
•Understand why keys, memo, and transitions matter
•Make better architectural decisions in large apps

Mental model

Virtual DOM = blueprint of your UI. Fiber = task manager that plans and schedules updates. Render phase = planning. Commit phase = execution.

Virtual DOM (VDOM)

An in-memory JavaScript representation of the real DOM.

The Virtual DOM is a lightweight copy of your UI stored as plain JavaScript objects — not actual DOM nodes. Creating objects is fast; touching the real DOM is expensive. React uses VDOM to batch and minimize DOM operations.

// JSX
<div className="container">
  <h1>Hello</h1>
</div>

// Becomes React.createElement:
React.createElement(
  "div",
  { className: "container" },
  React.createElement("h1", null, "Hello")
)

// Returns a plain object:
{
  type: "div",
  props: {
    className: "container",
    children: {
      type: "h1",
      props: { children: "Hello" }
    }
  }
}

•Plain JavaScript object — very fast to create
•Recursive tree structure (children nest inside children)
•Each element = one React.createElement() call
•Compared on every update to find minimal DOM changes

Fiber Architecture (React 16+)

React's reconciliation engine — a task manager for incremental rendering.

Fiber replaced React 15's stack reconciler. Each component gets a Fiber node that tracks its own work, state, and DOM connection. React can pause, resume, and prioritize updates instead of blocking the main thread synchronously.

// Fiber Node (simplified)
{
  type: Component,
  stateNode: DOMNode,      // link to real DOM
  props: {},
  child: FiberNode,        // first child
  sibling: FiberNode,      // next sibling
  return: FiberNode,       // parent
  flags: Bitmask,          // work to do (placement, update, deletion)
  updateQueue: [],
  memoizedState: {},       // hooks live here
  memoizedProps: {}        // previous props
}

•Each component instance = one Fiber node
•Tracks updates per component, not the whole tree at once
•Can pause/resume work — enables incremental rendering
•Prioritizes high-priority updates (user input over background work)
•Powers Suspense, Transitions, and Concurrent features

Stack vs Fiber

React 15 stack reconciler was synchronous — once rendering started, it could not stop. Fiber broke work into units that can be interrupted, retried, or discarded when higher-priority work arrives.

Virtual DOM vs Fiber Node

Blueprint vs contractor — two layers, different jobs.

Aspect	Virtual DOM	Fiber Node
Purpose	UI snapshot in memory	Task manager for updates
Type	Plain JS object	Internal React object
Granularity	Whole tree output	Per-component tracking
Rendering	Synchronous (React 15)	Incremental (React 16+)
Flexibility	Fixed comparison	Pause / resume / prioritize
Analogy	Blueprint	Contractor

Two Rendering Phases

Render = planning. Commit = execution.

State / props change

Render Phase (can pause)

Commit Phase (cannot pause)

Browser paint

useEffect runs (after paint)

Phase 1 — Render

•Run component functions (re-execute)
•Build new Virtual DOM tree
•Reconcile old vs new (diffing)
•Build work list of Fiber nodes
•Can be paused, resumed, or canceled
•No DOM mutations — pure functions only

Phase 2 — Commit

•Apply minimal DOM updates
•Create / update / delete real nodes
•Run useLayoutEffect (synchronous)
•Schedule useEffect (async after paint)
•Cannot be paused — must finish quickly
•Side effects and DOM mutations happen here

Interview one-liner

Render phase is interruptible planning. Commit phase is synchronous execution. Never put side effects in render — they belong in commit (useLayoutEffect / useEffect).

Reconciliation & Diffing Algorithm

How React finds the minimal set of DOM changes.

Reconciliation compares the previous and next Virtual DOM trees. The diffing algorithm applies heuristics to keep comparison at O(n) instead of comparing every possible tree transformation.

Rule	Behavior
Element types differ	Destroy old subtree → create new
Element types same	Update changed props only
Component type same	Keep instance, update props/state
Component type different	Unmount old → mount new instance
Array children with keys	Match by key — efficient reorder
Array children without keys	Re-render all — inefficient

// Old
<div>
  <span key="1">A</span>
  <span key="2">B</span>
</div>

// New (reordered)
<div>
  <span key="2">B</span>
  <span key="1">A</span>
</div>

// React diff: reorder only — not destroy + recreate both

Why Keys Matter in Lists

Stable identity lets React diff arrays in O(n) instead of O(n²).

// Bad — no keys
{todos.map((todo) => (
  <Todo>{todo.text}</Todo>
))}

// Good — stable unique keys
{todos.map((todo) => (
  <Todo key={todo.id}>{todo.text}</Todo>
))}

Interactive · List keys & reconciliation

Buy milkkey=a
Walk dogkey=b
Send emailkey=c

With stable keys, each todo keeps its own state when the list reorders.

Scenario	Without keys	With keys
Reorder list	Re-render all items	Move existing nodes
Insert item	Re-render from insertion point	Insert + minimal updates
Performance	O(n²) worst case	O(n)
Key source	Index (unstable on reorder)	Stable id (todo.id)

Rule of thumb

Keys must be unique among siblings and stable across renders. Avoid array index as key when the list can reorder, filter, or insert items.

Hooks Internals

Stored as a linked list on each Fiber node's memoizedState.

function Counter() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("John");

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

  return <div>{count}</div>;
}

// Internal storage on Fiber node
FiberNode {
  memoizedState: {
    baseState: 0,              // useState(count)
    queue: { pending: [] },
    next: {
      baseState: "John",       // useState(name)
      queue: { pending: [] },
      next: {
        // useEffect hook node
        deps: [count],
        next: null
      }
    }
  }
}

•Hooks are stored in call order — linked list on Fiber
•useState = baseState + update queue
•useEffect = effect function + dependency array
•Same order every render — why conditional hooks break
•Class lifecycle maps: componentDidMount ≈ useLayoutEffect, componentDidUpdate ≈ useEffect

setState & Batching

What happens when you call setState or a state updater.

Create update object { payload, priority }

Enqueue on FiberNode.updateQueue

Schedule render work

Render phase — compute new state

Commit phase — update DOM

onClick={() => {
  setCount(1);
  setName("John");
  setColor("red");
}}
// React 18: all three batched → single render

	Before React 18	React 18+
Event handlers	Batched	Batched
Promises / setTimeout	Multiple renders	Batched
Native events	Multiple renders	Batched
Result	Inconsistent batching	Automatic batching everywhere

Why batching matters

Fewer renders = less work in render + commit phases = better INP and smoother UI. React 18 batches all updates by default unless you opt out with flushSync.

Concurrent Mode (React 18)

Incremental rendering with priority — non-urgent work can wait.

Concurrent rendering is not a separate API — it is how React 18 schedules Fiber work. Urgent updates (typing, clicking) interrupt non-urgent work (filtering a large list, fetching data for a secondary panel).

•Suspense — show fallback while waiting for async data
•useTransition — mark updates as non-urgent
•Automatic batching — all setState calls coalesced
•Streaming SSR — send HTML incrementally from the server

import { useTransition } from "react";

const [isPending, startTransition] = useTransition();

startTransition(() => {
  setSearchTerm("new value"); // non-urgent — can be interrupted
});

Reconciler	Rendering	Granularity	Features
Stack (React 15)	Synchronous	Whole tree	Basic updates only
Fiber (React 16+)	Incremental	Per-component	Suspense, Transitions, Streaming

Quick Reference

One table to review before your interview.

Concept	Description	Key Benefit
Virtual DOM	In-memory UI representation	Fast — no real DOM ops during diff
Fiber	Task manager for updates	Incremental, interruptible rendering
Reconciliation	Compare VDOM trees	Find minimal changes
Diffing	O(n) tree comparison heuristics	Efficient updates
Render Phase	Pure, interruptible planning	Non-blocking main thread
Commit Phase	Sync DOM mutation + effects	Consistent UI snapshot
Keys	Stable list item identity	Efficient reorder O(n)
Hooks	Linked list on Fiber	Ordered state per component
Concurrent Mode	Priority-based scheduling	Responsive under load
Automatic Batching	Coalesce setState (React 18)	Single render per tick

Frequently Asked Questions

Common interview questions about React internals.

// JSX <div className="container"> <h1>Hello</h1> </div> // Becomes React.createElement: React.createElement( "div", { className: "container" }, React.createElement("h1", null, "Hello") ) // Returns a plain object: { type: "div", props: { className: "container", children: { type: "h1", props: { children: "Hello" } } } }

// Fiber Node (simplified) { type: Component, stateNode: DOMNode, // link to real DOM props: {}, child: FiberNode, // first child sibling: FiberNode, // next sibling return: FiberNode, // parent flags: Bitmask, // work to do (placement, update, deletion) updateQueue: [], memoizedState: {}, // hooks live here memoizedProps: {} // previous props }

Aspect

Virtual DOM

Fiber Node

Purpose

UI snapshot in memory

Task manager for updates

Type

Plain JS object

Internal React object

Granularity

Whole tree output

Per-component tracking

Rendering

Synchronous (React 15)

Incremental (React 16+)

Flexibility

Fixed comparison

Pause / resume / prioritize

Analogy

Blueprint

Contractor

Rule

Behavior

Element types differ

Destroy old subtree → create new

Element types same

Update changed props only

Component type same

Keep instance, update props/state

Component type different

Unmount old → mount new instance

Array children with keys

Match by key — efficient reorder

Array children without keys

Re-render all — inefficient

// Old <div> <span key="1">A</span> <span key="2">B</span> </div> // New (reordered) <div> <span key="2">B</span> <span key="1">A</span> </div> // React diff: reorder only — not destroy + recreate both

Scenario

Without keys

With keys

Reorder list

Re-render all items

Move existing nodes

Insert item

Re-render from insertion point

Insert + minimal updates

Performance

O(n²) worst case

O(n)

Key source

Index (unstable on reorder)

Stable id (todo.id)

function Counter() { const [count, setCount] = useState(0); const [name, setName] = useState("John"); useEffect(() => { console.log("count changed:", count); }, [count]); return <div>{count}</div>; }

// Internal storage on Fiber node FiberNode { memoizedState: { baseState: 0, // useState(count) queue: { pending: [] }, next: { baseState: "John", // useState(name) queue: { pending: [] }, next: { // useEffect hook node deps: [count], next: null } } } }

Before React 18

React 18+

Event handlers

Batched

Promises / setTimeout

Multiple renders

Batched

Native events

Multiple renders

Batched

Result

Inconsistent batching

Automatic batching everywhere

Reconciler

Rendering

Granularity

Features

Stack (React 15)

Synchronous

Whole tree

Basic updates only

Fiber (React 16+)

Incremental

Per-component

Suspense, Transitions, Streaming

Concept

Description

Key Benefit

Virtual DOM

In-memory UI representation

Fast — no real DOM ops during diff

Fiber

Task manager for updates

Incremental, interruptible rendering

Reconciliation

Compare VDOM trees

Find minimal changes

Diffing

O(n) tree comparison heuristics

Efficient updates

Render Phase

Pure, interruptible planning

Non-blocking main thread

Commit Phase

Sync DOM mutation + effects

Consistent UI snapshot

Keys

Stable list item identity

Efficient reorder O(n)

Hooks

Linked list on Fiber

Ordered state per component

Concurrent Mode

Priority-based scheduling

Responsive under load

Automatic Batching

Coalesce setState (React 18)

Single render per tick

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

What Are React Internals?

Virtual DOM (VDOM)

Fiber Architecture (React 16+)

Virtual DOM vs Fiber Node

Two Rendering Phases

Reconciliation & Diffing Algorithm

Why Keys Matter in Lists

Hooks Internals

setState & Batching

Concurrent Mode (React 18)

Quick Reference

Frequently Asked Questions

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

What Are React Internals?

Virtual DOM (VDOM)

Fiber Architecture (React 16+)

Virtual DOM vs Fiber Node

Two Rendering Phases

Reconciliation & Diffing Algorithm

Why Keys Matter in Lists

Hooks Internals

setState & Batching

Concurrent Mode (React 18)

Quick Reference

Frequently Asked Questions