State Management Concepts
Every interactive application has data that changes — a counter incrementing, a form being filled out, a list of items loading from a server. This changing data is called state, and managing it well is one of the core challenges in frontend development.
Types of State
Not all state is created equal. Understanding the different types helps you choose the right solution:
Local state lives within a single component. A toggle button's on/off status or a form input's current value — these don't need to be shared elsewhere.
Shared state is needed by multiple components. When a shopping cart total appears in both the header and checkout page, that data must be accessible to both.
Server state comes from your backend — user profiles, product listings, order history. It needs fetching, caching, and synchronization with the server.
URL state lives in the browser's address bar. The current page, search filters, and pagination are often stored in the URL so users can bookmark or share links.
Local State Is Simple
Every framework makes local state straightforward:
// React
const [count, setCount] = useState(0);
// Vue
const count = ref(0);
// Svelte
let count = 0;
For data that only one component needs, local state is perfect. Don't overcomplicate it.
Shared State Gets Interesting
When multiple components need the same data, you have options:
Lifting state up: Move state to a common parent component and pass it down as props. Works well for small component trees.
Context or provide/inject: Share data with an entire subtree without passing props through every level. Good for theme settings, user authentication, or localization.
Global stores: Dedicated state management libraries for complex applications. React developers use Redux, Zustand, or Jotai. Vue has Pinia. Svelte has built-in stores. Angular uses services and NgRx.
Choosing the Right Approach
Start simple and add complexity only when needed:
| Situation | Solution |
|---|---|
| One component needs it | Local state |
| Parent and children share it | Lift state up |
| Distant components share it | Context or store |
| Complex state logic | Global store |
| Server data | Specialized library (React Query, SWR) |
The mistake many developers make is reaching for a global store too early. If you're passing props through two or three components, that's often fine. Global state adds indirection and complexity — use it when the benefits outweigh the costs.