State Management Patterns

When to Use External State Management

Decision Framework

Choosing the right state management solution depends on the scope of shared data, how frequently it updates, and how much boilerplate your team is willing to accept. Not every application needs Redux — in fact, most small-to-medium apps work perfectly with just React's built-in hooks.

The Prop Drilling Problem

When multiple distant components need the same piece of state, passing it through every intermediate component becomes painful and creates tight coupling:

// Without state management — prop drilling through 3 levels
function App() {
  const [user, setUser] = useState(null);
  const logout = () => setUser(null);

  return (
    <Layout>
      <Sidebar>
        <UserProfile user={user} onLogout={logout} />
      </Sidebar>
      <Main>
        <Dashboard user={user} />
        <Notifications userId={user?.id} />
      </Main>
    </Layout>
  );
}

// Layout and Sidebar receive user just to pass it down
function Layout({ children }) {
  return <div className="layout">{children}</div>;
}

Context Has Performance Limits

React Context re-renders ALL consumers whenever ANY provided value changes. This is fine for rarely-changing values like themes or locale, but causes performance problems for frequently updated state such as search input or cursor position in a large list.

// Bad: SearchContext re-renders the entire tree on every keystroke
const SearchContext = createContext('');

function SearchProvider({ children }) {
  const [query, setQuery] = useState('');
  // Every consumer re-renders when query changes
  return (
    <SearchContext.Provider value={{ query, setQuery }}>
      {children}
    </SearchContext.Provider>
  );
}

For frequently changing state, libraries like Zustand or Redux Toolkit provide selector-based subscriptions that only re-render components that actually read the changed slice of state.

Redux Toolkit

Store Setup with TypeScript

Redux Toolkit is the official, recommended way to write Redux logic. It simplifies store configuration, reduces boilerplate, and includes Immer for immutable updates by default.

import { configureStore } from '@reduxjs/toolkit';
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import { apiSlice } from './api/apiSlice';
import authReducer from './features/auth/authSlice';
import cartReducer from './features/cart/cartSlice';

export const store = configureStore({
  reducer: {
    auth: authReducer,
    cart: cartReducer,
    [apiSlice.reducerPath]: apiSlice.reducer,
  },
  middleware: (getDefault) => getDefault().concat(apiSlice.middleware),
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

Feature Slice with Immer Mutations

createSlice generates action creators and action types automatically. The reducer uses Immer under the hood, so you can write mutations that produce immutable updates:

// features/cart/cartSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
}

interface CartState {
  items: CartItem[];
  total: number;
}

const initialState: CartState = { items: [], total: 0 };

const cartSlice = createSlice({
  name: 'cart',
  initialState,
  reducers: {
    addItem(state, action: PayloadAction<Omit<CartItem, 'quantity'>>) {
      const existing = state.items.find(i => i.id === action.payload.id);
      if (existing) {
        existing.quantity++;
      } else {
        state.items.push({ ...action.payload, quantity: 1 });
      }
      state.total = state.items.reduce((sum, i) => sum + i.price * i.quantity, 0);
    },
    removeItem(state, action: PayloadAction<string>) {
      state.items = state.items.filter(i => i.id !== action.payload);
      state.total = state.items.reduce((sum, i) => sum + i.price * i.quantity, 0);
    },
    clearCart() {
      return initialState;
    },
  },
});

export const { addItem, removeItem, clearCart } = cartSlice.actions;
export default cartSlice.reducer;

Async Thunks for API Calls

createAsyncThunk handles pending, fulfilled, and rejected states for async operations:

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

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

const productsSlice = createSlice({
  name: 'products',
  initialState: {
    items: [],
    loading: 'idle',
    error: null as string | null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchProducts.pending, (state) => {
        state.loading = 'pending';
        state.error = null;
      })
      .addCase(fetchProducts.fulfilled, (state, action) => {
        state.loading = 'succeeded';
        state.items = action.payload;
      })
      .addCase(fetchProducts.rejected, (state, action) => {
        state.loading = 'failed';
        state.error = action.payload as string;
      });
  },
});

Zustand for Lightweight State

Store Creation with Middleware

