Types of State
Understanding where state lives is the foundation of good frontend architecture.
Local state
Belongs to a single component. Not shared.
tsx
function Counter() {
const [count, setCount] = useState(0); // local
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}Global (client) state
Shared across many components. Managed by a store.
tsx
// auth, theme, shopping cart, notifications
const user = useAuthStore(s => s.user);
const theme = useThemeStore(s => s.theme);Server state
Data that lives on the server - fetched, cached, and synchronized.
tsx
// React Query / SWR handle this
const { data: posts, isLoading } = useQuery({
queryKey: ['posts'],
queryFn: fetchPosts,
});URL state
State encoded in the URL - shareable and bookmarkable.
tsx
// search filters, pagination, active tab
// /products?category=shoes&sort=price&page=2
const [searchParams, setSearchParams] = useSearchParams();
const category = searchParams.get('category');Where each belongs
| Type | Examples | Tool |
|---|---|---|
| Local | Modal open, form input, toggle | useState, useReducer |
| Global | Auth, theme, cart | Zustand, Jotai, Redux |
| Server | API data, lists, user profile | React Query, SWR |
| URL | Filters, pagination, tabs | useSearchParams, router |
One of the most common architecture mistakes is storing server state in a global store (Redux). React Query / SWR exist specifically to handle server state - let them do it.
updated
did you know it?