Centralize global state
Application-wide client state
Zustand · Const
single store
Zustand recommends keeping an application's global state in a single store. Large stores can be organized with slices while remaining one bounded store.
How it works
Keep application-wide state in one Zustand store, creating it with create and exposing state plus update actions through a hook. For larger applications, organize that store into slices while still combining them into one bounded store.
Syntax
const useStore = create<State>()((set) => ({ ...state, ...actions }))Key points
- Put application-wide state in one Zustand store rather than scattering it across independent global stores.
- Use slices to divide a large store's implementation into manageable domain-specific sections.
- Update state through Zustand's setter APIs instead of mutating state directly.
- The setter APIs merge the requested update and trigger the store's listener-notification behavior.
Common mistakes
- Splitting implementation into slices does not require creating multiple independent application stores; combine slices into the main store.
Example: Single Zustand store
import { create } from 'zustand'
type Store = {
bears: number
addBear: () => void
}
export const useBearStore = create<Store>()((set) => ({
bears: 0,
addBear: () => set((state) => ({ bears: state.bears + 1 })),
}))A single bound store holds the application's global state and exposes actions through one React hook.
When to use it
Organize one store with slices
Large codebases with multiple domains
Expose state through one hook
React components sharing state
Interview questions
QWhat does Zustand recommend for global application state?
The recommended pattern is to place an application's global state in a single Zustand store. A large store can still be divided into slices for organization.
Follow-up: How can a large store remain modular? Use slice creators for separate domains, then combine their results into one bounded store.
QHow should Zustand store updates be performed?
Use set or setState for store updates. Zustand uses these APIs to merge the described update and notify listeners correctly.
Follow-up: Why avoid direct mutation? Direct mutation bypasses the store's update path and therefore does not provide the documented merge and listener-notification behavior.
QHow do components consume a single store?
A single store can expose both state and actions through a React hook created with create. Components can select the state they need from that hook.
Follow-up: What if React is not being used? Use the standalone-store API, createStore, which the reference documents as creating a store without React.
Related
createcreateStoresetsetStateslices patterncombine