Per-request server stores
A server handles multiple simultaneous requests and each request needs isolated state.
Zustand · Const
store factory
A store factory is a function that creates a fresh Zustand vanilla store, optionally initialized with caller-provided state. It is useful for per-request or otherwise isolated stores.
How it works
A store factory is an ordinary function that calls createStore to produce a fresh vanilla Zustand store. Each invocation can receive initialization data and returns a separate store instance exposing state-management methods.
Syntax
const createCounterStore = (initState: CounterState = defaultInitState) => {
return createStore<CounterStore>()((set) => ({
...initState,
// actions
}))
}Parameters
| Name | Type | Description |
|---|---|---|
initState | CounterState | Optional initial state used to initialize the newly created store; the documented example defaults it to defaultInitState. |
Returns
A new vanilla Zustand store (StoreApi<CounterState>) for each factory invocation.
Key points
- A factory function can produce a distinct store for every request or other isolated owner.
- Use
createStorewhen the factory should return a standalone store rather than a React hook. - The returned store supplies imperative APIs for changing state, reading state, retrieving initial state, and subscribing.
- Per-request construction prevents request data from leaking through shared global module state.
- When using server rendering, initialize the client-side store with matching server data to avoid inconsistent state.
Common mistakes
- Do not invoke the creator's
set,get, orstorearguments while the store is being initialized; use them after creation, such as inside actions. - For server-rendered applications handling concurrent requests, create a new store per request rather than keeping one global instance.
Example: Factory for independent vanilla stores
import { createStore } from 'zustand/vanilla'
type CounterState = {
count: number
increment: () => void
}
const createCounterStore = (initialCount = 0) =>
createStore<CounterState>()((set) => ({
count: initialCount,
increment: () => set((state) => ({ count: state.count + 1 })),
}))
const store = createCounterStore(2)
store.getState().increment()
console.log(store.getState().count) // 3Creates a standalone counter store from an initial value, then uses its API to update and read state.
When to use it
Isolated store instances
Several independent widgets or tests need identical store logic with separate data.
Vanilla state management
A store must be consumed by code that is not itself a React component.
Interview questions
QWhy wrap createStore in a factory?
A factory is useful when each consumer needs an independent store instance, such as separate requests or isolated component state. It calls createStore for every invocation and can merge supplied initial state into the store.
Follow-up: Why avoid a global store in a server application? Concurrent requests could observe or mutate shared module state, so the store must be created per request.
QWhat does a factory-created store expose?
createStore creates a vanilla store without React bindings. The returned object provides setState, getState, getInitialState, and subscribe, so it can be used from non-React code or connected to React separately.
Follow-up: What is the React-oriented alternative? Use Zustand's create function to create a store bound to React through a hook.
QHow does the state creator define the store?
The state creator receives set, get, and store, and normally returns the state and actions to expose. Updates are performed through set, while consumers can read current state with getState on the resulting store.
Follow-up: When are the creator arguments safe to use during initialization? They should not be called synchronously until the store has been created; defer usage to actions or later operations.
Related
createStorecreateStoreApisetStategetStategetInitialStatesubscribe