Comparing Modern State Management Patterns: Context API vs Zustand vs Recoil vs Jotai

I've used Redux for years. The boilerplate, the actions, the reducers, the middleware-it felt like solving simple problems with complex solutions. When I discovered modern state management solutions in 2023-2024, I felt like I'd been doing it wrong the whole time.

In this comprehensive guide, I'll compare the four most popular modern React state management solutions, show you real-world implementations, and help you choose the right one for your project.

The State Management Landscape in 2025

The Redux Problem

Redux was revolutionary, but it's verbose:

typescript

// Redux: Simple counter needs all this
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

interface CounterAction {
  type: typeof INCREMENT | typeof DECREMENT;
}

interface CounterState {
  count: number;
}

const initialState: CounterState = { count: 0 };

function counterReducer(state = initialState, action: CounterAction): CounterState {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + 1 };
    case DECREMENT:
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const increment = () => ({ type: INCREMENT as const });
const decrement = () => ({ type: DECREMENT as const });

Compare that to modern solutions:

typescript

// Zustand: Same functionality, much less code
const useCounter = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 }))
}));

What Makes Modern State Management Better

1. Less boilerplate - Write less, do more 2. Better TypeScript support - Types that actually help 3. Simpler mental models - Easier to reason about 4. Better performance - Fine-grained updates 5. Developer experience - Better debugging and DevTools

Context API: The Built-in Solution

When to Use Context API

Perfect for:

Theme state (light/dark mode)
Authentication state
Language/locale state
Simple UI state

Avoid for:

Frequently changing state
Complex state logic
Performance-critical updates

Basic Implementation

tsx

// contexts/AuthContext.tsx
import { createContext, useContext, useState, useEffect } from 'react';

interface User {
  id: string;
  name: string;
  email: string;
}

interface AuthContextType {
  user: User | null;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
  loading: boolean;
}

const AuthContext = createContext<AuthContextType | undefined>(undefined);

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Check for stored auth on mount
    const storedUser = localStorage.getItem('user');
    if (storedUser) {
      setUser(JSON.parse(storedUser));
    }
    setLoading(false);
  }, []);

  const login = async (email: string, password: string) => {
    setLoading(true);
    try {
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password })
      });
      
      if (response.ok) {
        const userData = await response.json();
        setUser(userData);
        localStorage.setItem('user', JSON.stringify(userData));
      }
    } catch (error) {
      console.error('Login failed:', error);
    } finally {
      setLoading(false);
    }
  };

  const logout = () => {
    setUser(null);
    localStorage.removeItem('user');
  };

  const value = {
    user,
    login,
    logout,
    loading
  };

  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  const context = useContext(AuthContext);
  if (context === undefined) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
}

Performance Considerations

tsx

// ❌ Bad: Single context causes unnecessary re-renders
const AppContext = createContext({
  user: null,
  theme: 'light',
  todos: [],
  settings: {}
});

// ✅ Good: Split contexts by update frequency
const UserContext = createContext({ user: null });
const ThemeContext = createContext({ theme: 'light' });
const TodosContext = createContext({ todos: [] });

Zustand: The Developer Favorite

Zustand is my go-to for client-side state management. It's simple, powerful, and just works.

Basic Usage

typescript

import { create } from 'zustand';

interface CounterStore {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

const useCounterStore = create<CounterStore>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 })
}));

// Usage in component
function Counter() {
  const { count, increment, decrement, reset } = useCounterStore();
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

Advanced Patterns

1. Async Actions:

typescript

interface TodoStore {
  todos: Todo[];
  loading: boolean;
  fetchTodos: () => Promise<void>;
  addTodo: (text: string) => Promise<void>;
  toggleTodo: (id: string) => void;
}

const useTodoStore = create<TodoStore>((set, get) => ({
  todos: [],
  loading: false,

  fetchTodos: async () => {
    set({ loading: true });
    try {
      const response = await fetch('/api/todos');
      const todos = await response.json();
      set({ todos, loading: false });
    } catch (error) {
      set({ loading: false });
      console.error('Failed to fetch todos:', error);
    }
  },

  addTodo: async (text: string) => {
    try {
      const response = await fetch('/api/todos', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ text })
      });
      const newTodo = await response.json();
      set((state) => ({
        todos: [...state.todos, newTodo]
      }));
    } catch (error) {
      console.error('Failed to add todo:', error);
    }
  },

  toggleTodo: (id: string) => {
    set((state) => ({
      todos: state.todos.map(todo =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    }));
  }
}));

