What is state management on mobile?
State management is deciding where each piece of app data lives and how it updates. Local component state with hooks covers most of it; context shares state across a subtree; a store like Zustand or Redux handles global app state. The skill is picking the lightest tool that works.
Why it matters
Mishandled state is the source of most UI bugs — stale screens, data that does not update, props drilled through ten layers. On mobile, where screens persist and re-mount with navigation, getting state right keeps the app predictable. Over-engineering it is just as harmful as under-doing it.
What to learn
- Local state with
useStateanduseReducer - Lifting state up versus drilling props
- Context for cross-cutting state like theme and auth
- When global state is actually warranted
- Lightweight stores like Zustand
- Keeping server data out of global UI state
- Avoiding premature global state
Common pitfall
Reaching for a global store like Redux for everything on day one. Most state is local or belongs to a server cache, and a global store for trivial UI state adds boilerplate and indirection for no benefit. Start with local state and context, and introduce a store only when genuinely shared global state demands it.
Resources
Primary (free):
- React — Managing state · docs
- Zustand — Documentation · docs
- React — useReducer · docs
Practice
Build a feature with three layers of state: local state in a component, a shared auth or theme value via context, and one piece of genuinely global state in a small Zustand store. Justify why each piece lives where it does. Done when no state is more global than it needs to be.
Outcomes
- Manage local state with
useStateanduseReducer. - Share cross-cutting state with context.
- Use a lightweight store only for true global state.
- Avoid premature or over-global state.