zustand

name	zustand
description	Zustand — lightweight state management with stores, selectors, middleware, slices pattern.

zustand

Stores & Actions

• create((set, get) => ({ count: 0, inc: () => set((s) => ({ count: s.count + 1 })) })) — define store.
• set for partial state merges; get() for current state inside actions.
• set({ count: 5 }, true) — replace entire state instead of shallow merge.

Selectors

• useStore((s) => s.count) — subscribe with selector; re-renders only on change.
• useStore.getState() / useStore.setState(...) — read/write outside React.
• subscribe((state) => console.log(state)) — listener for non-React contexts.
• subscribe((s) => s.count, (count) => ...) — selector-based subscription (v4+).

Middleware

• persist — persist(store, { name: 'key', storage: createJSONStorage(() => localStorage) }).
• immer — immer((state) => { state.items.push(newItem) }) — mutable-style updates.
• devtools — devtools(store, { name: 'StoreName' }) — Redux DevTools integration.
• subscribeWithSelector — enables selector-specific subscriptions.

Slices Pattern

• Compose stores: create((...a) => ({ ...createUserSlice(...a), ...createCartSlice(...a) })).
• Each slice receives set, get — no cross-slice coupling.
• useBoundStore — re-export composed store with typed selectors.

Computed Values

• Derive state in selectors: useStore((s) => s.items.filter((i) => i.active)).
• Use subscribeWithSelector + local computation for memoized derivations.
• Middleware combine or manual get() in actions for computed side effects.