guarantees, complex middleware chains, or large-team architectural constraints.

Core Solution

Modern React state architecture should follow a hybrid separation of concerns pattern. Client UI state, server data, and static configuration must be isolated to prevent cross-contamination and unnecessary re-renders.

Technical Implementation: Zustand Store Architecture

Zustand eliminates provider wrapping and leverages hook-based selectors for precise subscription. The store is created outside the component tree, enabling direct access without context overhead.

import { create } from 'zustand';

// Tạo store
const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));

// Dùng trong Component
function BearCounter() {
  const bears = useBearStore((state) => state.bears);
  return <h1>{bears} bears</h1>;
}

function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation);
  return <button onClick={increasePopulation}>Add bear</button>;
}

Architecture Decisions

1. Selector Granularity: Always subscribe to specific state slices (state.bears) rather than the entire store object. This leverages Zustand's internal equality checks to prevent unnecessary component updates.
2. Async Handling: Actions can directly perform fetch/axios calls and update state via set(). No thunk/saga middleware is required, reducing architectural complexity.
3. TypeScript Integration: Define explicit interfaces for state and actions to enforce type safety across the store boundary.
4. Hybrid Pattern:
   • Context API → Theme, Auth, i18n (static/low-frequency)
   • Zustand → UI state, form data, local caches (dynamic/high-frequency)
   • React Query / SWR → Server state, API responses, pagination
   • Redux Toolkit → Complex business rules, audit trails, time-travel debugging requirements

Pitfall Guide

1. Context API Re-render Trap: Using Context for frequently changing state causes all consuming components to re-render. Best Practice: Restrict Context to static/infrequent values. For dynamic data, migrate to Zustand or implement memoized context values with useMemo.
2. Zustand Convention Drift: Zustand's flexibility lacks enforced structure. In large teams, stores can become unmaintainable "god objects". Best Practice: Enforce strict file structure, separate state definitions from actions, and use TypeScript interfaces to bound store shape.
3. Redux Boilerplate Misconception: Avoiding Redux due to legacy overhead. Best Practice: Always use Redux Toolkit (RTK). createSlice and Immer eliminate 90% of legacy boilerplate while preserving predictability and DevTools integration.
4. Mixing Server & Client State: Storing API responses in Zustand/Redux instead of dedicated data-fetching libraries. Best Practice: Use React Query or SWR for server state. Reserve Zustand/Redux strictly for client UI state to avoid cache invalidation conflicts and unnecessary re-renders.
5. Over-Subscribing in Zustand: Selecting entire state objects instead of specific slices. Best Practice: Always use granular selectors useStore(state => state.specificValue). Destructuring the store object inside the component breaks selector optimization and triggers full re-renders.
6. Ignoring DevTools Setup: Assuming lightweight libraries lack debugging capabilities. Best Practice: Explicitly enable Zustand's devtools middleware or Redux DevTools for RTK. Traceability is non-negotiable in production environments.

Deliverables

• 📐 State Management Architecture Blueprint: Decision tree mapping application scale, team size, and update frequency to the optimal state library. Includes hybrid architecture diagrams and data flow boundaries.
• ✅ Pre-Flight Validation Checklist: 12-point audit for state layer selection (bundle constraints, re-render tolerance, debugging requirements, async complexity, team conventions, TypeScript strictness).
• ⚙️ Configuration Templates: Production-ready starter files including:
  • Zustand store with TypeScript interfaces, devtools middleware, and selector patterns
  • Redux Toolkit store with configureStore, createSlice, and Immer integration
  • Context Provider wrapper with memoized value optimization and fallback boundaries