All chapters
Every chapter of Modern React SPA, free to read. The 🧠 Under the hood expert subsections and hands-on labs are reserved for the book.
React Evolution at a Glance (v15 → v18)
React's history at a glance — v15, v16 (Fiber), v17, v18 — what carried forward into 19.2, and what got deprecated.
Read →
What's New in React 19.2
Every API and behavior change between React 19.0 and 19.2 — Compiler, Actions, use(), metadata, asset loading.
Read →
Modern Hooks Deep Dive
A deep look at the five always-needed React hooks, useTransition / useDeferredValue, useSyncExternalStore, custom hook patterns, and the anti-patterns the React Compiler will not save you from.
Read →
Component Architecture for SPAs
Component architecture for modern React SPAs — what replaced Container / Presentational, compound-component slots, error boundaries, and where to place Suspense in a real dashboard tree.
Read →
🔁 Chapter 5 · Routing in 2026 — Two Flavours
Picking between React Router v7 and TanStack Router in 2026 — file-based vs config-based, code-splitting at the route boundary, and auth-guarded routes.
Read →
📝 Chapter 6 · Forms Done Right
Forms in modern React — React Hook Form vs TanStack Form vs native <form action>, Zod/Valibot schema validation, optimistic updates, multi-step wizards, and accessibility.
Read →
shadcn/ui Integration
shadcn/ui on React 19.2 + Vite — the copy-don't-install philosophy, CLI setup, Radix primitives, theming with CSS variables, and TanStack Table integration.
Read →
Icons, Tailwind & CSS Customization
Icons, Tailwind CSS v4, and design tokens for React 19.2 SPAs — icon library landscape, SVG delivery, CSS variables, tailwind-merge, dark mode, container queries.
Read →
Layouts — From CSS Flexbox/Grid to Dockable Workspaces
Modern CSS layouts for React — Flexbox, Grid, container queries, and JS-driven dockable workspaces (flexlayout-react, react-grid-layout).
Read →
Desktop & Shell UIs with Blueprint.js
Blueprint.js for desktop-style React SPAs — when it fits, setup on Vite + React 19.2, core components, theming, and the hybrid Blueprint + shadcn pattern.
Read →
Building a Component Library (with Storybook)
Building a React 19.2 component library — when it's worth it, package.json anatomy, Vite library mode, Storybook 9, Changesets publishing.
Read →
The Four Kinds of State
Every value in a React SPA belongs to one of four kinds of state — local, global, server cache, or URL. A decision flowchart that ends the 'which library should I use' debate.
Read →
Global State — Zustand, Jotai, Recoil, Redux Toolkit
Picking a global-state library for React 19 SPAs — Zustand, Jotai, Recoil, Redux Toolkit. Selectors, render storms, the 7-question checklist, and why useContext is rarely the answer.
Read →
Server State — TanStack Query (React Query)
TanStack Query (React Query) for server state in React 19.2 — cache-key-as-contract, optimistic mutations, prefetching, devtools, and pairing with Zustand.
Read →
URL as State
URL as state in React — typed search params with nuqs or TanStack Router, shareable filter UIs that survive reload, and multi-tab persistence.
Read →
The Bundler Landscape in 2026
The 2026 React bundler landscape — Vite, Bun, Parcel, Rspack, Turbopack, esbuild — what each is for, and when (not) to switch.
Read →
Vite Deep Dive
Vite for React 19.2 — dev-server internals, Rollup production builds, plugins, env vars, path aliases, SVG modes, SSR/SSG mode, and debugging Vite itself.
Read →
Bun & Deno — New JavaScript Runtimes for React SPAs
Bun and Deno for React SPAs in 2026 — runtime differences from Node.js, side-by-side benchmarks, and a migration playbook.
Read →
Monorepo Configuration — Workspaces, Turborepo, Nx, with a Bun focus
Monorepo configuration for React projects — npm/pnpm/Bun/Yarn workspaces, Turborepo vs Nx, CI affected-only builds, and Changesets versioning.
Read →
Parcel, Rspack, Turbopack — when they fit
Parcel, Rspack, Turbopack — the narrow situations where each is a better fit than Vite, and an honest take on when not to switch.
Read →
Migrating from CRA / Webpack to Vite
Migrating a CRA or Webpack 4 SPA to Vite — pre-flight audit, step-by-step migration script, Jest-to-Vitest, and a 1,400-file real-world case study.
Read →
The SSG Spectrum
Pure SPA, SSG, SSR, ISR — the rendering spectrum for React in 2026, and how to pick per-page based on SEO, TTI, build time, and data dynamism.
Read →
SSG Tools for React
Picking an SSG for React in 2026 — Astro, Next.js static export, Vite SSG, Gatsby today, smaller players, with a clear picker.
Read →
Hybrid — SPA Shell + Pre-rendered Pages
The most common real-world React deployment shape — pre-rendered marketing at /, SPA at /app/*. Shared design system, deployment, and routing handoff.
Read →
Architecting a Multi-Team SPA
Architecting a multi-team React SPA — monorepo vs polyrepo at the organisational level, shared design systems as packages, and versioning strategies for shared code.
Read →
Module Federation in Depth
Module Federation for React 19.2 — host/remote/shared scope, Vite + Rspack setups, runtime vs build-time, sharing React/router/store, and the six failure modes you will hit.
Read →
Running Different React Versions Together
Mixed React-version SPAs — why they exist, four isolation strategies, sharing state across React trees, and what breaks across major versions.
Read →
Enterprise Concerns
Enterprise React SPA concerns — OIDC / BFF auth patterns, multi-tenancy with per-tenant theming and feature flags, i18n at scale, and accessibility compliance pipelines.
Read →
State Management Complexity at Scale
State at scale — per-remote stores vs shared store in federated SPAs, cache coherence across micro-frontends, and the shadow Redux anti-pattern.
Read →
The Performance Budget
Defining and enforcing a performance budget for React SPAs — Core Web Vitals (INP, LCP, CLS), CI gates that block regressions, and RUM vs lab telemetry.
Read →
Bundle Optimization
Bundle optimization for React 19.2 — reading the bundle visualizer, route-level code-splitting, dependency cost analysis, and replacing heavy libraries.
Read →
Runtime Performance
Runtime performance for React 19.2 SPAs — DevTools Profiler, what the compiler optimises, list virtualization, avoiding render storms, and web workers for CPU-bound work.
Read →
Network Performance
Network performance for React SPAs — HTTP/3 awareness, React 19.2 resource hints (preload, preinit), image strategy, and service workers for offline-first.
Read →
Debugging Strategies
Debugging React 19.2 SPAs — React DevTools (Components + Profiler), TanStack Query Devtools, state-store devtools, production source maps, and Sentry / Datadog RUM.
Read →
Hard Bugs and How to Find Them
The five hardest React SPA bug classes — stale closures, hydration mismatches, memory leaks, render-loop traps, and race conditions — with debugging recipes.
Read →
Testing Modern React SPAs — the Full Pyramid
Testing modern React 19.2 SPAs across the pyramid — Vitest, Jest migration, React Testing Library, Playwright, visual regression with Chromatic, and Storybook play functions.
Read →
Delivery Pipelines
Delivery pipelines for React SPAs — GitHub Actions matrix for Node + Bun + Deno, preview deploys on Vercel / Netlify / Cloudflare Pages, OpenFeature flags, and SPA canary releases.
Read →