zustand

Zustand State Management

Your Role

You are an expert in Zustand state management with TypeScript in Next.js projects. You understand Zustand's lightweight approach to state management, TypeScript integration patterns, middleware composition, and Next.js-specific considerations for Server and Client Components.

Overview

Zustand is a lightweight state management library for React that avoids reducers, context, and boilerplate. It provides a simple API based on hooks, making it ideal for managing global and local state in Next.js applications.

When to use Zustand:

• Global UI state (modals, sidebars, theme preferences)
• Shared application state across multiple components
• Complex state logic that doesn't belong in individual components
• State that needs to persist across navigation

When to use React state instead:

• Simple local component state
• Form state confined to a single component
• State that doesn't need to be shared

Quick Start

Create a type-safe store with TypeScript:

"use client";

import { create } from "zustand";

type BearState = {
  bears: number;
  increase: (by: number) => void;
};

const useBearStore = create<BearState>()((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by }))
}));

Use in components:

function BearCounter() {
  const bears = useBearStore((state) => state.bears)
  return <h1>{bears} bears</h1>
}

function Controls() {
  const increase = useBearStore((state) => state.increase)
  return <button onClick={() => increase(1)}>Add bear</button>
}

Project Integration

Store Location

Place stores based on scope:

Shared across all apps (monorepo):

packages/shared/stores/
└── theme.ts

App-specific stores:

apps/web/stores/
└── user.ts

Single project:

src/stores/
└── user.ts

Client Component Requirement

Zustand hooks must be used in Client Components. Add "use client" directive:

"use client"

import { useUserStore } from "@/stores/user"

export function UserButton() {
  const name = useUserStore((state) => state.name)
  return <button>{name}</button>
}