Quick Start Guide: Installing and Using Zustand with pnpm

Zustand is a state management library that is lighter than Redux and simpler to use than the Context API. Here is a step-by-step guide to integrating Zustand into your project using pnpm.

1. Install Package with pnpm

Navigate to your project's root directory in the terminal and run the following command to install:

pnpm add zustand

2. Creating a Store

Zustand uses the create function to define a store. A key feature is that it can be used immediately without any Provider setup.

import { create } from 'zustand'

// Define types for State and Actions
interface CounterState {
  count: number
  increment: () => void
  decrement: () => void
}

// Create and export the store
export const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}))

3. Using in Components

Call the created store inside your component just like a Hook. Selecting only the specific data you need helps with performance optimization.

import { useCounterStore } from './store'

function CounterComponent() {
  // Select specific state and functions
  const count = useCounterStore((state) => state.count)
  const { increment, decrement } = useCounterStore()

  return (
    <div>
      <h1>Value: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  )
}

4. Key Summary

• Zero Config: No need for Context Providers or complex initial boilerplate.
• Simple API: Update state via the set function and consume it as a Hook in components.
• pnpm Efficiency: Works fast and lightweight even under pnpm’s strict dependency management.