Zustand Tutorial: Simple, Powerful State Management for React

Why Zustand Over Redux and Context?

Zustand is a small, fast, and scalable state management library for React. Unlike Redux, there are no actions, reducers, or dispatchers — you define state and updater functions directly. Unlike Context, components only re-render when the specific state they subscribe to changes. The entire library is under 1KB gzipped. In 2025, Zustand is the most recommended state management solution for React projects that have outgrown Context but don't need Redux's full power.

Creating Your First Zustand Store

Install Zustand with npm install zustand. Create a store file (store/useCartStore.ts): import create from 'zustand'. Define your state shape and actions in one object. The set function merges new state with the existing state — no spread operators needed. Access the store in any component with const { items, addItem } = useCartStore(). No providers, no wrappers — just import and use.

Selective Subscriptions to Avoid Re-renders

The key performance advantage of Zustand: components only re-render when the state they access changes. Pass a selector to the hook: const count = useCartStore(state => state.items.length). This component re-renders only when the cart item count changes — not when other cart properties (like total price) change. This fine-grained subscription is what makes Zustand outperform Context for frequently-changing state.

Async Actions in Zustand

Zustand handles async operations natively — just use async/await inside your action functions. Define a fetchUser action that sets a loading flag, calls the API, updates the state with the result, and sets loading to false. No special middleware needed (unlike Redux-Thunk or Redux-Saga). The set function is available via closure in async actions, so updating state after an await just works.

Persisting State to localStorage

Zustand's persist middleware syncs your store to localStorage (or sessionStorage) automatically. Wrap your store with persist(), provide a name key, and optionally specify which parts of the state to persist. The store rehydrates on page load. This is perfect for user preferences, shopping carts, and auth tokens. For sensitive data, use a custom storage adapter that encrypts values before persisting.

Zustand with TypeScript

Zustand has excellent TypeScript support. Define a State interface with your state shape and action signatures, then pass it as a generic to create<State>(). TypeScript will enforce that your initial state matches the interface and that all actions have correct parameter types. Use the devtools middleware (from zustand/middleware) to connect to Redux DevTools — you get time-travel debugging with none of Redux's boilerplate.