14 parts · 67 chapters
React, Internals and Patterns
React is a function from state to a tree, run by a scheduler that decides when, and a reconciler that decides what changed. Every pattern that works and every bug that recurs is a consequence of those three pieces, and this module draws each one from the fiber up.
The internals first: elements and the mental model, the fiber node and the two trees, the diff, the lanes, the hook list and effect timing, interruptible rendering with Suspense and streaming, Server Components and the compiler. Then the practice at scale: where state lives, how data arrives, forms that handle money, the patterns that compose, the anti-patterns that recur, testing that survives refactors, and hydration on the wire.
the modelElements, components and the tree; where "UI as a function of state" stops being true.
fiberThe node, the two trees, beginWork and completeWork, the commit phases in order.
the diffKeys, bailouts, the heuristics, and what each one costs you in a render.
lanes and timeHow an update becomes a render: priorities as bits, slices, starvation, interruption.
hooksThe linked list, useState and useReducer internals, effect timing, refs, memo, and why the rules exist.
concurrent and serverTransitions, Suspense, streaming, selective hydration; RSC and the compiler.
at scaleState ownership, data fetching, forms, composition patterns, and the anti-patterns that keep returning.
on the wireHydration and its mismatches, islands, partial hydration, hybrid and WebView apps; testing that holds.
00
What React Is
Elements, components, fibers, DOM · One update, end to end · Where the model leaks · The map of this course
4 ch · ~30 min01Fiber
The fiber node · Two trees and the alternate pointer · beginWork: rendering one fiber · completeWork: host instances and bubbling · The commit, pass by pass · The work loop and where time goes
6 ch · ~45 min02Reconciliation
reconcileChildren: the entry point · Arrays and keys · Bailouts, and the memo primitives as modifications to them · Context propagation · Reading reconciliation: tools
5 ch · ~40 min03The Scheduler And Lanes
From an event to a lane · The scheduler: slices, yielding, interruption · Lanes, batching, and the APIs that choose them · Reading the scheduler: tools
4 ch · ~35 min04Hooks
The hook list · useState and useReducer: the queue · Effects: objects, tags, and timing · Refs, memo, and the rest · Reading hooks: tools, and the rules restated
5 ch · ~45 min05Concurrent Rendering
What "concurrent" means · Transitions in practice · Suspense: thrown promises and boundaries · Streaming SSR and selective hydration · Tearing and external stores
5 ch · ~40 min06Server Components And The Compiler
What a Server Component is · The payload, the transport, and actions · The React Compiler · Server and client, costed
4 ch · ~35 min07State Management At Scale
Six kinds of state, and who owns each · Context: dependency injection, not a store · Stores: Redux, Zustand, Jotai, XState · Server state is a cache · URL, forms, session, and the decision procedure
5 ch · ~35 min08Data Fetching Patterns
Fetch-on-render and its waterfalls · Render-as-you-fetch, Suspense, and the cache · Mutations, invalidation, optimistic updates · Server Components, actions, and the hybrid · Reading data fetching: tools
5 ch · ~35 min09Forms And Inputs
Controlled and uncontrolled · Validation: when, where, and with what · Actions: useActionState, useFormStatus, and progressive enhancement · Large forms · The money form
5 ch · ~35 min10Patterns
Composition over configuration · Compound components · Headless and polymorphic components · Render props, slots, and state colocation · The patterns, in one table
5 ch · ~35 min11Anti-Patterns At Scale
Effect chains · Derived state in state, and copied props · Prop drilling and context overuse · Premature memo, and the volume problems memo cannot fix · The catalogue, by symptom
5 ch · ~30 min12Testing React
What to test, at which level · Component tests: queries, events, assertions · Mocking the right boundary · Async, timing, and flakiness · Visual regression, Storybook, and the tools
5 ch · ~30 min13React On The Wire
Hydration: what happens, and what goes wrong · Islands, partial hydration, and the alternatives · Hybrid apps, WebViews, and React Native · The course, in one page
4 ch · ~30 minPaired with the algorithms courseParts 2 and 3 here draw reconciliation and the scheduler as React does them; the algorithms course has the same machinery as algorithms (its parts 5 and 7). Read whichever framing you need; they point at each other.