React Context vs Zustand vs Jotai: Picking Your State Manager

React Context: Good for Low-Frequency Updates

Context re-renders every consumer on every update. Fine for auth, theme, feature flags.

const AuthContext = createContext<AuthState | null>(null);

export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  return <AuthContext.Provider value={{ user, setUser }}>{children}</AuthContext.Provider>;
}

Don't use Context for frequently updating state — the re-render cascade destroys performance.

Zustand: Sweet Spot for Most Apps

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

const useCartStore = create<CartStore>()(devtools(persist(
  (set, get) => ({
    items: [],
    addItem: (item) => set((state) => ({ items: [...state.items, item] })),
    total: () => get().items.reduce((sum, item) => sum + item.price, 0),
  }),
  { name: 'cart-storage' }
)));

// Only re-renders when items changes
function CartIcon() {
  const count = useCartStore(state => state.items.length);
  return <span>{count}</span>;
}

Jotai: Atomic State

const countAtom = atom(0);
const doubledAtom = atom((get) => get(countAtom) * 2);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Decision Guide

Scenario	Use
Auth, theme, locale	Context
App-wide UI state, cart	Zustand
Fine-grained atom reactivity	Jotai
Server/API data	React Query

Rule: React Query for server state, Zustand for client state, Context for config.

The right state architecture — React Query + Zustand + Context — is set up correctly in the AI SaaS Starter Kit.