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 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.