State shape: multiple-choice review
Multiple-choice synthesis across the state-shape unit — derived state, server cache vs client state, colocation, URL state, and normalization tradeoffs.
Six questions that cut across the whole unit. Each mirrors a decision you make before reaching for any state library — not a definition to recite, but a shape to choose under real constraints.
Confirm you can connect the unit’s spine: derive what is derivable, separate server cache from client state, colocate at the lowest reader, push shareable view-state to the URL, and normalize relational data only when it is mutated.
A products list is fetched from an API and read by three sibling components on the same screen. What is the correct shape?
A count badge reads '127' while the list shows 9 rows; count lives in useState next to the results array. What is the root cause and the senior fix?
A tooltip's open/closed boolean is stored in the root app store 'so it is available everywhere'. Why is this the wrong shape?
Filters and the open detail id are stored only in useState. A copied link opens an empty default view for a teammate, and refreshing also resets everything. What shape was missed?
A client-side editor holds threads, posts, and users nested as the API returned them, and users get renamed constantly. After a rename, some views still show the old name. Why, and what shape fixes it?
A team stores selectedUser as the full user object in state. After an edit elsewhere updates that user, the selection still shows the old fields. What is the shape lesson?
The through-line of the unit is one decision tree: if a value is derivable (count, the selected object), do not store it — compute it during render or join it from the id. If it is state, ask who owns it — server-fetched data is cache (React Query/SWR), client view-state that is shareable goes in the URL, and the rest colocates at the lowest common ancestor of its readers to keep the re-render blast radius small. Normalize relational client data into a byId map only when you mutate it. Now when you see any of the distractors above in a real PR — a derived value stored alongside its source, fetched data in a Redux slice, a single-reader flag at the root, a snapshotted object that should be a joined id — you know the shape name, the failure mode it causes, and the structural fix that removes it.
Something unclear?
Ask a question about this lesson. Questions are anonymous and go straight to the author to make the lesson better.