Share state through a vanilla store API
Framework-independent state
Zustand · Function
createStore
createStore creates a vanilla Zustand store with an imperative API. Pass a state creator to define its state and actions.
How it works
Call the curried function with a state creator to build a vanilla store. The creator defines initial state and actions; the returned store exposes methods for reading, updating, subscribing, and retrieving initial state.
Syntax
createStore<T>()(stateCreatorFn: StateCreator<T, [], []>): StoreApi<T>Parameters
| Name | Type | Description |
|---|---|---|
stateCreatorFn | StateCreator<T, [], []> | A function receiving set, get, and store; it generally returns the state and methods exposed by the store. |
Returns
A vanilla store API of type StoreApi<T>, exposing setState, getState, getInitialState, and subscribe.
Key points
- Use createStore when you need a store object that is independent of React hooks.
- The state creator receives the three core store-building arguments: set, get, and store.
- Return an object containing the store's state and the actions consumers can call.
- The returned object is the operational store, not merely a state initializer.
- Consumers can update state, read current or initial state, and subscribe to changes through the returned API.
Common mistakes
- Do not invoke the creator's set, get, or store arguments while the store is being initialized; use them after creation, such as inside actions.
Example: Create and update a vanilla store
import { createStore } from 'zustand/vanilla'
type CounterStore = {
count: number
increment: () => void
}
const counterStore = createStore<CounterStore>()((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}))
counterStore.getState().increment()
console.log(counterStore.getState().count)
Creates a vanilla counter store, updates it through an action, and reads the resulting state.
When to use it
Read and update state outside React components
Imperative application code
Subscribe to store changes
External observers
Interview questions
QWhat does createStore return?
createStore builds a vanilla Zustand store rather than a React-bound hook. Its result provides state-management utilities including setState, getState, getInitialState, and subscribe.
Follow-up: How would you connect it to React? Use Zustand's store-consuming integration and select the state needed by a component, while keeping the vanilla store as the underlying API.
QWhat arguments does the state creator receive?
The state creator receives set, get, and store. It normally returns the state fields and methods that the store should expose.
Follow-up: Why avoid calling those arguments during initialization? The documentation says they are only safe after creation, so defer such calls to action execution or later lifecycle code.
QWhat is the TypeScript signature?
The documented signature is createStore<T>()(stateCreatorFn: StateCreator<T, [], []>): StoreApi<T>. The first call supplies the state type, and the second accepts the state creator.
Follow-up: When is a vanilla store useful? It is appropriate when store access should be exposed through an API object independently of a React hook.
Related
createStoreApisetStategetStategetInitialStatesubscribeStateCreator