#React
85 posts
React State Management in Depth #6: Which Tool, When — a Decision Guide
A single decision flow tying together the built-in tools, TanStack Query, Zustand, Jotai, and Redux Toolkit. The series wrap-up: what to reach for in which situation, and the common traps.
React State Management in Depth #5: Redux Toolkit and the Legacy Context
Redux ruled an era and still lives in many codebases. We cover it in its currently recommended form, Redux Toolkit: slices, the store, useSelector, and where it stands in a new project.
React State Management in Depth #4: Jotai and the Atom Model
Jotai takes a bottom-up approach, breaking state into small atoms and composing them instead of using one store. A walkthrough of atoms, derived atoms, how useAtom behaves, and how it differs from Zustand.
React State Management in Depth #3: Lightweight Client State with Zustand
Share global client state with no Provider and minimal boilerplate using Zustand. Store creation, re-render optimization with selectors, and the persist middleware.
React State Management in Depth #2: Server State with TanStack Query
Move the data fetching you wrote with useEffect and useState over to TanStack Query, and caching, refetching, and loading and error handling all come for free. A walkthrough of the core of useQuery and useMutation.
React State Management in Depth #1: Client State vs Server State
Where useState alone starts to fall short, and a mental model for telling client state apart from server state. This is the starting point for choosing a state management tool.
Build an Online Shop with Next.js #5: Order Confirmation and Deployment
Close the user flow with an order confirmation page and deploy to Vercel to put the shop on the real internet. We wrap up by examining the limits of in-memory storage and exactly what needs fixing before this could become a production service.
Build an Online Shop with Next.js #4: Checkout and Payment Simulation
Create orders with Server Actions and simulate success/failure with a fake payment gateway. We also cover practical patterns for handling form state with useActionState and useFormStatus.
Build an Online Shop with Next.js #3: Shopping Cart
Manage shopping cart state with a client Context and localStorage. We cover a persistent cart that survives refresh, quantity changes, total calculation, and a hydration-safe pattern.
Build an Online Shop with Next.js #2: Product Catalog
Build the product list and detail pages with Server Components, add a category filter with searchParams, and cover next/image, generateStaticParams, and notFound in one pass.
Build an Online Shop with Next.js #1: Getting Started and Design
Build an online shop from scratch with the Next.js App Router. The first post covers requirements, tech decisions, route structure, the product data model, and project setup.
React book now available free in full — React: From Basics to Next.js , TypeScript , Fullstack
From React basics to Next.js, TypeScript, and fullstack, this 35-chapter React book is free to read in full on the site.