ReactZustandState Management
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
ts
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)
tsx
// ✅ Selector → re-renders only when items.length changes
const count = useCart((s) => s.items.length);
const add = useCart((s) => s.add);Avoid Selecting the Whole Store
const store = useCart() re-renders on every change. Always select the narrowest slice with a selector function.
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.
