How React Works: The Complete Tutorial

This course starts from "I've shipped React" and ends at "I can explain what React is doing." No source-code walkthroughs, no file names. Each concept is built with plain explanations, runnable examples, walkthroughs, and diagrams.

Who this is for: frontend engineers who know JavaScript, have written components, and have never sat with what happens under the hood.

What you need: about an hour of JavaScript prerequisites (chapter 0.1) and the patience to read in order.

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 later chapters assume.

Part 1: Foundations: the mental model​

#	Chapter	What it gives you
1.1	The problem React solves	Why manual DOM syncing breaks, and 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 actually creates
1.4	JSX under the hood	The transform, the rules, the syntax traps
1.5	Components and purity	Why render must be pure. Later chapters depend on this.
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, and where state actually lives
2.2	Two trees: double buffering	Current vs draft tree; why renders are disposable
2.3	Diffing, step by step	Reconciliation rules and full traces
2.4	Keys and identity	What keys actually 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 that rarely gets taught
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