Zustand: Simple, Scalable State Management for React

Zustand is the antidote to Redux boilerplate. A store is just a hook. There are no providers to wrap, no actions/reducers ceremony, and components only re-render when the slice they read changes.

Creating a Store

import { create } from "zustand";

interface CartState {
  items: string[];
  add: (id: string) => void;
  clear: () => void;
}

export const useCart = create<CartState>((set) => ({
  items: [],
  add: (id) => set((s) => ({ items: [...s.items, id] })),
  clear: () => set({ items: [] }),
}));

Using It (Select Only What You Need)

// ✅ Selector → re-renders only when items.length changes
const count = useCart((s) => s.items.length);
const add = useCart((s) => s.add);

Persist and Middleware

Zustand's persist middleware syncs state to localStorage in one line, and devtools hooks into Redux DevTools — you get the conveniences of Redux without the ceremony.