#React
85 posts
Lifting state up
The core pattern for two sibling components sharing the same data. When to lift, when not to, and the natural bridge into Chapter 12 useContext.
Lists and key
The pattern of mapping an array to components, the meaning of key, and concrete examples of how things break when you use the index as key.
Loading with Suspense and use()
Build streaming rendering with Suspense boundaries, plus `loading.tsx`, skeleton fallbacks, and the React 19 stable `use()` hook.
Migrating Old React Code
A guide to moving old-style code — Class components, Pages Router, Redux-only, fetch-on-mount — into this book's modern style.
Performance · Bundles · Web Vitals
Measuring and improving Core Web Vitals (LCP · INP · CLS). Lighthouse · bundle analysis · code splitting · RSC streaming · next/image · next/font · INP optimization.
Performance optimization (memo · useMemo · useCallback · and the React Compiler)
What memo / useMemo / useCallback do, the common misuses, and what changes and what stays the same once the React Compiler lands.
React 19 features in one place
Actions · useActionState · useFormStatus · useOptimistic · use() · React Compiler · ref as prop. The React 19 features scattered across Chapters 22~27 collected in one catalog.
Routing overview (React Router)
The concept of SPA routing, the basics of React Router v7, and a comparison with Part 4's Next.js App Router — all in one chapter.
Server Actions and forms
Handle mutations without API routes via Server Actions, and polish UX with React 19's `useActionState` · `useFormStatus` · `useOptimistic`. Plus the Part 4 closing mini-project (a guestbook).
Server Components vs Client Components
The differences between the two kinds of components, the precise meaning of the `use client` directive, the patterns for mixing them (server importing client / client receiving server children), and the props serialization constraint.
Setting up the environment (Node.js + Vite)
Install Node.js and pnpm, create your first React project with Vite, and bring up a dev server. Every example in this book runs on top of this environment.
Starting Next.js and the App Router
Create a Next.js 15 project and get the App Router's file-based routing and layout system into your hands. We cover the file conventions (page · layout · loading · error · not-found · route group) in one chapter.