Provider-free global state
Use a shared application store directly from React components without adding a provider.
Zustand · Const
React bindings
create creates a React-bound Zustand hook from a state creator. Components use selectors with the hook to subscribe to the state they need, while store API utilities are attached to the hook.
How it works
create turns a state creator into a hook with store API methods attached. Components call that hook with a selector; each component subscribes to the selected value and re-renders when that value changes, without requiring a provider.
Syntax
create<T>()(stateCreatorFn: StateCreator<T, [], []>): UseBoundStore<StoreApi<T>>Parameters
| Name | Type | Description |
|---|---|---|
stateCreatorFn | StateCreator<T, [], []> | A function receiving set, get, and store; it defines the store's state and actions. |
Returns
A React hook with attached setState, getState, getInitialState, and subscribe utilities. The hook accepts a selector and returns the selected current state.
Key points
- Use
createto produce one React hook that combines component subscription with store API utilities. - The returned hook is conventionally named with a
useprefix and is created directly from a state-creator function. - Call the hook with a selector to derive the value a component should consume.
- Selectors limit a component's subscription to the chosen state value.
- A bound store can be consumed without wrapping the component tree in a provider.
- State updates through
setmerge the supplied partial object rather than replacing the complete state.
Common mistakes
- Do not synchronously call the creator's
set,get, orstorearguments while the store is being initialized; use them after creation, such as inside actions.
Example: React-bound store
import { create } from 'zustand'
type BearState = {
bears: number
increasePopulation: () => void
}
const useBear = create<BearState>()((set) => ({
bears: 0,
increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
}))
export function BearCounter() {
const bears = useBear((state) => state.bears)
return <h1>{bears} bears around here...</h1>
}
export function Controls() {
const increasePopulation = useBear((state) => state.increasePopulation)
return <button onClick={increasePopulation}>one up</button>
}Creates a React-bound store and uses selectors to read state or obtain an action.
When to use it
Selective component subscriptions
Subscribe a component to a precise field or action instead of consuming the whole store.
Imperative store access
Read or modify store state from code that is not rendering a React component.
Interview questions
QWhat does Zustand's create function provide?
create accepts a state creator and returns a React hook with store utilities attached. The hook takes a selector, allowing a component to derive the state value it needs.
Follow-up: How can a component avoid subscribing to unrelated state? Pass a selector that returns only the required field or action.
QHow do React components consume a bound Zustand store?
A component invokes the returned hook with a selector, such as state => state.bears. The component re-renders when the selected state changes.
Follow-up: Why select an action separately? It expresses the component's dependency narrowly and avoids selecting unrelated state.
QWhich API utilities are attached to the hook returned by create?
The returned hook also exposes setState, getState, getInitialState, and subscribe. These utilities are attached to the hook in addition to its selector-based React usage.
Follow-up: When would a non-React caller use these utilities? It can imperatively read, update, or subscribe to the store without rendering a React component.
Related
useStoreuseStoreWithEqualityFnuseShallowcreateStorecreateWithEqualityFn