This distinction, popularized by React Query, is fundamental to choosing the right state tool.
Server state (remote state) — data that originates on the server and is shared across users/sessions.
- Examples: user profile from an API, product list, blog posts.
- Characteristics: must be fetched asynchronously, can become stale, may be mutated by other users, needs loading/error states.
- Best managed by: React Query / TanStack Query, SWR, Apollo Client (for GraphQL).
Client state (UI state) — data that exists only in the browser, doesn't need to be persisted to a server.
- Examples: modal open/close, selected tab, form field values, theme preference.
- Characteristics: synchronous, always available, only one user cares about it.
- Best managed by:
useState, useReducer, Zustand, Jotai, or URL state.
💡 Most Redux codebases pre-2020 used Redux to manage server state (storing API responses). React Query eliminates this need — Redux becomes unnecessary for most apps once server state is handled properly.