Shared UI state
A React component needs shared client state without wiring a context provider.
Zustand · Pipe
store
Zustand's create builds a hook-based store containing state and actions. Components select the data they need, and set applies merged updates without requiring a provider.
How it works
A Zustand store is created with create, which returns a hook containing state and actions. Components call that hook with selectors to subscribe to only the state they need; updates use set, whose partial results are merged into the store.
Syntax
create((set) => ({ state, actions }))Parameters
| Name | Type | Description |
|---|---|---|
stateCreator | (set) => state and actions | State creator function receiving set and returning the store's initial state and actions. |
Returns
A hook for accessing the store state and actions, with selector-based subscriptions.
Key points
- The value returned by
createis directly usable as a React hook for reading store state. - A store can contain primitive values, objects, and functions, allowing actions to live alongside state.
- Calling
setwith a partial object merges those fields into the existing state. - Pass a selector to the hook to choose the state consumed by a component.
- A component re-renders when the state selected by its selector changes.
Common mistakes
- Use
setfor updates rather than replacing state unintentionally; partial updates are merged. - The hook does not require a React provider, so adding context solely to expose this store is unnecessary.
Example: Create a store hook
import { create } from 'zustand'
type Store = {
count: number
increment: () => void
}
const useStore = create<Store>((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}))
export function Counter() {
const count = useStore((state) => state.count)
const increment = useStore((state) => state.increment)
return <button onClick={increment}>{count}</button>
}Creates a typed Zustand hook containing state and an action, then selects each value independently in a React component.
When to use it
Application-wide state
Several components need to read and update the same application values.
Selective subscriptions
A component should update only when one selected store value changes.
Interview questions
QWhat does Zustand's create function produce?
create receives a state creator and returns a hook. The state creator defines initial values and actions, while actions call set to update the store.
Follow-up: How can a component avoid subscribing to unrelated changes? Use a selector such as (state) => state.count, so it subscribes to the selected value.
QWhy use selectors when reading Zustand state?
A selector reads the required part of the store from the hook. The consuming component re-renders when that selected state changes.
Follow-up: Can actions be selected separately? Yes; select the action function independently, just as you select a state value.
QHow are state updates performed?
Zustand updates are performed through set. The updater can derive a new partial object from the current state, and Zustand merges that partial update.
Follow-up: What is a practical store design pattern for larger applications? Keep related state and actions together, and split a large store into slices when needed.
Related
createsetselectoruseBearslices