Derive values without duplicated state
A component needs a count, total, label, or other value calculated from existing fields.
Zustand · Const
computed selectors
A computed selector derives a subscribed value from Zustand state instead of storing duplicate data. Zustand uses Object.is for the result by default; useShallow helps when recreated objects or arrays remain shallowly equal.
How it works
A computed selector derives a value from the current Zustand state instead of storing a duplicate value. Zustand compares the selector result with Object.is by default; useShallow can prevent rerenders when a newly created result is shallowly equal to the previous result.
Syntax
useStore((state) => derivedValue)Parameters
| Name | Type | Description |
|---|---|---|
state | Store state | The current Zustand state supplied to the selector. |
selector | (state) => selectedValue | A function that derives the subscribed value from state. |
Returns
The value produced by the selector from the current store state.
Key points
- Use a selector whenever a component needs a value computed from store state.
- Derived values do not need separate storage when they can be calculated from existing state.
- Computed selectors reduce duplicated state and keep the store focused on source data.
- Selecting only the required result narrows the component subscription and can reduce rerenders.
Common mistakes
- By default, rerendering follows Object.is comparison, so a newly allocated result can trigger a rerender even when its contents are unchanged.
- Use useShallow when the computed result is recreated but remains shallowly equal across updates.
Example: Computed selector with shallow comparison
import { create } from 'zustand'
import { useShallow } from 'zustand/react/shallow'
type MealState = {
meals: Record<string, string>
}
const useMeals = create<MealState>(() => ({
meals: {
papaBear: 'large porridge-pot',
mamaBear: 'middle-size porridge pot',
littleBear: 'small pot',
},
}))
export function MealNames() {
const names = useMeals(useShallow((state) => Object.keys(state.meals)))
return <div>{names.join(', ')}</div>
}The selector computes an array of meal names, while useShallow avoids rerendering when that array remains shallowly equal.
When to use it
Avoid unnecessary rerenders for recreated results
A selector returns Object.keys, a mapped array, or a composite object on every evaluation.
Subscribe to a focused slice
A component should react only to a derived slice rather than every store update.
Interview questions
QWhat is a computed selector in Zustand?
A selector receives the current store state and returns the value a component should subscribe to. For derived data, it computes that value on demand rather than adding duplicated state.
Follow-up: What happens when the selector returns a new array each time? Zustand may rerender because Object.is sees a different reference; useShallow can avoid this when the contents are shallowly equal.
QHow does Zustand decide whether a computed selector changed?
Zustand compares a selector's output with Object.is by default. Therefore, a new object or array reference is considered changed even if its entries have not changed.
Follow-up: How can you optimize a selector returning Object.keys(state)? Wrap the selector with useShallow so shallowly equal arrays do not cause unnecessary rerenders.
QWhen should useShallow be used with computed selectors?
useShallow wraps a selector and compares its result shallowly. This is useful when the selector creates a new object or array whose top-level values remain equal.
Follow-up: When should useShallow not be the first choice? Prefer selecting a primitive or stable state field directly when that expresses the requirement without constructing a composite result.
Related
useShallowcreateuseStoresubscribeWithSelectorselectors