How React Works: The Complete Tutorial

A from-first-principles course that takes you from "I've used React" to "I understand how React actually works." No source-code spelunking, no file names, no magic, every concept is built up with plain-English explanations, complete runnable examples, step-by-step walkthroughs, and rendered diagrams.

Who this is for: frontend engineers who know JavaScript and have written React components, but have never learned what happens under the hood. What you need: ~1 hour of JavaScript prerequisites (chapter 0.1 covers exactly what) and curiosity. What's inside: 51 chapters across 9 parts · 100+ rendered diagrams.

---

The learning path​

Part 0: Start here​

#	Chapter	What it gives you
0.1	JavaScript you actually need	Closures, event loop, micro vs macrotasks, Object.is, immutability, the five things everything else stands on

Part 1: Foundations: the mental model​

#	Chapter	What it gives you
1.1	The problem React solves	Why manual DOM syncing breaks; the declarative answer
1.2	UI is a function of state	The formula everything else follows from
1.3	Elements are just objects	What JSX really creates, the keystone concept
1.4	JSX under the hood	The transform, the rules, the syntax traps
1.5	Components and purity	Why render must be pure (this enables everything later)
1.6	Render and commit	The two phases, the most important split in React

Part 2: The engine​

#	Chapter	What it gives you
2.1	The fiber tree	React's internal tree, where state actually lives
2.2	Two trees: double buffering	Current vs draft tree; why renders are disposable
2.3	Diffing, step by step	The reconciliation rules and full traces
2.4	Keys and identity	What keys really do (identity, not performance)
2.5	How the DOM gets updated	Minimal mutations, flags, the commit sequence

Part 3: State & hooks​

#	Chapter	What it gives you
3.1	What state really is	Memory tied to tree position
3.2	setState is a request	Batching, queues, the +1-not-+3 classic
3.3	Hooks: the linked list	The one mechanism behind all hooks
3.4	Rules of hooks, explained	Why the rules exist, derived from the mechanism
3.5	useState deep dive	Lazy init, Object.is bailout, mutation bugs
3.6	useEffect deep dive	Synchronization, not lifecycle; cleanups; races
3.7	useLayoutEffect & timing	The paint timeline; when each effect fires
3.8	useRef: the mutable box	The sanctioned escape hatch
3.9	useMemo & useCallback	Referential stability, the real reason they exist
3.10	Context deep dive	Propagation mechanics; why it bypasses memo
3.11	useReducer & advanced state	Reducers, optimistic updates, state machines

Part 4: Concurrency: React's scheduler​

#	Chapter	What it gives you
4.1	The main thread problem	Why one thread doing everything is the constraint
4.2	Time-slicing	How React yields every ~5ms to keep the page alive
4.3	Priority lanes	Clicks > typing > transitions > hidden; preemption
4.4	Concurrent rendering	Interruptible, discardable renders
4.5	Transitions	startTransition, isPending, the no-downgrade rule
4.6	useDeferredValue	The lagging-copy pattern for expensive UI
4.7	External stores & tearing	Why useSyncExternalStore exists

Part 5: Suspense & errors​

#	Chapter	What it gives you
5.1	Suspense mental model	Try/catch for "not ready yet"
5.2	Throwing promises	The full mechanism, step by step
5.3	Boundaries & retries	Placement, granularity, waterfalls
5.4	Suspense with transitions	Why old screens stay visible
5.5	Error boundaries	The error twin; what it can and can't catch

Part 6: React DOM​

#	Chapter	What it gives you
6.1	createRoot & the first render	What the entry point actually sets up
6.2	Synthetic events	Root delegation, what onClick really is
6.3	Controlled inputs	The enforcement loop nobody teaches
6.4	Portals	Different DOM address, same React family

Part 7: Server rendering​

#	Chapter	What it gives you
7.1	SSR & hydration	HTML first, interactivity second
7.2	Selective hydration	Islands, event replay, mismatches
7.3	Server components	Components that never ship to the browser
7.4	RSC streaming	UI as streamed data; server actions
7.5	Streaming SSR	Shell + progressive boundary swaps

Part 8: Performance​

#	Chapter	What it gives you
8.1	Wasted renders	Measure first; the three structural fixes
8.2	React.memo	Shallow compare, and the three ways it silently fails
8.3	State structure patterns	Colocation, derived state, key resets, normalization
8.4	The React Compiler	Auto-memoization, what it does and how to think about it

Part 9: Advanced​

#	Chapter	What it gives you
9.1	StrictMode	The double-everything development X-ray
9.2	Escape hatches	flushSync, imperative handles, act, last resorts
9.3	Offscreen & Activity	Hidden but alive: preserved trees
9.4	The misconceptions master list	24 myths, busted with proof

Part 10: Consolidation​

#	Chapter	What it gives you
10.1	Glossary	Every term in the series, in plain English
10.2	The mental model cheatsheet	The 12 laws + one master diagram
10.3	Self-test	40 questions to prove mastery

---

How the chapters work​

Every chapter follows the same shape: What you'll learn → the concept built step by step with complete examples → diagrams (rendered images inline) → common misconceptions → why it works this way → try it yourself experiments → recap → next chapter. New jargon always appears in a > **Jargon:** callout the moment it's introduced.