How to Install Zustand with pnpm/npm

Zustand is a lightweight, easy-to-use state management library for React. It has less boilerplate than Redux and needs almost no configuration. This post covers how to install Zustand using pnpm and npm.

Installation

npm

npm install zustand

pnpm

pnpm add zustand

That's all for installation.

TypeScript Support

Zustand ships with built-in type definitions, so there's no need to install a separate @types/zustand package. It works out of the box in TypeScript projects.

Basic Usage

Once installed, let's create a simple store.

import { create } from 'zustand';

interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
}

const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

Use it in a component like this:

function Counter() {
  const { count, increment, decrement } = useCounterStore();

  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

No Provider wrapper needed; just call the hook. Pulling the whole store as above re-renders the component whenever any state changes, so to use only what you need, pick it with a selector like useCounterStore((state) => state.count).

Commonly Used Middleware

Zustand comes with several useful middleware. They're included in the zustand package, so there's nothing extra to install.

• persist — Automatically save/restore state to localStorage
• devtools — Redux DevTools integration
• immer — Immer middleware (requires immer as a separate dependency)

If you want to use the immer middleware, just install immer:

# npm
npm install immer

# pnpm
pnpm add immer

Verify Installation

Check the installed version:

# npm
npm list zustand

# pnpm
pnpm list zustand

Summary