State Management
State management is how your application tracks and updates data that changes over time — whether a dropdown is open, what items are in a shopping cart, or which user is logged in. Managing state correctly ensures your UI stays in sync with your data. Getting it wrong causes bugs where the screen shows stale or incorrect information.
Example
State is the data your app remembers at any given moment. Managing it well is the difference between an app that feels smooth and one that feels buggy.
Types of State
| Type | Scope | Example |
|---|---|---|
| Local state | Single component | Is this dropdown open? |
| Shared state | Multiple components | Current user info |
| Server state | Backend data | List of products |
| URL state | Browser URL | Current page, search filters |
State in React
React's core mechanism for state:
const [count, setCount] = useState(0)
// count = current value
// setCount = function to update it
When setCount is called, React re-renders the component with the new value.
Common State Mistakes
- Stale state — UI shows old data after changes
- Prop drilling — Passing state through many component layers
- Over-managing — Putting everything in global state when local would work
- Not syncing — Local state diverges from server data
State Management for Vibe Coders
Start simple and add complexity only when needed:
- useState — For component-specific data
- Context — For sharing state across a few components
- Server state libraries — For data from APIs (React Query, SWR)
- Global state — Only if you genuinely need app-wide shared data
AI generates state management code well. Just describe what data changes and where it's used — AI picks the right pattern.
Emergent — An agentic vibe-coding platform that builds production-ready apps