What is the difference between server state and client state, and why does conflating them cause bugs?
Show the full answer Hide the answer
What is being tested
Whether you can name the distinction that removes most frontend state complexity.
The three kinds
Server state. A cached copy of data owned elsewhere. Stale by default. It can change without the client knowing, must be refetched and invalidated, and needs loading and error states.
The correct model is a cache with a staleness policy, not a store.
Client state. Genuinely local UI concerns — is this panel open, what is in this unsent form, which tab is selected. Owned by the client, no synchronisation required.
URL state. Filters, pagination, selected item, search terms. Belongs in the URL because it should be shareable, bookmarkable and restorable by the back button. Putting it in memory breaks all three, and users notice.
Why conflating them causes bugs
Putting server state in a general-purpose store means hand-writing cache invalidation, loading states, refetch logic and staleness handling in application code — reimplementing a caching library, badly, in a place where the bugs are subtle.
The characteristic symptoms: data that is stale after another user changes it; two components showing different values for the same entity; a mutation that updates one view and not another; and a growing tangle of manual refresh calls.
The client believes it owns data it does not own, and every synchronisation bug follows from that.
The decisions that follow from separating them
- A staleness policy per data type. A product catalogue can be minutes stale; a cart cannot.
- Invalidation on mutation, so a change refreshes what it affects.
- Optimistic updates where the operation almost always succeeds, with a defined rollback — otherwise a failure leaves the interface lying.
- Offline behaviour, if required, which converts server state into a synchronisation problem with conflict resolution. A much larger undertaking, entered deliberately rather than drifted into.
What a strong answer adds
That URL state is the most commonly misplaced and the cheapest to fix — and that getting it right makes the product feel materially better, because links work and the back button behaves.