The React state management ecosystem has matured. Each solution excels in different scenarios.

Zustand: Global Client State

import { create } from 'zustand'

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

export const useAppStore = create<AppState>((set) => ({
  user: null,
  theme: 'light',
  setUser: (user) => set({ user }),
  toggleTheme: () => set((s) => ({ theme: s.theme === 'light' ? 'dark' : 'light' })),
}))

TanStack Query: Server State

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

export function useProjects() {
  return useQuery({
    queryKey: ['projects'],
    queryFn: () => fetch('/api/projects').then(r => r.json()),
  })
}

export function useCreateProject() {
  const queryClient = useQueryClient()
  return useMutation({
    mutationFn: (data: CreateProjectInput) => fetch('/api/projects', { method: 'POST', body: JSON.stringify(data) }),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['projects'] }),
  })
}

When to Use What

• Context: Simple shared state (theme, locale, auth)
• Zustand: Complex client state (UI state, multi-step forms)
• TanStack Query: Server data (API calls, caching, pagination)
• Jotai: Atomic state with fine-grained updates

The Bottom Line

The SaaS Starter Kit from BreafIO combines Zustand for client state with TanStack Query for server data. The Admin Dashboard Pro uses this pattern extensively. The Component Library Starter provides theme state management. The API Boilerplate pairs with TanStack Query, and the Analytics Dashboard demonstrates complex state patterns.