Suleman Ahmed - BlogModern State Management with Zustand: Simple, Fast, and Scalable
State management is a central topic in React development. While context is great for simple themes, complex applications often require a global store. Zustand has emerged as the developer-favorite alternative to Redux.
Why Choose Zustand?
Zustand is a tiny (less than 1KB) state management library. It uses React hooks, does not require wrapping your app in providers, and prevents unnecessary re-renders through state selection.
Creating a Global Store
Let's define a simple store that handles a shopping cart:
{"value":{"_key":"4296e05ca225","_type":"code","code":"import { create } from 'zustand';\n\ninterface CartItem {\n id: string;\n name: string;\n price: number;\n quantity: number;\n}\n\ninterface CartState {\n items: CartItem[];\n addItem: (item: Omit<CartItem, 'quantity'>) => void;\n removeItem: (id: string) => void;\n clearCart: () => void;\n}\n\nexport const useCartStore = create<CartState>((set) => ({\n items: [],\n addItem: (newItem) =>\n set((state) => {\n const existing = state.items.find((item) => item.id === newItem.id);\n if (existing) {\n return {\n items: state.items.map((item) =>\n item.id === newItem.id ? { ...item, quantity: item.quantity + 1 } : item\n ),\n };\n }\n return { items: [...state.items, { ...newItem, quantity: 1 }] };\n }),\n removeItem: (id) =>\n set((state) => ({\n items: state.items.filter((item) => item.id !== id),\n })),\n clearCart: () => set({ items: [] }),\n}));","filename":"","language":"typescript"},"isInline":false,"index":5}
Using the Store in Components
Using the Zustand hook in React components is highly intuitive:
{"value":{"_key":"a2a67e5dcd31","_type":"code","code":"import { useCartStore } from './cartStore';\n\nexport default function CartIndicator() {\n // Only re-renders if items.length changes\n const itemCount = useCartStore((state) => state.items.length);\n const clearCart = useCartStore((state) => state.clearCart);\n\n return (\n <div className=\"flex gap-4 items-center\">\n <span>Cart items: {itemCount}</span>\n <button onClick={clearCart} className=\"bg-red-500 text-white px-2 py-1 rounded\">\n Clear\n </button>\n </div>\n );\n}","filename":"","language":"typescript"},"isInline":false,"index":8}
With Zustand, state management is simplified back to standard JS actions and objects, keeping performance fast and code concise.