Default to local
State should live as close to where it is used as possible. Local state inside a component is easy to reason about, disposes itself when the component unmounts, and never leaks into unrelated screens.
- Local state is scoped, so changes cannot surprise far away code.
- It is cleaned up automatically with the component.
- It needs no extra wiring or library.
When to go global
A global store is justified only when genuinely shared state must be read or written by many components that are far apart in the tree.
- Use it for cross cutting concerns like the signed in user or theme.
- Avoid putting form fields or a single screen toggle in it.
- Remember that server data usually belongs in a query cache, not a global store.
The cost of going too global
Putting everything in one store couples unrelated features, makes changes ripple widely, and turns the store into a junk drawer. Prefer lifting state only to the nearest common ancestor that needs it, not all the way to the top.
Key idea
Keep state local by default and lift it to a global store only when distant components truly share it, lifting just to the nearest common ancestor.