2. Middleware:

typescript

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

const useStore = create(
  devtools(
    persist(
      (set) => ({
        count: 0,
        increment: () => set((state) => ({ count: state.count + 1 }))
      }),
      {
        name: 'counter-storage'
      }
    )
  )
);

Recoil: Facebook's Atomic Approach

Recoil takes an atomic approach to state management. Each piece of state is an "atom."

Basic Usage

tsx

import { atom, selector, useRecoilState, useRecoilValue } from 'recoil';

// Atoms
const countState = atom({
  key: 'countState',
  default: 0
});

const todosState = atom({
  key: 'todosState',
  default: []
});

// Selectors (derived state)
const completedTodosSelector = selector({
  key: 'completedTodosSelector',
  get: ({ get }) => {
    const todos = get(todosState);
    return todos.filter(todo => todo.completed);
  }
});

// Component usage
function Counter() {
  const [count, setCount] = useRecoilState(countState);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

function TodoStats() {
  const completedTodos = useRecoilValue(completedTodosSelector);
  
  return <p>Completed: {completedTodos.length}</p>;
}

Advanced Selectors

typescript

// Async selector
const userSelector = selector({
  key: 'userSelector',
  get: async ({ get }) => {
    const userId = get(currentUserIdState);
    if (!userId) return null;
    
    const response = await fetch(`/api/users/${userId}`);
    return response.json();
  }
});

// Selector with parameters
const todoSelector = selectorFamily({
  key: 'todoSelector',
  get: (todoId: string) => ({ get }) => {
    const todos = get(todosState);
    return todos.find(todo => todo.id === todoId);
  }
});

Jotai: Bottom-up Atomic State

Jotai is similar to Recoil but with a different philosophy and simpler API.

Basic Usage

tsx

import { atom, useAtom, useAtomValue } from 'jotai';

// Primitive atoms
const countAtom = atom(0);
const nameAtom = atom('');

// Derived atoms
const doubledCountAtom = atom(
  (get) => get(countAtom) * 2
);

// Write-only atom
const incrementAtom = atom(
  null,
  (get, set) => {
    set(countAtom, get(countAtom) + 1);
  }
);

// Component usage
function Counter() {
  const [count, setCount] = useAtom(countAtom);
  const doubledCount = useAtomValue(doubledCountAtom);
  
  return (
    <div>
      <p>Count: {count}</p>
      <p>Doubled: {doubledCount}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  );
}

Async Atoms

typescript

// Async atom
const userAtom = atom(async (get) => {
  const userId = get(userIdAtom);
  if (!userId) return null;
  
  const response = await fetch(`/api/users/${userId}`);
  return response.json();
});

// Component with Suspense
function UserProfile() {
  const user = useAtomValue(userAtom);
  
  return <div>{user?.name}</div>;
}

// Wrap with Suspense
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <UserProfile />
    </Suspense>
  );
}

Performance Comparison

I built the same todo app with each library to compare performance:

Bundle Size (minified + gzipped)

Context API: 0KB (built-in)
Zustand: 2.8KB
Jotai: 4.2KB
Recoil: 22KB

Re-render Performance (1000 todos)

Context API: 156ms (re-renders entire tree)
Zustand: 12ms (selective subscriptions)
Jotai: 8ms (atomic updates)
Recoil: 15ms (atomic updates)

Developer Experience

