The Core of the Application
State management remains one of the most challenging aspects of building modern web applications. Whether you’re using React, Vue, Svelte, or vanilla Javascript, understanding how data flows through your app is critical for maintaining a scalable codebase.
Global vs Local State
One of the most common mistakes developers make is throwing everything into a global store (like Redux or Zustand).
- Local State: Data that only a single component (or its immediate children) needs to know about. Examples: The “open/closed” toggle of a dropdown menu, or the current value of a text input.
- Global State: Data that needs to be accessed and mutated by many different, disconnected parts of the application. Examples: The current logged-in user, global theme preferences (dark/light mode), or items in a shopping cart.
The Trend Toward Server State
Historically, we mixed UI state and Server data in our global stores. Today, tools like React Query, SWR, and Apollo manage the complexities of caching, deduping, and re-fetching server data automatically.
// Using tools like SWR makes data fetching declarative
function Profile() {
const { data, error, isLoading } = useSWR('/api/user', fetcher)
if (error) return <div>failed to load</div>
if (isLoading) return <div>loading...</div>
return <div>hello {data.name}!</div>
}By explicitly separating “Server State” from “UI State”, our frontend architectures become drastically simpler and much more resilient to bugs.
