Local vs global state

Local state lives inside a component or small subtree: open flags, hover, draft field focus, transient animation. Global state coordinates distant consumers: authenticated user profile, theme, shopping cart, feature flags shared across routes.

| Signal | Prefer local | Prefer global | |--------|--------------|---------------| | Consumers | One component | Many distant trees | | Lifetime | Mount/unmount | App session or longer | | Debugging | Component scope | Needs time-travel or logging | | URL fit | Ephemeral UI | Shareable or bookmarkable → consider URL |

Lift state up only when a sibling needs the same value. Context can replace a store for medium-scope sharing without Redux ceremony — but watch re-render breadth.

					// Local: only this dropdown cares
function Menu() {
  const [open, setOpen] = useState(false);
  return <button onClick={() => setOpen(!open)}>Toggle</button>;
}
				

On interviews: justify why a dropdown open flag should not live in Redux.

Common pitfalls: global store for every `useState`, prop drilling ten levels when context fits, and context that re-renders the whole tree on any change.

The trade-off is simplicity near the owner versus coordination cost at scale.

Checklist:

• Default local; promote intentionally.
• Use URL for shareable navigation state.
• Context for medium scope with stable splits.
• Global store for cross-route domain coordination.