Read derived state
A component needs a list, count, or other value derived from several store fields.
Zustand · Const
computed values
Compute derived values with a Zustand selector. If the selector creates an unchanged object or array, useShallow can prevent rerenders by comparing the result shallowly.
How it works
A computed value is obtained by passing a selector to the store hook. Zustand compares the selector result with Object.is; when the selector creates a new object or array whose contents are effectively unchanged, useShallow can compare its entries and prevent unnecessary rerenders.
Syntax
useStore(selector)
useStore(useShallow(selector))Returns
The selected computed value for use in the component.
Key points
- Use a selector to subscribe to derived data instead of storing a duplicate value.
- Selectors can compute values such as property-name arrays directly from current store state.
- The default result check is Object.is.
- useShallow is appropriate when the computed result remains shallowly equal across updates.
Common mistakes
- A selector that returns a newly created object or array can rerender when its reference changes, even if its contents are unchanged.
- Use useShallow when the computed result is consistently shallow-equal to its previous result.
Example: Shallow-stable computed selection
import { create } from 'zustand'
import { useShallow } from 'zustand/react/shallow'
type Meals = {
papaBear: string
mamaBear: string
littleBear: string
}
const useMeals = create<Meals>(() => ({
papaBear: 'large porridge-pot',
mamaBear: 'middle-size porridge pot',
littleBear: 'A little, small, wee pot',
}))
export function BearNames() {
const names = useMeals(useShallow((state) => Object.keys(state)))
return <div>{names.join(', ')}</div>
}The component derives an array of property names and uses shallow comparison so unchanged array contents do not trigger an unnecessary rerender.
When to use it
Avoid unnecessary rerenders
A selector allocates an object or array on every evaluation but its shallow contents usually stay the same.
Subscribe to a projection
A component should react only to a computed projection of store data rather than unrelated fields.
Interview questions
QHow do you derive a value from a Zustand store?
A computed value is normally produced with a selector, such as (state) => Object.keys(state). The component subscribes to that selector's result rather than the entire store.
Follow-up: What determines whether the component rerenders? The selector output is checked with Object.is, so a changed reference can be significant.
QWhy can a computed selector cause unnecessary rerenders?
Object.is compares the selector result with its previous result. A newly allocated array or object therefore counts as changed even when it contains the same shallow values.
Follow-up: How can this be improved for shallowly equal results? Wrap the selector with useShallow so Zustand compares the selected entries shallowly.
QWhen should you use useShallow?
useShallow is useful when a selector repeatedly returns a result that is shallowly equal to the previous result. It lets the component avoid rerendering for unrelated store updates that do not alter those shallow values.
Follow-up: When should it not be used? It is not a deep comparison; nested changes require a comparison strategy appropriate to the selected data.
Related
useShallowshallowselectors