zustand-state

Zustand State Management

Store Creation

Prefer create for React-bound stores. Use createStore (vanilla) only when sharing state outside React (e.g., initializing from a socket listener module).

// stores/useCounterStore.ts
import { create } from 'zustand';
import { devtools, immer } from 'zustand/middleware';

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

export const useCounterStore = create<CounterState>()(
  devtools(
    immer((set) => ({
      count: 0,
      increment: () => set((state) => { state.count += 1; }),
    })),
    { name: 'CounterStore' }
  )
);

Slice Pattern (Large Stores)

Split domains into slices; apply middleware only at the root.

// stores/slices/chatSlice.ts
import { StateCreator } from 'zustand';
import { RootStore } from '../useRootStore';

export interface ChatSlice {
  messages: string[];
  addMessage: (msg: string) => void;
}

export const createChatSlice: StateCreator<RootStore, [['zustand/immer', never]], [], ChatSlice> = (set) => ({
  messages: [],
  addMessage: (msg) => set((state) => { state.messages.push(msg); }),
});

// stores/useRootStore.ts
export type RootStore = ChatSlice & OtherSlice;

export const useRootStore = create<RootStore>()(
  devtools(immer((...a) => ({ ...createChatSlice(...a), ...createOtherSlice(...a) })))
);

Selectors and Re-render Optimization

Subscribe to the minimal shape needed. Use useShallow for object/array selections; use atomic selectors for primitives.

// Primitive — no useShallow needed
const count = useCounterStore((s) => s.count);

// Multiple fields — use useShallow to avoid identity churn
import { useShallow } from 'zustand/react/shallow';
const { name, role } = useUserStore(useShallow((s) => ({ name: s.name, role: s.role })));

// Stable action reference — select once outside render or memoize
const addMessage = useRootStore((s) => s.addMessage);

Middleware Stack Order

devtools( persist( subscribeWithSelector( immer( ... ) ) ) )