13 · Frameworks & State
State management
Local, global, server state — and choosing the right tool.
Server state vs client state, and picking the right tool. A favorite "walk me through the trade-offs" topic.
Concepts
| Topic | Difficulty | Time | Tags | Best Resources |
|---|---|---|---|---|
| Client vs server state (the key distinction) | 🟡 | 45m | #concepts |
TanStack Query: overview ⭐ |
| Local component state & lifting | 🟢 | 30m | #basics #react |
react.dev ⭐ |
| Context as state (and its limits) | 🟡 | 45m | #react #performance |
react.dev ⭐ |
| Flux / unidirectional data flow | 🟡 | 45m | #concepts |
Redux: three principles ⭐ |
| Normalization | 🔴 | 1h | #patterns #caching |
Redux: normalizing state ⭐ |
| Derived state & selectors | 🟡 | 45m | #patterns |
Reselect ⭐ |
| Immutability & structural sharing | 🟡 | 45m | #patterns |
Immer ⭐ |
Client-state libraries
| Topic | Difficulty | Time | Tags | Best Resources |
|---|---|---|---|---|
| Redux & Redux Toolkit | 🟡 | 1.5h | #redux |
Redux Toolkit ⭐ |
| Zustand | 🟢 | 45m | #zustand |
Zustand ⭐ |
| Jotai (atomic) | 🟡 | 45m | #jotai #atoms |
Jotai ⭐ |
| Recoil | 🟡 | 45m | #recoil #atoms |
Recoil ⭐ |
| Signals | 🔴 | 1h | #signals #reactivity |
Preact signals ⭐ |
| MobX | 🟡 | 1h | #mobx #reactivity |
MobX ⭐ |
| XState (state machines) | 🔴 | 1h | #state-machine |
XState ⭐ |
Server-state & data
| Topic | Difficulty | Time | Tags | Best Resources |
|---|---|---|---|---|
| React Query / TanStack Query | 🔴 | 1.5h | #server-state #caching |
TanStack Query ⭐ |
| SWR | 🟡 | 45m | #server-state #caching |
SWR ⭐ |
| Apollo Client (GraphQL cache) | 🔴 | 1h | #graphql #caching |
Apollo Client ⭐ |
| RxJS & streams | 🔴 | 1.5h | #rxjs #streams |
RxJS ⭐ |
| Optimistic updates | 🔴 | 1h | #patterns #ux |
TanStack: optimistic ⭐ |
| Caching & invalidation strategies | 🔴 | 1h | #caching |
TanStack: caching ⭐ |
| Offline support & persistence | 🔴 | 1.5h | #offline #pwa |
web.dev: offline ⭐ |
| Undo/redo | 🟡 | 45m | #patterns |
Command pattern ⭐ |
❓ Rapid-fire state management interview questions
Real state-management questions asked at the SDE-2 / senior level. Answer out loud, then verify above.
- What's the difference between client state and server state?
- When do you need a state library vs Context?
- What problem does Redux solve? How does the flux pattern work?
- Redux vs Zustand vs Jotai — trade-offs?
- What is React Query / SWR and why use it?
- What are optimistic updates and how do you roll back?
- What is state normalization and why do it?
- How do you avoid unnecessary re-renders with Context?
- What are signals and how do they differ from React state?
- How do you persist state (localStorage/IndexedDB)?
- How do you handle cache invalidation?
- What is a selector and why memoize it (reselect)?
- How do you manage complex form state?
- What is a state machine (XState) and when is it useful?
- How do you sync state across browser tabs?
Related: 06-react · 12-networking · 17-interview-patterns
Missing something? Add a row.