Zustand vs Jotai vs Redux Toolkit: State Management Shootout 2026
A practical comparison of Zustand, Jotai, and Redux Toolkit — bundle size, DX, performance, and when to pick each one.
Every year, someone declares client-side state management "solved." And every year, teams still agonize over the choice. With React Server Components handling most data fetching, the question has shifted: what's the best tool for the client state that remains? Let's compare the three leaders head-to-head.
The State of State in 2026
RSCs have eliminated most of the state we used to manage — API responses, user data, cached entities. What's left is genuinely client-side: UI state (modals, tabs, filters), form state, optimistic updates, and real-time data. This changes the calculus significantly.
Zustand: The Pragmatist's Choice
Zustand is a tiny (1.1KB gzipped) store that feels like writing plain JavaScript. No providers, no boilerplate, no context wrapper hierarchy:
import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';
interface CartStore {
items: CartItem[];
addItem: (item: CartItem) => void;
removeItem: (id: string) => void;
total: () => number;
}
export const useCartStore = create<CartStore>()(
devtools(
persist(
(set, get) => ({
items: [],
addItem: (item) =>
set((state) => ({ items: [...state.items, item] })),
removeItem: (id) =>
set((state) => ({
items: state.items.filter((i) => i.id !== id),
})),
total: () =>
get().items.reduce((sum, item) => sum + item.price * item.qty, 0),
}),
{ name: 'cart-storage' }
)
)
);
Strengths: Minimal API surface, excellent TypeScript support, middleware ecosystem (persist, devtools, immer). Works outside React (vanilla JS, tests).
Weaknesses: Selectors can cause unnecessary re-renders if not careful. No built-in computed values (you compute in selectors).
Jotai: The Atomic Approach
Jotai takes the opposite approach — instead of one store, you create independent atoms that compose together:
import { atom, useAtom, useAtomValue } from 'jotai';
import { atomWithStorage } from 'jotai/utils';
const cartItemsAtom = atomWithStorage<CartItem[]>('cart', []);
const cartTotalAtom = atom((get) =>
get(cartItemsAtom).reduce(
(sum, item) => sum + item.price * item.qty, 0
)
);
// In your component — only re-renders when total changes
function CartTotal() {
const total = useAtomValue(cartTotalAtom);
return <span>${total.toFixed(2)}</span>;
}
Strengths: Surgical re-renders by default. Derived atoms are elegant. Async atoms handle data fetching naturally. Tiny bundle (2.4KB).
Weaknesses: Atom scattering — large apps can end up with atoms everywhere. Debugging is harder without a single store to inspect.
Redux Toolkit: The Enterprise Standard
RTK has come a long way from the boilerplate nightmare of classic Redux. createSlice and RTK Query make it genuinely productive. But it's still Redux — providers, dispatch, selectors, middleware. The bundle cost (11KB+ gzipped) and conceptual overhead are real.
Best for: Large teams that need strict patterns, extensive middleware requirements, complex state machines with many interacting slices.
Performance Comparison
| Metric | Zustand | Jotai | RTK |
|---|---|---|---|
| Bundle size (gzip) | 1.1KB | 2.4KB | 11KB+ |
| Re-render precision | Selector-based | Atomic (best) | Selector-based |
| TypeScript DX | Excellent | Excellent | Good |
| Learning curve | Low | Low | Medium |
| DevTools | Via middleware | jotai-devtools | Redux DevTools |
| SSR support | Good | Excellent | Good |
My Recommendation
Default to Zustand for most projects. It hits the sweet spot of simplicity, performance, and flexibility. Use Jotai when you have many independent pieces of state that compose together (think: complex filter UIs, spreadsheet-like apps). Choose Redux Toolkit when your team already knows Redux or you need its middleware ecosystem for complex async flows.
In 2026, with RSCs handling data fetching, the amount of client state you manage is smaller than ever. Pick the lightest tool that solves your actual problem — and that's usually Zustand.
Admin
Cal.com
Open source scheduling — tự host booking system, thay thế Calendly. Free & privacy-first.
Bình luận (0)
Đăng nhập để bình luận
Chưa có bình luận nào. Hãy là người đầu tiên!