Zustand vs Jotai (2026): Store-Based vs Atomic State in React

// store/useCartStore.ts
export const useCartStore = create<CartStore>()(
  devtools(persist(
    (set, get) => ({
      items: [] as CartItem[],
      isOpen: false,

      addItem: (item) => set(state => {
        const existing = state.items.find(i => i.id === item.id)
        if (existing) {
          return { items: state.items.map(i => i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i) }
        }
        return { items: [...state.items, { ...item, quantity: 1 }] }
      }),

      clearCart: () => set({ items: [] }),
      toggleCart: () => set(state => ({ isOpen: !state.isOpen }))
    }),
    { name: 'cart' }
  ))
)

// Components subscribe only to what they need
function CartButton() {
  const count = useCartStore(state => state.items.reduce((s, i) => s + i.quantity, 0))
  const toggle = useCartStore(state => state.toggleCart)
  return <button onClick={toggle}>Cart ({count})</button>
  // Only re-renders when count changes
}

// store/cartAtoms.ts
export const cartItemsAtom = atomWithStorage<CartItem[]>('cart-items', [])
export const cartOpenAtom = atom(false)

// Derived atoms — auto-memoized, shared across all subscribers
export const cartCountAtom = atom(get =>
  get(cartItemsAtom).reduce((s, i) => s + i.quantity, 0)
)
export const cartTotalAtom = atom(get =>
  get(cartItemsAtom).reduce((s, i) => s + i.price * i.quantity, 0)
)

// Write atom for actions
export const addItemAtom = atom(null, (get, set, item: Omit<CartItem, 'quantity'>) => {
  const items = get(cartItemsAtom)
  const existing = items.find(i => i.id === item.id)
  set(cartItemsAtom, existing
    ? items.map(i => i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i)
    : [...items, { ...item, quantity: 1 }]
  )
})

function CartButton() {
  const count = useAtomValue(cartCountAtom)
  const setOpen = useSetAtom(cartOpenAtom)
  return <button onClick={() => setOpen(p => !p)}>Cart ({count})</button>
}

const useUserStore = create<UserStore>()((set) => ({
  user: null, loading: false, error: null,
  fetchUser: async (id) => {
    set({ loading: true, error: null })
    try {
      set({ user: await api.users.getById(id), loading: false })
    } catch (err) {
      set({ error: (err as Error).message, loading: false })
    }
  }
}))

// The fetch IS the atom — no manual loading state
export const userQueryAtom = atomWithQuery(get => ({
  queryKey: ['user', get(userIdAtom)],
  queryFn: () => api.users.getById(get(userIdAtom)!),
  enabled: !!get(userIdAtom)
}))

// Component suspends until data resolves
function ProfileContent() {
  const [{ data: user }] = useAtom(userQueryAtom)
  return <Profile user={user!} />
}

// Suspense boundary handles the loading state
function Page() {
  return (
    <Suspense fallback={<Spinner />}>
      <ProfileContent />
    </Suspense>
  )
}

// Zustand — manually memoize expensive selectors
const result = useCartStore(useShallow(state => ({
  items: state.items,
  total: state.items.reduce((s, i) => s + i.price * i.quantity, 0)
})))

// Jotai — memoization is built in, computed once per change
const expensiveItemsAtom = atom(get => get(cartItemsAtom).filter(i => i.price > 100))
const expensiveTotalAtom = atom(get =>
  get(expensiveItemsAtom).reduce((s, i) => s + i.price * i.quantity, 0)
)
// Multiple components using expensiveTotalAtom share the same result