Zustand Store Builder

Zustand is a small, fast, and scalable state management library for React. Unlike Redux, it doesn't require action types, reducers, or a Provider wrapper. You define a store as a function, and components subscribe to slices of state with minimal re-renders. It works with TypeScript out of the box.

Use Zustand when state needs to be shared across multiple components that aren't in the same component tree, or when you want to avoid prop drilling. For truly local state, useState or useReducer is simpler. Zustand is ideal for global UI state (modals, themes, user sessions) or feature-level shared state.

set merges the new state with existing state (shallow merge by default). get lets you read the current state inside actions — useful when an action needs to derive new state from the current state. For deep updates, use immer middleware or spread manually: set(state => ({ nested: { ...state.nested, key: value } })).

Define your store interface separately and pass it as a generic to create: const useStore = create<StoreType>()(set => (...)). All state and actions will be fully typed. Use the StateCreator utility type when splitting stores into slices.

Slices are a pattern for splitting a large Zustand store into smaller, focused pieces. Each slice is a StateCreator function that manages a domain (e.g., auth slice, cart slice). They're combined in a single create() call. This improves organization without giving up the simplicity of a single store.

Use the persist middleware: import { persist } from 'zustand/middleware'. Wrap your store function with persist(fn, { name: 'storage-key' }). By default it uses localStorage. For sessionStorage, pass { storage: createJSONStorage(() => sessionStorage) }. You can also whitelist specific keys with partialize.