Local state lives in one component (useState, ref) and is passed down via props. Use it for UI-only state: form fields, open/closed, hover. Global state is shared across many components: current user, theme, shopping cart, feature flags.

Add global state when prop drilling becomes painful (passing the same prop through many levels) or when multiple parts of the tree need the same data and you want a single source of truth. Do not globalize everything; start local and lift when needed.

Context (React) is good for cross-cutting, low-change data: theme, auth, locale. When context value changes, every consumer re-renders; avoid putting high-frequency updates (e.g. mouse position) in context.

Zustand, Redux, or similar: state lives in an external store; components subscribe to slices. Good when many components need the same data, updates are frequent, or you need middleware (logging, persistence). Zustand is minimal API; Redux has more structure and tooling.

Start with local state; add context for theme, auth, or locale; add a store when you have many consumers, complex update logic, or need devtools/persistence. One global store is enough for most apps; split by domain (user, cart, UI) not by component.

[Building Micro-Frontends](https://www.oreilly.com/library/view/building-micro-frontends/9781492082996/) for scaling state across teams and apps.