React Internals: A Crash Course on How React Actually Works

Most of us use React every day without knowing what happens after we call setState. We trust it re-renders the right things at the right time — but how? I built a free, self-paced crash course that opens up React's render engine and shows exactly how it works, with the real source code as proof.

→ Open the course

Why "internals"?

You can ship React for years on intuition. But the moment something gets weird — a component re-renders when it "shouldn't," an effect fires at the wrong time, a transition feels janky — intuition runs out. Understanding the engine turns those mysteries into things you can reason about. So every lesson starts with a mental model, then proves it with the actual React source.

What it covers

Thirty short lessons across ten modules, moving from the big picture down to the details:

The big picture — the four pillars React's engine rests on: Fibers, the two trees, Lanes, and the Scheduler.
The work tree — what a Fiber really is, how fibers link into a tree, and double buffering (the draft tree vs. what's on screen).
One pass of work — beginWork and completeWork, render vs. commit, and bailout (how React skips a component entirely — including the famous props.children trick).
Priority & timing — Lanes (priority encoded as bits) and the Scheduler (time-slicing so the page never freezes).
A full update, end to end — from setState to a scheduled render, batching, effects, and how a click becomes a SyntheticEvent.
Hooks up close — how hooks store state on a Fiber, and what changed in React 19.
Advanced — Suspense, error boundaries, Activity, and a whole module on server-side React: hydration, streaming, and React Server Components with the Flight protocol.

Each lesson follows the same shape: why this matters → a plain-English mental model → build it up one idea at a time → see it in the real source → gotchas → a recap → a few exercises to test yourself.

Who it's for

If you can build with React but want to understand it — to debug confidently, reason about performance, or just satisfy your curiosity — this is for you. It's concept-first, so you don't need to have read React's source before; but everything is backed by the actual code, so it's never hand-wavy.

There's nothing to install and no account to create. It's a static site — just click and read.

How to use it

Go top to bottom the first time; the modules build on each other deliberately. After that, treat it as a reference — when you hit a "why did this re-render?" moment, jump straight to the bailout lesson.

The goal isn't to memorize React's source. It's to reach the point where React stops feeling like magic and starts feeling like a machine you can reason about.

Start here: react-crash-course-alpha.vercel.app

Why "internals"?

What it covers

Thirty short lessons across ten modules, moving from the big picture down to the details:

The big picture — the four pillars React's engine rests on: Fibers, the two trees, Lanes, and the Scheduler.

The work tree — what a Fiber really is, how fibers link into a tree, and double buffering (the draft tree vs. what's on screen).

One pass of work — beginWork and completeWork, render vs. commit, and bailout (how React skips a component entirely — including the famous props.children trick).

Priority & timing — Lanes (priority encoded as bits) and the Scheduler (time-slicing so the page never freezes).

A full update, end to end — from setState to a scheduled render, batching, effects, and how a click becomes a SyntheticEvent.

Hooks up close — how hooks store state on a Fiber, and what changed in React 19.

Advanced — Suspense, error boundaries, Activity, and a whole module on server-side React: hydration, streaming, and React Server Components with the Flight protocol.