What is it?
State lives somewhere. The closer to where it's used, the better. When two distant components need the same state, you have three options: lift it up (move to a common ancestor), Context (avoid prop drilling), or a state library (Zustand, Redux Toolkit, Jotai). Each has a sweet spot.
Why it matters
"Where does this state live?" is the most common architectural question in any React app. Get it wrong early and refactoring it later is painful. Hiring panels probe this thinking — they ask about a feature and listen for "I'd put state here, lift this prop, and skip Context because…"
What to learn
- Lifting state up: when prop drilling is the right answer
useContext+createContextfor app-wide values (theme, user, locale)- Why naive Context re-renders everything and how to scope it
- State libraries: Zustand (small + simple), Redux Toolkit (large teams), Jotai (atomic)
- Server state vs client state — the distinction TanStack Query made famous
- The "co-locate state" rule: keep it as close to its consumers as possible
Common pitfall
Reaching for Context (or Redux) before you've tried lifting state. If state is shared by two components, lift to their common parent. Context is for values consumed by many components in many places (theme, auth, locale) — not as a "global state escape hatch."
Resources
Primary (free):
- React docs — Managing State · docs
- TkDodo — Context vs state libraries · article
- Zustand docs · docs
- TanStack Query — Why server state · docs
Practice
Build a tiny e-commerce cart: products list, add-to-cart button, cart icon in the nav, cart page. First implement with lifted state (parent holds the cart). Then refactor to Context. Then refactor to Zustand. Note which version felt right at which size. Done when you have a gut answer to "is this Context-worthy?"
Outcomes
- Lift state up correctly when two components share data.
- Use Context for values that change rarely and are consumed widely.
- Decide between Context, Zustand, and Redux Toolkit with real reasons.
- Distinguish server state from client state and pick the right tool.