State management in React: when Redux, Zustand, and Context API actually fit

prevent unnecessary re-renders when mode hasn't changed const value = useMemo(() => ({ mode, toggleMode }), [mode, toggleMode]);

return ( <ThemeContext.Provider value={value}> {children} </ThemeContext.Provider> ); };

export const useTheme = () => { const context = useContext(ThemeContext); if (!context) throw new Error('useTheme must be used within a ThemeProvider'); return context; };

#### 3. Use Zustand for Client State with Fine-Grained Updates

Zustand provides a store with selector-based subscriptions without the boilerplate of Redux. It is ideal for client state that updates frequently or requires complex logic.

```typescript
// workspace-store.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface WorkspaceState {
  activeTabId: string | null;
  tabs: Array<{ id: string; title: string }>;
  setActiveTab: (id: string) => void;
  addTab: (title: string) => void;
  closeTab: (id: string) => void;
}

export const useWorkspaceStore = create<WorkspaceState>()(
  persist(
    (set, get) => ({
      activeTabId: null,
      tabs: [],
      setActiveTab: (id) => set({ activeTabId: id }),
      addTab: (title) => {
        const newTab = { id: crypto.randomUUID(), title };
        set((state) => ({
          tabs: [...state.tabs, newTab],
          activeTabId: newTab.id,
        }));
      },
      closeTab: (id) => {
        const state = get();
        const remainingTabs = state.tabs.filter((t) => t.id !== id);
        const nextActive =
          state.activeTabId === id
            ? remainingTabs[remainingTabs.length - 1]?.id ?? null
            : state.activeTabId;
        set({ tabs: remainingTabs, activeTabId: nextActive });
      },
    }),
    { name: 'workspace-storage' }
  )
);

// Component usage with selector
export const TabCount = () => {
  // Only re-renders when tab count changes
  const count = useWorkspaceStore((state) => state.tabs.length);
  return <span>Tabs: {count}</span>;
};

4. Deploy Redux Toolkit for Complex Async and Team Scale

Redux is warranted when applications require strict structure, audit trails, or complex middleware chains. RTK simplifies setup while maintaining predictability.

// dashboard-slice.ts
import { createSlice, createAsyncThunk, configureStore } from '@reduxjs/toolkit';
import type { PayloadAction } from '@reduxjs/toolkit';

interface MetricData {
  value: number;
  timestamp: number;
}

interface DashboardState {
  metrics: MetricData[];
  status: 'idle' | 'loading' | 'failed';
}

const initialState: DashboardState = {
  metrics: [],
  status: 'idle',
};

export const fetchMetrics = createAsyncThunk(
  'dashboard/fetchMetrics',
  async (_, { rejectWithValue }) => {
    try {
      const response = await fetch('/api/metrics');
      if (!response.ok) throw new Error('Network error');
      return response.json();
    } catch (error) {
      return rejectWithValue(error.message);
    }
  }
);

const dashboardSlice = createSlice({
  name: 'dashboard',
  initialState,
  reducers: {
    clearMetrics: (state) => {
      state.metrics = [];
      state.status = 'idle';
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchMetrics.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchMetrics.fulfilled, (state, action: PayloadAction<MetricData[]>) => {
        state.status = 'idle';
        state.metrics = action.payload;
      })
      .addCase(fetchMetrics.rejected, (state) => {
        state.status = 'failed';
      });
  },
});

export const { clearMetrics } = dashboardSlice.actions;
export const dashboardReducer = dashboardSlice.reducer;

export const store = configureStore({
  reducer: {
    dashboard: dashboardReducer,
  },
});

Pitfall Guide

1. The Context Cascade

   • Explanation: Using Context for state that updates frequently, such as form inputs or scroll position. This causes all consumers to re-render on every change.
   • Fix: Use local useState for form inputs. For global high-frequency state, use Zustand or Redux with selectors.

2. The Server State Mirage

   • Explanation: Storing API responses in Redux or Zustand. This requires manual caching, deduplication, and revalidation logic.
   • Fix: Use TanStack Query or SWR for server state. Keep client state libraries for UI-only data.

3. Zustand Sprawl

   • Explanation: As teams grow, Zustand's lack of enforced structure can lead to inconsistent patterns, making the codebase hard to maintain.
   • Fix: Establish strict conventions for store organization. If complexity exceeds a threshold, migrate to Redux for its structural guarantees.

4. Redux Boilerplate Anxiety

   • Explanation: Avoiding Redux due to legacy boilerplate concerns. Modern RTK significantly reduces setup complexity.
   • Fix: Evaluate RTK based on current capabilities. Use createSlice and createAsyncThunk for concise logic.

5. Selector Staleness

   • Explanation: Creating inline objects or functions in selectors, causing unnecessary re-renders due to reference inequality.
   • Fix: Return primitives from selectors or use useMemo/useCallback to stabilize references.

6. Context Splitting Neglect

   • Explanation: Placing multiple unrelated values in a single Context provider.
   • Fix: Split Contexts by domain. Separate ThemeContext from UserContext to isolate update propagation.

7. Ignoring Bundle Impact

   • Explanation: Adding state libraries without considering bundle size constraints.
   • Fix: Audit dependencies. Zustand is ~1.2kb; Redux is ~10.5kb. Choose based on performance budgets.

Production Bundle

Action Checklist

• Audit State Types: Categorize all state as server or client. Migrate server state to TanStack Query.
• Identify Update Frequency: Mark state as low-frequency (Context) or high-frequency (Store).
• Select Mechanism: Choose Context, Zustand, or Redux based on team size and complexity.
• Implement Selectors: Ensure Zustand/Redux components use selectors for fine-grained updates.
• Add DevTools: Integrate Redux DevTools or Zustand middleware for debugging.
• Test Re-renders: Use React DevTools Profiler to verify update isolation.
• Document Conventions: Establish guidelines for state organization and async handling.

Decision Matrix

Configuration Template

A robust Zustand store template with persistence and TypeScript support.

// store-template.ts
import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';

interface AppState {
  isLoading: boolean;
  error: string | null;
  setLoadState: (loading: boolean) => void;
  setError: (error: string | null) => void;
  reset: () => void;
}

export const useAppStore = create<AppState>()(
  persist(
    immer((set) => ({
      isLoading: false,
      error: null,
      setLoadState: (loading) => set({ isLoading: loading }),
      setError: (error) => set({ error }),
      reset: () => set({ isLoading: false, error: null }),
    })),
    {
      name: 'app-storage',
      storage: createJSONStorage(() => localStorage),
      partialize: (state) => ({ error: state.error }), // Persist only error
    }
  )
);

Quick Start Guide

1. Install Dependencies: npm install zustand @tanstack/react-query
2. Setup Query Client: Initialize QueryClient and wrap app with QueryClientProvider.
3. Create Stores: Define Zustand stores for client state using selectors.
4. Migrate Server State: Replace API calls in components with useQuery hooks.
5. Verify Performance: Profile re-renders and ensure updates are isolated.