When State Was Just One Word

The Redux-for-everything era and what it actually cost: every endpoint duplicating loading/error/data slices, hand-rolled caching, mutation sync across screens, and remote data re-rendering local UI on every keystroke. The split between server state and client state is the response.

Server state in five properties (remote, async, eventually consistent, shared, persistent) and the six-move cycle every cache layer runs: fetch, cache, serve, revalidate, mutate, invalidate. See what hand-rolling each of those per endpoint costs.

Server State in Practice

Walk through two recurring server-state cases in TanStack Query: a cached users list feeding three screens via a shared queryKey, and an optimistic role change with cancelQueries, snapshot, rollback, and invalidate. Both reuse the six moves from Section 2.

Client state in three properties (locally owned, synchronous, per-device), the four kinds it actually covers (UI, drafts, preferences, view/selection), and the five-rung scoping ladder for placing it. Plus the three things that look like client state but shouldn't live there.

Client State in Practice

Code for each rung: useState first, lifting to a parent next, useReducer when transitions matter, Context's re-render trap, Zustand's selector model with persist middleware, and nuqs for URL state that survives refresh.

Choosing Between Libraries

A side-by-side of server-state libraries (TanStack Query, SWR, RTK Query, Relay) and client-state libraries (Zustand, Jotai, Valtio, useState + useContext, useReducer). The pick within a column is taste. The split is the part that doesn't change when libraries do.

Home
Tutorials
React Client And Server State

Indie Dev ToolkitPart 3 of 9

Chapter 2: Modern Frontend Development with React

React Client And Server State

Name: React Client And Server State
Author: Vu Nguyen

Vu Nguyen

Lead Engineer, NAB - Apr 19, 2026

This is Part 3 of the Modern Frontend Development series. There used to be one place called 'state' where everything went: API responses, modals, form drafts, theme, all sharing the same store. Once server state and client state emerged as separate concepts, the tools and patterns on each side became much clearer.

You'll see how server state and client state get handled in real-world scenarios, alongside popular libraries like TanStack Query and Zustand. The point is to help you pick the right library for each case and understand why, based on the actual characteristics of server vs client state, not on habit or tech hype.

Prerequisites

Comfortable building React components with hooks (useState, useEffect)
Worked with at least one data-fetching pattern (fetch + useEffect, SWR, or TanStack Query)
Part 2 (Frontend Architecture) recommended as the server/client boundary builds on architectural thinking

Server vs Client State

About the author

Vu Nguyen

NAB, Lead Engineer

I'm Vu, a Lead Engineer at NAB (National Australia Bank). I started on Home Lending products and now lead a team building products for HICAPS, Australia's largest point of sale claiming service for private health insurance. Before NAB, I worked at startups and across a range of teams and stacks.

Upskills is where I share practical, real-world knowledge to help others build and maintain projects better. Beyond tutorials, more content is coming: project showcases, interview prep, and AI tools as resources for your learning journey. I'm excited to share what I've learned and keep learning together as we build cool things.

From the Upskills newsletter

Hope you liked React Client And Server State. Want the next one in your inbox?

Practical web development deep-dives, every other week, written by an engineer who ships them. No fluff, no hot takes.

Real-world, production-grade examples
No spam, ever
Unsubscribe in one click

We respect your privacy. Unsubscribe anytime.

Home
Tutorials
React Client And Server State

Indie Dev ToolkitPart 3 of 9

Chapter 2: Modern Frontend Development with React

React Client And Server State

Vu Nguyen

Lead Engineer, NAB - Apr 19, 2026

Prerequisites

Comfortable building React components with hooks (useState, useEffect)
Worked with at least one data-fetching pattern (fetch + useEffect, SWR, or TanStack Query)
Part 2 (Frontend Architecture) recommended as the server/client boundary builds on architectural thinking

Server vs Client State

About the author

Vu Nguyen

NAB, Lead Engineer

From the Upskills newsletter

Hope you liked React Client And Server State. Want the next one in your inbox?

Practical web development deep-dives, every other week, written by an engineer who ships them. No fluff, no hot takes.

Real-world, production-grade examples
No spam, ever
Unsubscribe in one click

We respect your privacy. Unsubscribe anytime.