react-state-management

React State Management

Comprehensive guide to modern React state management patterns, from local component state to global stores and server state synchronization.

When to Use This Skill

• Setting up global state management in a React app
• Choosing between Redux Toolkit, Zustand, or Jotai
• Managing server state with React Query or SWR
• Implementing optimistic updates
• Debugging state-related issues
• Migrating from legacy Redux to modern patterns

Core Concepts

1. State Categories

2. Selection Criteria

Small app, simple state → Zustand or Jotai
Large app, complex state → Redux Toolkit
Heavy server interaction → React Query + light client state
Atomic/granular updates → Jotai

Quick Start

Zustand (Simplest)

// store/useStore.ts
import { create } from 'zustand'
import { devtools, persist } from 'zustand/middleware'

interface AppState {
  user: User | null
  theme: 'light' | 'dark'
  setUser: (user: User | null) => void
  toggleTheme: () => void
}

export const useStore = create<AppState>()(
  devtools(
    persist(
      (set) => ({
        user: null,
        theme: 'light',
        setUser: (user) => set({ user }),
        toggleTheme: () => set((state) => ({
          theme: state.theme === 'light' ? 'dark' : 'light'
        })),
      }),
      { name: 'app-storage' }
    )
  )
)

// Usage in component
function Header() {
  const { user, theme, toggleTheme } = useStore()
  return (
    <header className={theme}>
      {user?.name}
      <button onClick={toggleTheme}>Toggle Theme</button>
    </header>
  )
}

Note: this example persists the whole store, including the user, to browser storage. In real apps, persist only harmless UI preferences such as the theme, and keep tokens, credentials and personal data out of browser storage. Clear user data on logout. Enable the devtools middleware only in development builds and turn it off for production, because it exposes the full store. In real components, subscribe with selectors that read only the fields a component needs, as shown in the detailed patterns.

Detailed patterns and worked examples

Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.

Best Practices

Do's

• Colocate state - Keep state as close to where it's used as possible
• Use selectors - Prevent unnecessary re-renders with selective subscriptions
• Normalize data - Flatten nested structures for easier updates
• Type everything - Full TypeScript coverage prevents runtime errors
• Separate concerns - Server state (React Query) vs client state (Zustand)

Don'ts

• Don't over-globalize - Not everything needs to be in global state
• Don't duplicate server state - Let React Query manage it
• Don't mutate directly - Always use immutable updates
• Don't store derived data - Compute it instead
• Don't mix paradigms - Pick one primary solution per category
• Keep sensitive data out of browser storage - Store tokens, credentials and personal data in memory or secure server cookies instead

Migration Guides

From Legacy Redux to RTK

// Before (legacy Redux)
const ADD_TODO = "ADD_TODO";
const addTodo = (text) => ({ type: ADD_TODO, payload: text });
function todosReducer(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [...state, { text: action.payload, completed: false }];
    default:
      return state;
  }
}

// After (Redux Toolkit)
const todosSlice = createSlice({
  name: "todos",
  initialState: [],
  reducers: {
    addTodo: (state, action: PayloadAction<string>) => {
      // Immer allows "mutations"
      state.push({ text: action.payload, completed: false });
    },
  },
});