Zustand

What Zustand is

Zustand is a small (~1 KB) library for global state: a store created with a function, used like a hook. No provider, no string action types, no reducers — just state and the functions that change it.

import { create } from 'zustand'

type CartState = {
  items: number[]
  add: (id: number) => void
  clear: () => void
}

export const useCart = create<CartState>()(set => ({
  items: [],
  add: id => set(state => ({ items: [...state.items, id] })),
  clear: () => set({ items: [] }),
}))

'use client'
const count = useCart(state => state.items.length)   // a selector
const add = useCart(state => state.add)
<button onClick={() => add(product.id)}>Add</button>

How it works

• create returns a hook. The store lives outside React; components subscribe to it.
• set merges the new object into the existing state, at the first level — you don't have to copy everything.
• A component re-renders only when the value returned by its selector changes.

Selectors — the most important detail

The rule: select as little as possible; for several values, several calls or useShallow.

Useful middleware

import { persist, devtools } from 'zustand/middleware'

export const useSettings = create<Settings>()(
  persist(
    set => ({ theme: 'light', setTheme: theme => set({ theme }) }),
    { name: 'settings' },                 // the localStorage key
  ),
)

Zustand vs Redux Toolkit

Zustand with Next.js

A module-level global store is shared on the server between requests. The rules:

• Use the store only in Client Components.
• Don't put user-specific data in it during server rendering; for that, create the store per request (createStore + Context) — the official guide describes the pattern.
• With persist, the value from localStorage appears only after hydration.

Where it lives in FSD

A store tied to an entity → entities/cart/model/cart-store.ts. A global UI store → shared/model/ or the slice that owns it.

Summary

• Zustand = create → a hook; set merges; no provider.
• Small selectors; useShallow for several values.
• persist for localStorage; in Next only on the client, watch out for per-user data.

Official sources

• Zustand — Introduction
• Zustand — Setup with Next.js
• Zustand — persist middleware