Context API: ⭐⭐⭐ (verbose, lots of boilerplate)
Zustand: ⭐⭐⭐⭐⭐ (simple, intuitive)
Jotai: ⭐⭐⭐⭐ (powerful but learning curve)
Recoil: ⭐⭐⭐ (complex API, Facebook-specific patterns)

Decision Matrix

Use Context API when:

✅ State changes infrequently (theme, auth)
✅ You want zero dependencies
✅ Simple state requirements
❌ Don't use for frequently changing state

Use Zustand when:

✅ You want simplicity and flexibility
✅ Good TypeScript support is important
✅ You need middleware (persistence, devtools)
✅ Team is new to state management

Use Jotai when:

✅ You have complex derived state
✅ Performance is critical
✅ You want atomic updates
✅ Team is comfortable with advanced patterns

Use Recoil when:

✅ You're already using Facebook stack
✅ You need advanced features like time travel
✅ Complex async state dependencies
❌ Bundle size is a concern

Migration Guide

From Redux to Zustand

typescript

// Redux
const todoSlice = createSlice({
  name: 'todos',
  initialState: { items: [] },
  reducers: {
    addTodo: (state, action) => {
      state.items.push(action.payload);
    }
  }
});

// Zustand equivalent
const useTodoStore = create((set) => ({
  items: [],
  addTodo: (todo) => set((state) => ({ 
    items: [...state.items, todo] 
  }))
}));

From Context to Jotai

tsx

// Context
const ThemeContext = createContext();
const useTheme = () => useContext(ThemeContext);

// Jotai equivalent
const themeAtom = atom('light');
const useTheme = () => useAtom(themeAtom);

Real-World Example: E-commerce Cart

Let me show you how to implement a shopping cart with each approach:

Zustand Implementation

typescript

interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
}

interface CartStore {
  items: CartItem[];
  total: number;
  addItem: (item: Omit<CartItem, 'quantity'>) => void;
  removeItem: (id: string) => void;
  updateQuantity: (id: string, quantity: number) => void;
  clearCart: () => void;
}

const useCartStore = create<CartStore>((set, get) => ({
  items: [],
  
  get total() {
    return get().items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  },
  
  addItem: (product) => {
    set((state) => {
      const existingItem = state.items.find(item => item.id === product.id);
      
      if (existingItem) {
        return {
          items: state.items.map(item =>
            item.id === product.id
              ? { ...item, quantity: item.quantity + 1 }
              : item
          )
        };
      }
      
      return {
        items: [...state.items, { ...product, quantity: 1 }]
      };
    });
  },
  
  removeItem: (id) => {
    set((state) => ({
      items: state.items.filter(item => item.id !== id)
    }));
  },
  
  updateQuantity: (id, quantity) => {
    if (quantity <= 0) {
      get().removeItem(id);
      return;
    }
    
    set((state) => ({
      items: state.items.map(item =>
        item.id === id ? { ...item, quantity } : item
      )
    }));
  },
  
  clearCart: () => set({ items: [] })
}));

The Bottom Line

After building production apps with all four approaches, here's my recommendation:

For most projects: Zustand

Simple API
Great TypeScript support
Small bundle size
Flexible and powerful

For simple state: Context API

No dependencies
Built into React
Perfect for theme/auth

For complex apps: Jotai

Best performance
Atomic updates
Great for derived state

Avoid: Recoil

Large bundle size
Complex API
Facebook-specific patterns

My personal stack:

Server state: TanStack Query
Client state: Zustand
UI state: Local state (useState)
Global UI state: Context API (theme, modals)

The beauty of modern state management is you don't need to choose just one. Mix and match based on your needs.

---

What state management solution are you using? What challenges are you facing? Share in the comments below.

Get More Like This

Want articles like this in your inbox?

Join developers and founders who get practical insights on frontend, SaaS, and building better products.

Subscribe for Updates Book Free Audit

Written by Salman Izhar

Full Stack Developer specializing in React, Next.js, and building high-converting web applications.

Learn More

Comparing Modern State Management Patterns: Context API vs Zustand vs Recoil vs Jotai