Frontend
8 min read
State Management in React: Choosing the Right Tool
A practical way to decide between local state, URL state, server state, and global stores.
ReactStateUIArchitecture
State management feels complicated when every kind of state is treated the same. The first step is naming what kind of state you have.
Local UI State
Use component state for values that only matter to one component or a small nearby group: open menus, active tabs, form drafts, and small interaction details.
URL State
Filters, pagination, search queries, and selected views often belong in the URL because users expect to share, refresh, and return to them.
Server State
Data loaded from an API has its own lifecycle: loading, caching, invalidation, refetching, and errors. Tools like TanStack Query are designed for that shape.
- Do not put fetched server data in a global store by default.
- Keep form drafts close to the form.
- Use URL state when the state should survive refresh or be shareable.
- Reach for a global store when many distant components need the same client-owned state.