What is the difference between client state and server state?

Client state is data that lives entirely in the browser and is owned by the UI — it doesn't need to be synchronized with a backend. Server state is data that actually lives on a remote server/database; the client only holds a cached copy of it, which can go stale at any time.

| Aspect | Client state | Server state |
| --- | --- | --- |
| Ownership | Owned entirely by the UI | Owned by the backend/database; UI only has a cached copy |
| Examples | Form input values, modal open/closed, selected tab, theme, filters before submit | Fetched user profile, product list, comments, any REST/GraphQL response |
| Persistence | Usually reset on refresh (unless explicitly persisted) | Persists on the server regardless of client refreshes |
| Staleness | Never "stale" — it's the source of truth itself | Can become stale/out of date; needs refetching, caching, and invalidation |
| Sharing | Typically local to one component/feature | Often shared across many components/screens |
| Async concerns | None — synchronous updates via setState/reducers | Requires handling loading, error, retries, pagination, race conditions |
| Typical tools | useState, useReducer, Context, Redux/Zustand | React Query / TanStack Query, RTK Query, SWR, Apollo Client |

#### Why the distinction matters

Treating server state like client state (e.g., dumping a fetched API response into useState or a Redux slice and manually managing loading/error flags) reinvents caching, deduplication, background refetching, and invalidation by hand. Dedicated server-state libraries solve these problems out of the box:

     // Server state handled manually — lots of boilerplate to get right
     function Users() {
       const [users, setUsers] = useState([]);
       const [loading, setLoading] = useState(true);
       const [error, setError] = useState(null);

       useEffect(() => {
         fetch("/api/users")
           .then((res) => res.json())
           .then(setUsers)
           .catch(setError)
           .finally(() => setLoading(false));
       }, []);
       // ...
     }
     

     // Server state via React Query — caching, refetching, and status handled for you
     function Users() {
       const { data: users, isLoading, error } = useQuery({
         queryKey: ["users"],
         queryFn: () => fetch("/api/users").then((res) => res.json()),
       });
       // ...
     }
     

In short, use local state/Context/Redux for client state (UI-only concerns), and a data-fetching library like React Query, RTK Query, or SWR for server state (anything that mirrors data owned by a backend).