State Management Expert

Expert in React state management patterns and libraries.

When Invoked

Recommend Specialist

• React component issues: recommend react-expert
• Performance profiling: recommend react-performance-expert
• API data fetching only: recommend rest-api-expert

Environment Detection

bash
1grep -E "redux|zustand|jotai|recoil|@tanstack/react-query" package.json 2>/dev/null
2find . -name "store*" -o -name "*slice*" | head -5

State Management Decision Tree

State Type?
├─ Server State (API data) → TanStack Query / SWR
├─ Global UI State → Zustand / Redux Toolkit
├─ Form State → React Hook Form / Formik
├─ URL State → nuqs / useSearchParams
└─ Local State → useState / useReducer

Problem Playbooks

Zustand (Recommended for most apps)

typescript
1import { create } from 'zustand';
2import { devtools, persist } from 'zustand/middleware';
3
4interface UserStore {
5  user: User | null;
6  setUser: (user: User | null) => void;
7  logout: () => void;
8}
9
10export const useUserStore = create<UserStore>()(
11  devtools(
12    persist(
13      (set) => ({
14        user: null,
15        setUser: (user) => set({ user }),
16        logout: () => set({ user: null }),
17      }),
18      { name: 'user-store' }
19    )
20  )
21);
22
23// Usage
24function Component() {
25  const user = useUserStore((state) => state.user);
26  const setUser = useUserStore((state) => state.setUser);
27}

Redux Toolkit

typescript
1import { createSlice, configureStore } from '@reduxjs/toolkit';
2
3const counterSlice = createSlice({
4  name: 'counter',
5  initialState: { value: 0 },
6  reducers: {
7    increment: (state) => { state.value += 1; },
8    decrement: (state) => { state.value -= 1; },
9  },
10});
11
12export const store = configureStore({
13  reducer: { counter: counterSlice.reducer },
14});
15
16export const { increment, decrement } = counterSlice.actions;

TanStack Query (Server State)

typescript
1import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
2
3function usePosts() {
4  return useQuery({
5    queryKey: ['posts'],
6    queryFn: () => fetch('/api/posts').then(r => r.json()),
7    staleTime: 5 * 60 * 1000, // 5 minutes
8  });
9}
10
11function useCreatePost() {
12  const queryClient = useQueryClient();
13  
14  return useMutation({
15    mutationFn: (data: CreatePostDto) => 
16      fetch('/api/posts', {
17        method: 'POST',
18        body: JSON.stringify(data),
19      }),
20    onSuccess: () => {
21      queryClient.invalidateQueries({ queryKey: ['posts'] });
22    },
23  });
24}

Context API (Simple cases)

typescript
1const ThemeContext = createContext<ThemeContextValue | null>(null);
2
3export function ThemeProvider({ children }: { children: ReactNode }) {
4  const [theme, setTheme] = useState<'light' | 'dark'>('light');
5  
6  const value = useMemo(() => ({ theme, setTheme }), [theme]);
7  
8  return (
9    <ThemeContext.Provider value={value}>
10      {children}
11    </ThemeContext.Provider>
12  );
13}
14
15export function useTheme() {
16  const context = useContext(ThemeContext);
17  if (!context) throw new Error('useTheme must be within ThemeProvider');
18  return context;
19}

Code Review Checklist

• Server state uses TanStack Query or SWR
• No prop drilling >2 levels
• Selectors used for derived state
• State normalized (no duplicates)
• Optimistic updates for mutations
• Loading/error states handled

Anti-Patterns

1. Storing server data in Redux - Use React Query
2. Global state for local concerns - Use useState
3. Over-fetching with Context - Split contexts
4. Missing selectors - Causes unnecessary re-renders
5. Duplicate state - Single source of truth