Zustand Common API Cheat Sheet

This quick reference guide summarizes the most common patterns and configurations in Zustand.

1. Creating a Basic Store

import { create } from "zustand";

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

export const useStore = create<State>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

2. Immutable Array Modifications

// A. Appending an item to list
addItem: (newItem) => set((state) => ({
  items: [...state.items, newItem]
})),

// B. Filtering / Deleting an item
removeItem: (itemId) => set((state) => ({
  items: state.items.filter((item) => item.id !== itemId)
})),

// C. Updating an item properties
updateItem: (itemId, newFields) => set((state) => ({
  items: state.items.map((item) =>
    item.id === itemId ? { ...item, ...newFields } : item
  )
})),

3. Configuring Persist and DevTools Middlewares

import { create } from "zustand";
import { persist, devtools } from "zustand/middleware";

interface SettingsStore {
  theme: string;
  setTheme: (theme: string) => void;
}

// Curried format () before devtools call is mandatory for correct TS inference
export const useSettings = create<SettingsStore>()(
  devtools(
    persist(
      (set) => ({
        theme: "light",
        setTheme: (theme) => set({ theme }, false, "settings/setTheme"),
      }),
      {
        name: "user-settings-storage", // localStorage Key
      }
    )
  )
);

4. Subscribing to Store Updates

import { useStore } from "./store";

// Listen to all changes in the store from outside React component
const unsubscribe = useStore.subscribe((state, previousState) => {
  console.log("Count changed to:", state.count);
});

// Clean up listener
// unsubscribe();