react-state-management

React State Management Patterns

There is no one-size-fits-all state tool. This skill covers the most common choices and when each fits.

Decision tree

Data	Tool
Local component state (count, isOpen, hover)	useState, useReducer
Shared between siblings / parent-child	Lift to common parent + props
App-wide UI state (theme, locale, sidebar open)	Context, Zustand, Jotai
Complex domain state with many actions	Redux Toolkit (or Zustand for simpler cases)
Server data with caching, pagination, refetch	TanStack Query, SWR
Form state	react-hook-form (see react-forms skill)
URL-synced state	URL params via useSearchParams

Detect what the project uses and follow its pattern. Don't introduce a new state lib without BA approval.

useState and useReducer

const [count, setCount] = useState(0);

// Function form for updates depending on previous state
setCount((c) => c + 1);

// Reducer for complex state with discriminated actions
const [state, dispatch] = useReducer(reducer, initialState);

When state has more than ~3 fields and updates are coordinated, prefer useReducer:

type State = { items: Item[]; loading: boolean; error: string | null };
type Action =
  | { type: 'fetch_start' }
  | { type: 'fetch_success'; items: Item[] }
  | { type: 'fetch_error'; error: string };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'fetch_start': return { ...state, loading: true, error: null };
    case 'fetch_success': return { ...state, loading: false, items: action.items };
    case 'fetch_error': return { ...state, loading: false, error: action.error };
  }
}

Context API

For values shared across many components without prop drilling. Best for relatively static or rarely-changing data (theme, locale, current user).

import { createContext, useContext, useState } from 'react';

type Theme = 'light' | 'dark';
const ThemeContext = createContext<{ theme: Theme; setTheme: (t: Theme) => void } | null>(null);

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>('light');
  return <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>;
}

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