Part 30: State Management Architecture: Local vs Global vs Server State

One of the most common mistakes in React development is treating all state the same. In modern enterprise React architecture, state is divided into three distinct categories:

1. The Three State Pillars

                     [ REACT STATE PILLARS ]
                                │
       ┌────────────────────────┼────────────────────────┐
       ▼                        ▼                        ▼
[ Local UI State ]      [ Global Client State ]   [ Server Cache State ]
- Modals, dropdowns     - Theme (Dark/Light)      - REST / GraphQL data
- Form inputs           - Authenticated user      - Pagination
- Accordion open/close  - Sidebar collapse        - Background refetching
(Tool: useState)        (Tool: Zustand/Redux)     (Tool: React Query)

2. Detailed Comparison

A. Local Component UI State

• Characteristics: Only relevant to one component or a parent and its immediate children.
• Best Tool: Built-in useState and useReducer.
• Example: Is this specific dropdown open? What is typed in this text input right now?

B. Global Client-Side State

• Characteristics: Ephemeral state needed across disconnected parts of the app, originating entirely on the client.
• Best Tools: Zustand, Redux Toolkit, or React Context.
• Example: Active theme preference, shopping cart badge count, sidebar expansion.

C. Server State (Remote Data)

• Characteristics: Data that originates from an external server/database. It is asynchronous, shared across many users, and can become stale over time.
• Best Tools: TanStack React Query or RTK Query.
• Example: List of articles, user profile details, database comments.

Architecture Insight: Using Redux to store fetched server data is now considered an anti-pattern. Dedicated server-state tools like React Query handle caching, deduplication, and refetching automatically with zero boilerplate!

Key Takeaways

• Do not store everything in a single global Redux store.
• Keep local state local with useState.
• Use lightweight stores (Zustand) for true client-side global state.
• Use dedicated cache libraries (React Query) for server data.

In Part 31, we will dive into Modern Redux Toolkit (RTK)!