Client state is owned by the browser. Server state is a cached copy of data owned by a backend. They need different tools.
Client state is UI state, like an open modal, form drafts or a selected theme.
Server state is data like a product list. Your copy can go stale. It needs:
- loading and error states
- caching
- deduplication, so the same request is not sent twice
- refetching
For server state, use TanStack Query, SWR or your framework's data layer. Don't copy responses into useState or Redux by hand.
For client state, start with local useState. Lift state up when needed, and use context for shared values that change rarely. Reach for Zustand or Redux Toolkit when:
- lots of shared client state changes often
- many distant components update it
- you want selector-based subscriptions, middleware and devtools
Redux adds structure for large teams. Zustand is lighter.
- Client state is UI state owned by the browser.
- Server state is cached remote data that can go stale.
- Server-state tools handle caching, refetching and deduplication.
- Start with local state, lift it up, and use context for values that change rarely.
- Use Redux or Zustand for complex shared client state that changes often.