External state management
A vanilla store feeds non-React code such as an event bridge or service.
Zustand · Const
selector subscription
subscribeWithSelector adds selector-based subscriptions to a Zustand store. It lets subscribers react to selected partial state instead of requiring subscriptions to the entire state.
How it works
The selector subscription capability is provided by the subscribeWithSelector middleware. It extends a vanilla store's subscribe method so a listener receives a selected slice instead of every complete-state update; selector and listener arguments can be used to react to targeted changes, with equality support available.
Syntax
subscribeWithSelector<T>(stateCreatorFn: StateCreator<T, [], []>): StateCreator<T, [['zustand/subscribeWithSelector', never]], []>Parameters
| Name | Type | Description |
|---|---|---|
stateCreatorFn | StateCreator<T, [], []> | State creator function receiving set, get, and store, normally returning the store state and exposed methods. |
Returns
A state creator function typed with the zustand/subscribeWithSelector middleware mutator.
Key points
- Its generic signature accepts a state creator and returns a state creator marked with the selector-subscription middleware.
- It narrows notifications to data selected from the current store state.
- The wrapped creator receives the standard
set,get, andstorearguments. - The middleware is applied during store construction, before the resulting store is used.
- The documented usage creates a typed vanilla store with
createStoreand applies the middleware around its creator.
Common mistakes
- The listener responds to the selected partial state, not necessarily every update to the complete store.
- This API is intended for subscriptions outside React components; use the store subscription rather than assuming component-hook behavior.
Example: Subscribe to a selected slice
import { createStore } from 'zustand/vanilla'
import { subscribeWithSelector } from 'zustand/middleware'
type PositionStore = {
position: { x: number; y: number }
setPosition: (position: { x: number; y: number }) => void
}
const store = createStore<PositionStore>()(
subscribeWithSelector((set) => ({
position: { x: 0, y: 0 },
setPosition: (position) => set({ position }),
})),
)
const unsubscribe = store.subscribe(
(state) => state.position,
(position) => console.log(position),
)
store.getState().setPosition({ x: 10, y: 20 })
unsubscribe()Creates a vanilla store and listens only when the selected position changes.
When to use it
Granular updates
A large store contains independent fields and consumers need only one field's changes.
Vanilla store construction
A typed store is built with createStore and should expose selector-aware subscriptions.
Interview questions
QWhat does selector subscription provide?
The subscribeWithSelector middleware augments a store creator so subscribe can observe a selected part of state. The listener runs when that partial state updates.
Follow-up: How can unnecessary notifications be limited? Use selector-based subscription together with the middleware's equality support.
QHow is it enabled?
Wrap the state creator with subscribeWithSelector, then create the store. The resulting store's subscribe method supports subscribing to a selected slice.
Follow-up: What kind of store is shown in the documentation? A vanilla store created with createStore, rather than a React-bound hook.
QWhat is the middleware's signature?
The middleware accepts a state creator function and returns another state creator function. That returned creator carries the middleware mutator type and can be passed to store creation.
Follow-up: What does the state creator receive? It receives set, get, and store arguments, allowing state and actions to be defined.
Related
createStoresubscribeStateCreatorsetgetstore