react

React, zero to senior

How React actually renders — reconciliation, state batching, effects, memoization — past tutorial level.

14 units·51 lessons·~15 h

Render, commit, reconciliation

React is a render-phase pure function plus a commit phase; reconciliation by type+key decides what survives.

01 Render and commit: why React calls your component more often than it paints 17 min 02 Reconciliation and keys: where your state actually lives 18 min 03 setState is a request: snapshots, update queues, and automatic batching 19 min

Effects, memoization, context

Effects synchronize with external systems, memoization trades memory for render time, context re-renders subtrees.

01 useEffect is synchronization, not lifecycle 18 min 02 Memoization: referential equality is the contract 18 min 03 Context, value identity, and the re-render storm 19 min

Data fetching: effects, Suspense, query libraries

Fetching is a cache problem, not a request problem — races, waterfalls and invalidation decide UX, not the fetch call.

01 Fetching in effects: races, waterfalls, and why the baseline is worth knowing 17 min 02 Suspense for data: the throw-a-promise contract, use(), and boundaries as UX design 19 min 03 Query libraries: queryKey identity, the two clocks, and what TanStack Query actually saves you 18 min 04 Cache invalidation patterns: invalidate vs write-through, optimistic rollback, and live sync 19 min

Forms, actions, optimistic UI

A form is a state machine: who owns the value, when it validates, and what the UI claims before the server confirms.

01 Controlled vs uncontrolled inputs: who owns the value, and what it costs 17 min 02 Form state and validation: values, errors, touched — and when to run the check 18 min 03 Form actions and useActionState: mutations as a first-class React primitive 19 min 04 Optimistic UI with useOptimistic: lying to the user honestly 19 min

Performance: measure, then cut

Profile before optimizing: most React slowness is render volume — virtualization, transitions and splitting beat micro-memo.

01 Profiler and measurement: find the 600 ms commit before touching React.memo 17 min 02 Rendering cost and virtualization: the 10,000-row table that renders 30 rows 18 min 03 Transitions and useDeferredValue: making slow renders interruptible, not faster 19 min 04 Code splitting with React.lazy: ship the screen, not the application 19 min

State architecture: colocation to external stores

Place state at the lowest component that needs it; reach for context, reducers or external stores only when colocation breaks.

01 Lifting and colocation: state lives at the lowest common owner 17 min 02 Reducers and context: turning scattered setState into testable transitions 18 min 03 External stores: useSyncExternalStore, selector subscriptions, and tearing 19 min 04 Server state vs client state: deciding who owns which truth 19 min

Testing React applications

Test what the user sees, not the implementation: RTL queries by role, user-event for real interaction, msw at the network seam.

01 RTL and user-event: test the contract the user sees 18 min 02 Async tests and MSW: mock the network, not the fetch 19 min 03 Testing hooks and context: renderHook, fake timers, stale snapshots 18 min 04 Test suites that scale: contracts, flake taxonomy, budgets 19 min

Concurrent React

Concurrency is interruptibility: Suspense boundaries shape loading, deferred values shed urgency, streaming SSR ships HTML in waves.

01 Suspense boundaries: designing what disappears together 17 min 02 useDeferredValue and transitions: priority is a second render 18 min 03 Streaming SSR and selective hydration: HTML in waves 18 min 04 React Compiler, honestly: automated memo with silent bailouts 17 min

Error handling and recovery

Error boundaries catch render crashes only: handlers, effects and promises escape them — recovery means reset keys, retries, partial UI.

01 Error boundaries: the class-only net and its four blind spots 17 min 02 Recovery and degradation: evict state, back off on retry, fail honestly 16 min 03 Errors outside render: the global net and the React 19 reporting pipeline 18 min

Accessibility in React

Semantics first, ARIA as a contract: focus is state you must manage, composite widgets follow WAI-ARIA patterns, a11y is testable in CI.

01 Semantics and roles: the accessibility tree does not see your divs 18 min 02 Focus management: focus is application state you own 18 min 03 ARIA composite widgets: APG patterns are keyboard contracts 19 min 04 Testing accessibility: layers that catch what axe cannot 17 min

React Server Components

RSC splits the tree by environment: server components render to a serializable payload, client islands hydrate — props cross a wire.

01 The RSC model: two environments, one tree 18 min 02 The serialization boundary: use client splits the module graph 18 min 03 RSC outside Next.js: the framework is the bundler 17 min

Design systems in React

A design system is an API: composition over configuration, headless logic + styled skins, polymorphic asChild, tokens as the contract.

01 Composition patterns: compound components over boolean props 18 min 02 Headless components: buy the state machine, own the skin 17 min 03 Polymorphic components: the as prop versus asChild and Slot 16 min 04 Design tokens and theming: the contract between design and code 18 min

Animations and interaction

Animate transform and opacity on the compositor; FLIP fakes layout animation, View Transitions snapshot the DOM, gestures need budgets.

01 The compositor and the frame budget: which properties are free 18 min 02 FLIP: layout animation without paying layout every frame 18 min 03 View Transitions and gestures: snapshots, springs, and seizing values mid-flight 19 min

React in production

Production React is operations: version migrations without rewrites, RUM wired to releases, profiling real users, incident postmortems. Solid here? The react-patterns track is the next step — the composition, state, and boundary patterns that keep large React codebases changeable.

01 React version migrations: the dependency audit is the project 18 min 02 RUM and field profiling: lab lies, the field decides 18 min 03 Performance regressions: the slow creep nobody ships on purpose 17 min 04 Incident postmortems: three production React failures, dissected 19 min

Build with this track

Guided projects that exercise what you learn here.

◆ Projects