Read a single value
A component displays one field such as a count and should not depend on unrelated store updates.
Zustand · Const
selector
A Zustand selector is a function that extracts the state or action a component needs. Passing it to the store hook limits the subscription to that selected data.
How it works
A selector is a function passed to a Zustand store hook that extracts the portion of state a component needs. The component then subscribes to that selected result rather than reading the entire store, while actions can be selected in the same way.
Syntax
useStore(selectorFn)
useStore(storeApi, selectorFn)Parameters
| Name | Type | Description |
|---|---|---|
storeApi | StoreApi<T> | The store instance used for selecting state, when using useStore with a vanilla store. |
selectorFn | (state: T) => U | A function that returns data derived from the current state. |
Returns
The selected data derived from the current state; with useStore, the return type is U.
Key points
- Use selectors for both state properties and action functions rather than accessing the complete store value.
- A selector narrows a component subscription to the requested slice, reducing dependence on unrelated store changes.
- Selectors can package several fields into one returned object when a component needs them together.
- Selecting specific data is more efficient than subscribing a component to every store field.
- Use useShallow when a computed selector produces values that remain shallowly equal across updates.
Common mistakes
- Computed selector results are compared with Object.is by default, so a newly created result can trigger a rerender even when its contents appear equivalent.
- Returning a fresh object for multiple selected fields may cause extra renders; use useShallow when the result should be compared shallowly.
Example: Selecting one store value
import { create } from 'zustand'
type BearStore = {
bears: number
increment: () => void
}
const useBearStore = create<BearStore>((set) => ({
bears: 0,
increment: () => set((state) => ({ bears: state.bears + 1 })),
}))
export function BearCount() {
const bears = useBearStore((state) => state.bears)
return <button onClick={useBearStore.getState().increment}>{bears}</button>
}The component subscribes only to the bears value by passing a selector to the store hook.
When to use it
Select multiple fields
A component needs several state fields together.
Read computed state
A component derives a computed list or value from store state.
Interview questions
QWhat is a Zustand selector and why use one?
A selector is a function such as state => state.bears that returns the data a component needs. The store hook uses that result for the component's subscription.
Follow-up: What happens when the selector returns an object? A new object may fail Object.is comparison and rerender the component; useShallow when shallow equality is appropriate.
QHow do you select multiple values?
A selector can return more than one property by returning an object. Without additional equality handling, destructuring that object can cause unnecessary rerenders.
Follow-up: How can this be improved? Wrap the selector with useShallow so unchanged shallow values do not cause a rerender.
QHow are selectors used with a vanilla Zustand store?
useStore accepts a vanilla store and an optional selector. The selector returns data derived from the current state, and useStore returns that selected data.
Follow-up: Why use a selector with a vanilla store? It lets React subscribe to the relevant slice instead of treating the whole state as the component's required value.
Related
useShallowuseStoresubscribeWithSelectorcreate