The State Classification Framework

Before picking a tool, classify each piece of state in your app:

1. UI State (Local, Ephemeral)

State that exists only in the component tree and disappears on unmount.

Examples: modal open/closed, form input values, hover state, scroll position, which accordion is expanded

Right tool: useState, useReducer

Wrong tool: Any global state library. If you're putting isModalOpen in Zustand, you've gone too far.

2. Client State (Global, Synchronous)

State that's shared across components but doesn't come from a server. It's "owned" by the client.

Examples: theme preference, sidebar collapsed, selected items, shopping cart, notification queue, UI filters

Right tool: Zustand or Jotai

If your client state is...	Use
One big interconnected object (dashboard state, complex forms)	Zustand — one store, slice pattern
Many independent pieces (theme, locale, sidebar, each widget's state)	Jotai — one atom per concern
Need cross-component actions (add to cart from any component)	Zustand — actions live in the store
Need derived values that depend on multiple inputs	Jotai — derived atoms are automatic
Need persistence (localStorage, IndexedDB)	Either — both have persistence middleware
Need undo/redo	Zustand — snapshot-based undo is simpler with a single store

3. Server State (Remote, Async, Cached)

State that's a snapshot of data living on a server. Needs fetching, caching, background updates, and invalidation.

Examples: user profile, project list, API responses, search results, paginated data

Right tool: React Query (TanStack Query)

Wrong tool: Zustand/Jotai for server data. You'll end up rebuilding caching, stale detection, and background refetching — which React Query already does.

4. URL State

State that should be reflected in the URL so it's shareable and bookmarkable.

Included with State Management Patterns

Ready for the complete State Management Patterns?