Grouped component reads
A component displays several independent store fields together.
Zustand · Const
atomic selectors
Atomic selectors select only the state a component needs, including multiple fields grouped into one object. Use useShallow with object-returning selectors to avoid rerenders when selected values remain shallowly equal.
How it works
Atomic selectors combine several store properties into one selected object and compare that result shallowly. Wrapping the selector with useShallow keeps a component subscribed to the requested values without rerendering merely because a new object was created.
Syntax
useStore(useShallow((state) => ({ valueA: state.valueA, valueB: state.valueB })))Parameters
| Name | Type | Description |
|---|---|---|
store | UseBoundStore | The Zustand store hook containing the state to select. |
selector | (state) => selection | A function that maps the store state to one or more selected values. |
Returns
The selected state values, optionally grouped in an object and compared with shallow equality.
Key points
- Selectors limit a component subscription to the state it reads instead of the complete store.
- One selector can return several fields in an object, making grouped reads convenient.
- Use
useShallowfor object selections so unchanged top-level values do not cause rerenders. - Selecting a slice is more efficient than subscribing to every store property.
- With TypeScript, selector property names are checked at compile time.
Common mistakes
- Returning a new object and destructuring it directly may trigger unnecessary rerenders; wrap the selector with useShallow.
Example: Selecting multiple values atomically
import { create } from 'zustand'
import { useShallow } from 'zustand/react/shallow'
type BearState = {
bears: number
food: number
}
const useBearStore = create<BearState>(() => ({
bears: 3,
food: 10,
}))
export function BearSummary() {
const { bears, food } = useBearStore(
useShallow((state) => ({ bears: state.bears, food: state.food })),
)
return <div>{food} units of food for {bears} bears</div>
}Selects two store properties together while using shallow comparison to avoid rerenders when their values have not changed.
When to use it
Focused subscriptions
A view should avoid rerendering for unrelated store updates.
Type-safe selectors
A TypeScript application needs checked state-property access.
Interview questions
QWhat is an atomic selector in Zustand?
An atomic selector returns multiple required values in one object, such as { bears, food }. Because object selection can otherwise create a new reference, useShallow compares the selected fields and avoids rerenders when they remain shallowly equal.
Follow-up: What happens if a nested object changes internally? Shallow comparison only compares top-level references, so a changed nested reference is treated as a changed selection.
QHow do you select multiple values without unnecessary rerenders?
Use useShallow around a selector that returns multiple fields. The component then subscribes to that selected object rather than the entire store, while shallow equality determines whether the selection changed.
Follow-up: Why not subscribe to the whole store? Whole-store selection can rerender the component for unrelated state changes.
QWhy is useShallow used with an object-returning selector?
A selector such as (state) => ({ bears: state.bears, food: state.food }) lets a component read multiple fields together. Wrapping it with useShallow prevents rerenders when those selected values remain shallowly equal.
Follow-up: What is the trade-off? Shallow comparison handles top-level fields, but deeper derived structures need an appropriate equality strategy or a more focused selector.
Related
useShallowselectorsderived stateTypeScript