Server state is different
🏠The everyday picture
The price list pinned in a shop is a copy of head office's prices. It might be out of date; someone else might have changed the real prices; you need to fetch a fresh copy now and then. Your own notes are different: only you change them.
📘What it really is
- Server state is data that really lives on a server (Level 4's backend, Level 5's database). What the browser has is only a copy that:
- takes time to load, and can fail;
- may be changed by other people, becoming stale;
- may be needed by many screens at once;
-
should be refreshed sometimes, and after you change it.
-
Managing all that with
useStateanduseEffectby hand is long and buggy (Module 34, Lesson 5). -
Tools like TanStack Query (React Query) handle it: loading and error states, caching, sharing between components, refreshing and retrying. Module 38 uses it.
-
After moving server data to such a tool, very little global state is usually left: the signed-in user, the theme, perhaps a cart.
🖱️Try it
In your Lesson 1 list, mark everything that will come from the backend once you have one (Module 41 onward). Note which of your Context or reducer state would move into a data-fetching tool.
✅Quick check
Why is a list of enquiries from the server different from "is the menu open"?
Show the answer
It's a copy of data owned by the server: it loads slowly, can fail, can be changed by others and go stale.
What does a tool like TanStack Query take care of?
Show the answer
Loading, errors, caching, sharing data between components, refreshing and retrying.