Foundations & Mental Model
UI as a function of state, JSX & elements, reconciliation, and why render must be pure. Start →
React Deep Dive
A standalone, intermediate→advanced course on React 19. From the rendering model and reconciliation to hooks in depth, state and data flow, transitions and Suspense, Server Components and Actions, the React Compiler, and performance — taught through annotated code that shows exactly what React does and why.
What you’ll learn
Section titled “What you’ll learn”Hooks In Depth
useState, useEffect (and when not to), useRef, memoization & the compiler, and custom hooks. Learn →
State Management & Data Flow
Lifting state, composition, Context, useReducer, and external stores. Manage →
Concurrent React & Suspense
Transitions, useDeferredValue, Suspense & lazy, error boundaries, and the use() hook. Go concurrent →
React 19: Actions, RSC & Forms
Server Components, Actions & useActionState, useOptimistic & forms, and the React Compiler. Level up →
Performance & Patterns
Rendering performance, memoization in practice, composition patterns, and escape hatches. Optimize →
Tooling, Testing & Production
Vite & frameworks, testing with RTL, TypeScript with React, and the production ecosystem. Ship →
How React Works
Fiber and the work loop, lanes and the scheduler, reconciliation in depth, the commit phase and effect ordering, hydration and streaming — sourced from the React codebase and proven with tests. Go inside →
Reading AI-generated React
A reading order for React you did not write, a 25-entry catalog of the bugs AI assistants actually produce (each proven with real output), a review checklist, verification tools, and three worked reviews. Review →
Glossary
84 terms from element to cacheSignal, each linked to the lesson that teaches it. Look up →
How this course works
Section titled “How this course works”The model first, then the code
Every topic starts from a model — UI = f(state), how reconciliation decides what changes, why effects synchronize with the outside world — so React stops feeling like magic and starts feeling inevitable.
React 19, verified
Written against React 19 and checked against the official docs — Actions, use(), useActionState/useOptimistic, ref-as-prop, and the React Compiler are covered as they exist today, not as they were three years ago.
Design, not just syntax
Not “here’s useEffect” but “here’s why you probably don’t need it, and what to do instead.” You’ll reason about renders, dependencies, and performance with confidence.
Diagrams that explain
The render/commit phases, reconciliation, state-as-a-snapshot, effect timing, and Suspense as theme-aware Mermaid diagrams. Bilingual (English / ไทย) with saved quiz progress.