How React actually works,
from the inside out
A guided course through React's render engine — Fibers, lanes, the scheduler, hooks, Suspense and server components — built one mental model at a time, with the real source shown to prove every claim.
How each lesson works
Why this matters — the question the lesson answers.
🎯 You'll be able to — concrete goals + what to read first.
🧠 Mental model — the intuition to hold first.
📜 The real code — actual React source as proof.
⚠️ Gotcha — the trap that bites in practice.
🔑 Recap — the 3 things to remember.
✅ Try it — short exercises; answers hidden until you peek.
Tip — go top to bottom the first time; later jump via the sidebar.
Module 0
The Big Picture
Why a UI library needs a render engine at all, and the four pillars it stands on.
Module 1
The Work Tree (Fibers)
What a Fiber really is, how Fibers link into a tree, and the two-tree double buffer.
Module 2
One Pass of Work
beginWork, completeWork, and how the render phase differs from the commit phase.
Module 3
Priority (Lanes)
Why updates need priority, and how React encodes it as bitmask lanes to pick work.
Module 4
Timing (The Scheduler)
Time-slicing, yielding to the browser, and how the Scheduler decides when work runs.
Module 5
A Full Update, End to End
Trace setState through batching, effects and events all the way to the screen.
Module 6
Hooks Up Close
How hooks live on a Fiber as a linked list, and what changed in React 19.
Module 7
Suspense, Errors & Activity
How Suspense throws and recovers, how error boundaries catch, and what Activity adds.
Module 8
Server-Side React
SSR and hydration, streaming with selective hydration, and the RSC Flight protocol.
Module 9
Practice & Debugging
Worked end-to-end examples and a practical playbook for debugging real apps.