Jotai vs Zustand — choosing the right atomic store

Both Jotai and Zustand are lightweight React state managers without Provider boilerplate. Developers often pick one arbitrarily without understanding their different mental models, leading to friction when the app's state structure does not match the library's design.

Choose based on how your state is shaped:

// ZUSTAND is better for:
// - A single cohesive domain object (auth, cart, UI settings)
// - State that has actions closely tied to it
// - When you want Redux-like structure without Redux

// JOTAI is better for:
// - Many independent pieces of state (form fields, feature flags)
// - Derived/computed state from multiple sources
// - When different parts of state change independently at high frequency
// - Fine-grained subscriptions to avoid unnecessary re-renders

// Zustand: store is one object
const useCartStore = create<CartState>((set) => ({
items: [],
total: 0,
addItem: (item) => set((s) => ({ items: [...s.items, item] })),
}));

// Jotai: state is composed from primitives
const cartItemsAtom = atom<CartItem[]>([]);
const cartTotalAtom = atom((get) => get(cartItemsAtom).reduce((sum, i) => sum + i.price, 0));
const addItemAtom = atom(null, (get, set, item: CartItem) =>
set(cartItemsAtom, [...get(cartItemsAtom), item])
);

Zustand's top-down store is easier to reason about for structured domains. Jotai's bottom-up composition shines for reactive, highly granular state where re-render minimisation matters more than cohesion.