Redux vs Zustand vs Jotai: State Management Comparison

Redux, Zustand, and Jotai represent three generations of React state management — Redux follows a centralized store with reducers, Zustand offers a minimal hook-based store, and Jotai brings atomic state with fine-grained re-rendering.

At a Glance

Key Differences

• Boilerplate: Redux Toolkit (RTK) reduced Redux’s verbosity significantly, but you still create slices (createSlice), configure the store, and use useDispatch/useSelector. Zustand requires const useStore = create((set) => ({...})) and you’re done — no providers, no reducers, no dispatch. Jotai defines atoms: const countAtom = atom(0) and reads with useAtom(countAtom).
• Performance: Jotai re-renders only components that consume a changed atom — the finest granularity. Zustand re-renders all subscribers of the changed slice (selector-based). Redux with useSelector (and shallow equality) is comparable to Zustand. For high-frequency updates (animations, real-time data), Jotai’s atomic approach significantly outperforms the others.
• Middleware: Redux’s middleware ecosystem is unmatched — Redux Thunk, Redux Saga, Redux Observable, and middleware for logging, persistence, and API calls. Zustand has a simpler middleware API (zustand/middleware) with persist, immer, and devtools middleware built in. Jotai doesn’t use middleware — side effects are handled with useEffect or the jotai-effect utility.
• DevTools: Redux DevTools are the gold standard — time-travel debugging, action replay, state diffing. Zustand integrates with Redux DevTools. Jotai has its own DevTools component with atom inspection and time-travel.

When to Choose Redux

Redux is the proven choice for large, complex applications with extensive state management needs. If your app has multiple state slices (auth, cart, preferences, UI), complex async workflows, and a large team, Redux’s structure enforces consistency. Redux Toolkit has modernized the API significantly — createAsyncThunk and createEntityAdapter handle common patterns elegantly. Redux is battle-tested at scale (Meta, Twitter, many Fortune 500 companies). Its middleware ecosystem handles side effects, persistence, and analytics tracking reliably.

When to Choose Zustand

Zustand provides the best balance of simplicity and power. Its minimalist API fits naturally with React hooks. Zustand stores don’t require context providers — any component can import and use a store directly. This makes Zustand ideal for medium-sized apps, shared component libraries, and projects where you want to avoid Redux’s ceremony. The persist middleware (localStorage, AsyncStorage) works with zero configuration. Zustand’s TypeScript support is excellent — create<State>()((set) => ({...})) provides full type inference.

When to Choose Jotai

Jotai is best when you need fine-grained reactivity — forms with many fields, real-time dashboards, or apps with frequent state updates. Since atoms are modular, you can define them inline in components or in separate files. Jotai’s atomWithStorage, splitAtom, and loadable utilities handle common patterns. Jotai works well with React’s concurrent features (Suspense, transitions) because atoms are lazy — they compute only when consumed.

Architecture Comparison

    flowchart TD
    subgraph Redux
        R1[Component] --> R2[useDispatch]
        R1 --> R3[useSelector]
        R2 --> R4[Action Creator]
        R4 --> R5[Middleware]
        R5 --> R6[Reducer]
        R6 --> R7[Store]
        R3 --> R7
    end
    subgraph Zustand
        Z1[Component A] --> Z8[useZustandStore]
        Z2[Component B] --> Z8
        Z8 --> Z9[Store set/get]
    end
    subgraph Jotai
        J1[Component] --> J2[useAtom(atomA)]
        J3[Component] --> J4[useAtom(atomB)]
        J2 --> J5[atomA]
        J4 --> J6[atomB]
        J5 <--> J7[Derived Atom]
    end
  

Side by Side Code Example: Counter with Persistence

Redux Toolkit

import { createSlice, configureStore } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; },
  },
});

export const { increment, decrement } = counterSlice.actions;
const store = configureStore({
  reducer: { counter: counterSlice.reducer },
});

// In component
import { useSelector, useDispatch } from "react-redux";
function Counter() {
  const count = useSelector((s) => s.counter.value);
  const dispatch = useDispatch();
  return (
    <div>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>+</button>
    </div>
  );
}

Zustand

import { create } from "zustand";
import { persist } from "zustand/middleware";

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

function Counter() {
  const { count, increment, decrement } = useStore();
  return (
    <div>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
}

Jotai

import { atom, useAtom } from "jotai";
import { atomWithStorage } from "jotai/utils";

const countAtom = atomWithStorage("count", 0);

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

All three implement the same counter with localStorage persistence. Redux requires slice creation, store configuration, and Provider setup. Zustand uses a single create call with the persist middleware. Jotai uses atomWithStorage — a single line for atomic state with persistence.

FAQ