{
  "id": 2175644,
  "title": "Manage State like a Pro: Frontend Edition",
  "url": "https://urgent.news/2026/08/20/manage-state-like-a-pro-frontend-edition",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-08-20T16:32:06.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/peterintech/manage-state-like-a-pro-frontend-edition-1id0"
  },
  "original_language": "en",
  "account": "Managing state in modern web applications requires a strategic approach beyond simply piling everything into global stores. The key lies in categorizing state into three distinct domains: Server State, URL State, and Client State. Each type has its own characteristics, ownership, and lifecycle, which must be respected to avoid common pitfalls like stale data, state blackouts, and bloated memory.\n\nServer State refers to data owned by a remote database, such as user profiles, product lists, or checkout carts. Unlike data within local stores, server state is asynchronous and shared across multiple users. Its challenges include staleness, caching, deduplication, and revalidation. When dealing with server state, it's crucial to treat it as borrowed temporary snapshots rather than permanent client data. Use specialized tools like TanStack Query, SWR, or Next.js Server Components with caching to manage server state effectively.\n\nURL State represents the navigation intent of a user, essentially the input parameters for a specific view or page. It encompasses elements like search queries, category filters, pagination numbers, active tabs, sorting directions, and selected view modes. URL state is shareable and persistent, making it ideal for creating linkable views that encapsulate the user's current state. By syncing UI controls to URL search parameters, developers can leverage the web's native ability to share and bookmark these views. Proper management of URL state involves directly syncing UI elements with search parameters, treating the URL as the single source of truth for view parameters.\n\nClient State, on the other hand, is purely local and temporary UI memory. It doesn't originate from a database and doesn't need to survive a page share or browser refresh. This category includes ephemeral UI elements like modal open/close toggles, hover states, active tab animations, form input drafts, dark mode toggles, and multi-step wizard progress. Client state should be managed closely to where it's used, employing local state hooks like useState or useReducer. For client state that needs to be accessed globally across unrelated components, a lightweight client store like Zustand can be employed.\n\nTo determine where a piece of state belongs, developers should ask three sequential questions: Does it come from an API/Database (Server State), Should this view be shareable and survive a page refresh (URL State), and How should it be managed (Client State)? By categorizing state in this manner and applying the appropriate tools and patterns, developers can build fast, resilient interfaces that maintain a clean separation of concerns and avoid common state management mistakes.",
  "summary": "AI models write code better and faster than devs, but what AI cannot do reliably for your specific product is make the fundamental system design decisions like : \"Where should this piece of data actually live, who owns it, and what happens to the user experience when the network fails, the user refreshes, or a link is shared?\" The modern frontend engineer’s primary value has shifted from writing…",
  "key_points": [
    "Server State is data from remote databases like user profiles and product lists",
    "URL State represents user navigation intent and is shareable/persistent",
    "Client State is temporary UI memory managed locally, not database-derived"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}