Zustand provides a minimal API for creating stores without providers or boilerplate. Middleware adds devtools integration and persistence with just a few lines:

import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';

interface AuthStore {
  user: User | null;
  token: string | null;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
  isAuthenticated: boolean;
}

export const useAuthStore = create<AuthStore>()(
  devtools(
    persist(
      (set, get) => ({
        user: null,
        token: null,
        get isAuthenticated() { return !!get().token; },
        login: async (email, password) => {
          const res = await fetch('/api/auth/login', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ email, password }),
          });
          const { user, token } = await res.json();
          set({ user, token });
        },
        logout: () => set({ user: null, token: null }),
      }),
      { name: 'auth-storage' }
    ),
    { name: 'AuthStore' }
  )
);

Selector-Based Rendering

Zustand uses selectors to subscribe only to the specific pieces of state a component needs. Components only re-render when the selected value changes, unlike Context which re-renders all consumers:

function Navbar() {
  const user = useAuthStore(state => state.user);
  const logout = useAuthStore(state => state.logout);

  return (
    <nav>
      {user ? (
        <>
          <span>{user.name}</span>
          <button onClick={logout}>Logout</button>
        </>
      ) : (
        <a href="/login">Login</a>
      )}
    </nav>
  );
}

// This component only re-renders when items changes, not when user changes
function Cart() {
  const items = useAuthStore(state => state.items);
  const total = useAuthStore(state => state.total);
  return (
    <div>
      <p>{items.length} items — ${total.toFixed(2)}</p>
    </div>
  );
}

Zustand vs Redux Toolkit Comparison

Immer Integration

Zustand works with Immer for nested state updates, similar to Redux Toolkit:

import { create } from 'zustand';
import { immer } from 'zustand/middleware/immer';

interface TodoStore {
  todos: { id: string; text: string; completed: boolean }[];
  addTodo: (text: string) => void;
  toggleTodo: (id: string) => void;
}

export const useTodoStore = create<TodoStore>()(
  immer((set) => ({
    todos: [],
    addTodo: (text) => set((state) => {
      state.todos.push({
        id: crypto.randomUUID(),
        text,
        completed: false,
      });
    }),
    toggleTodo: (id) => set((state) => {
      const todo = state.todos.find(t => t.id === id);
      if (todo) todo.completed = !todo.completed;
    }),
  }))
);

Server State with TanStack Query

Setup and Configuration

TanStack Query (formerly React Query) manages server state — data fetched from APIs. It handles caching, background refetching, deduplication, and optimistic updates automatically. Client state (UI toggles, form inputs) stays in Zustand or Redux; server data lives in TanStack Query.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000,  // data is fresh for 5 minutes
      retry: 2,
      refetchOnWindowFocus: true,
    },
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Router />
    </QueryClientProvider>
  );
}

Custom Query and Mutation Hooks

Wrap all API calls in custom hooks to keep query logic reusable and consistent across your application:

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

function useUsers() {
  return useQuery({
    queryKey: ['users'],
    queryFn: () => fetch('/api/users').then(r => r.json()),
    staleTime: 30000,
  });
}

function useUpdateUser() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: (user: Partial<User> & { id: string }) =>
      fetch(`/api/users/${user.id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(user),
      }).then(r => r.json()),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['users'] });
    },
  });
}

Usage with Loading and Error States

TanStack Query provides isLoading, isError, and data states so components handle all phases of a data fetch:

function UserList() {
  const { data: users, isLoading, error } = useUsers();
  const updateUser = useUpdateUser();

  if (isLoading) return <Spinner />;
  if (error) return <Error message={error.message} />;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.name}
          <button
            onClick={() => updateUser.mutate({ id: user.id, name: 'New Name' })}
            disabled={updateUser.isPending}
          >
            {updateUser.isPending ? 'Saving...' : 'Rename'}
          </button>
        </li>
      ))}
    </ul>
  );
}

Key Insight: Client vs Server State

Keep a clear separation: client state (theme, form inputs, UI toggles) belongs in Zustand or Redux Toolkit. Server state (API responses, fetched data) belongs in TanStack Query. Storing server data in Redux creates duplicate cache management and complex synchronization logic that TanStack Query handles out of the box.