How to Use This Tutorial
This tutorial teaches how React actually works, from first principles, with no assumed internals knowledge. By the end, phrases like "reconciliation", "lanes", "hydration", and "suspended render" should be things you can explain, not things you nod along to.
What makes this different
- No source code required. Concepts and mental models, with small pseudocode. You do not need to read React's source to understand React.
- Every example is complete. No mysterious fragments. You can type any example into a project and run it.
- Subtle behavior is walked through numbered, one step at a time, often twice (broken version first, then the fix).
- Misconceptions get their own section in every chapter. Knowing what something is not is half of understanding it.
Your starting point
- Read 0.1, JavaScript you actually need. Even if you're experienced: the event-loop and
Object.issections are load-bearing for later chapters. - Follow the parts in order. Each chapter links to the next at the bottom.
The parts at a glance
| Part | Theme | The one question it answers |
|---|---|---|
| 1, Foundations | The mental model | What is React actually doing when it "renders"? |
| 2, The engine | The internal trees | How does React decide what changed? |
| 3, State & hooks | The hook machinery | Where does state live, and why do hooks have rules? |
| 4, Concurrency | The scheduler | How can React pause a render halfway through? |
| 5, Suspense & errors | Async UI | How does a component "wait" for data? |
| 6, React DOM | The browser layer | What really happens when you click? |
| 7, Server | SSR, hydration, RSC | What runs where, and in what order? |
| 8, Performance | Making it fast | When is React actually slow, and what fixes it? |
| 9, Advanced | The edge machinery | StrictMode, escape hatches, hidden trees, myths |
| 10, Consolidation | Locking it in | Glossary, cheatsheet, 40-question self-test |
Rules of engagement
- Do the "Try it yourself" experiments. They're small, and each one states the expected outcome. Checking the model against reality is where it sticks.
- Don't skip the Recap sections. They're written to be screenshot-worthy. Collect them.
- If a chapter references an earlier concept you skipped, go back. The series is cumulative.
- Finish with the self-test. Score it honestly and re-read the parts your wrong answers point to.