How React Works Under the Hood (Step-by-Step)
A step-by-step explainer of React's Virtual DOM lifecycle, reconciliation, and DOM updates. The following chart visualizes how developer code connects to React's internal processes and the browser UI update cycle.
flowchart TD
A[Developer Writes React Code] --> B[React Components JSX]
B --> C[JSX Transpiled to React.createElement Calls]
C --> D[React.createElement Creates VDOM Tree JS Objects]
D --> E[React Stores VDOM Tree in Memory Virtual DOM]
E --> F[React Updates State Change via useState or setState]
F --> G[React Schedules Re-render Batched for Performance]
G --> H[React Re-creates New VDOM Tree Reconciliation Phase]
H --> I[React Compares Old and New VDOM Trees Diffing Algorithm]
I --> J[React Identifies Minimal DOM Updates Reconciliation]
J --> K[React Updates Real DOM Efficiently Batched DOM Updates]
K --> L[Browser Renders Updated UI Reflow and Repaint]
L --> M[Developer Sees Updated UI in Browser]
%% HIGHLIGHT: Developer's Abstraction
M --> N[Developer Code useState useEffect useContext useRef]
N --> O[Developer Uses React Hooks High-Level Abstractions]
O --> P[React Internally Hooks Manager State Queue Effect Queue]
%% HIGHLIGHT: Component Lifecycle
Q[Component Mounting] --> R[React calls useEffect with empty deps Mounting Effects]
R --> S[React calls componentDidMount Legacy Now replaced by useEffect]
T[Component Updating] --> U[React calls useEffect with deps Update Effects]
U --> V[React calls componentDidUpdate Legacy Now replaced by useEffect]
W[Component Unmounting] --> X[React calls useEffect with cleanup function Cleanup Effects]
X --> Y[React calls componentWillUnmount Legacy Now replaced by useEffect cleanup]
%% HIGHLIGHT: Fiber Architecture
Z[React Internally Fiber Reconciliation Engine]
Z --> AA[Breaks rendering into chunks Time-Slicing]
AA --> AB[Supports Prioritization e.g. user input over background updates]
AB --> AC[Enables Concurrent Mode React 18+]
%% HIGHLIGHT: Context & State Management
AD[React Context API] --> AE[React creates Context Object Provider/Consumer]
AE --> AF[React Propagates Context Down the Tree No Re-renders for Non-Consumers]
AF --> AG[React Uses Context for Global State e.g. Theme Auth]
%% HIGHLIGHT: Refs & Mutable State
AH[useRef] --> AI[Returns Mutable Object current property]
AI --> AJ[Ref persists across renders no re-renders]
AJ --> AK[Used for DOM refs timers or mutable state not triggering re-renders]
%% HIGHLIGHT: Performance Optimizations
AL[React.memo useMemo useCallback] --> AM[Prevents Unnecessary Re-renders]
AM --> AN[React compares props/memoized values shallow comparison]
AN --> AO[Only re-renders if prop/value changes]
%% Connecting the Dots
A -.-> Z
B -.-> Z
C -.-> Z
D -.-> Z
E -.-> Z
F -.-> Z
G -.-> Z
H -.-> Z
I -.-> Z
J -.-> Z
K -.-> Z
L -.-> Z
M -.-> Z
P -.-> Z
Q -.-> Z
T -.-> Z
W -.-> Z
AD -.-> Z
AH -.-> Z
AL -.-> Z