Avoid redundant work
Compare flat objects before deciding whether an update is needed.
Zustand · Function
shallow
shallow compares two values using top-level equality rules. It is useful for fast checks of simple objects and collections, but it does not recursively compare nested data.
How it works
Call shallow with two values to compare them. It checks the values themselves and, for supported collections and objects, compares top-level contents rather than recursively inspecting nested data; it also considers object prototypes.
Syntax
shallow<T>(a: T, b: T): booleanParameters
| Name | Type | Description |
|---|---|---|
a | T | The first value to compare. |
b | T | The second value to compare. |
Returns
Returns true when the two inputs are shallowly equal; otherwise returns false.
Key points
- Use it for efficient equality checks when the relevant data is flat or only top-level changes matter.
- The comparison focuses on immediate properties rather than recursively examining an entire value graph.
- A true result means the compared top-level structure is shallowly equal.
- Set values can be compared using the function's shallow collection comparison.
- Matching immediate keys and corresponding values are required for object equality.
Common mistakes
- Nested changes are not detected when the nested reference remains the same, because comparison stops at the first level.
- Objects with different prototypes compare unequal even if their visible top-level properties match.
- Primitive comparisons follow value identity semantics; shallow is not a deep-equality utility.
Example: Compare flat values with shallow
import { shallow } from 'zustand/vanilla/shallow'
const previous = { count: 1, label: 'ready' }
const next = { count: 1, label: 'ready' }
console.log(shallow(previous, next)) // true
console.log(shallow(previous, { count: 2, label: 'ready' })) // falseCompares two values by their top-level entries.
When to use it
Selector equality
Check whether a selected collection's immediate contents changed.
Collection checks
Compare simple sets without recursively traversing their members.
Interview questions
QWhat does Zustand's shallow function do?
shallow<T>(a: T, b: T): boolean compares two values and returns a boolean. For objects and collections, it checks top-level values rather than recursively traversing nested structures.
Follow-up: What happens when two objects have different prototypes? They compare unequal because prototype equality is part of the algorithm.
QHow does shallow differ from deep equality?
A shallow comparison can treat two separately created flat objects as equal when their top-level properties and values match. It does not inspect nested objects or deeply nested properties.
Follow-up: Why can a nested mutation be missed? If the nested property reference is unchanged, the top-level comparison sees the same reference and does not detect the internal mutation.
QWhat are the main limitations of shallow comparison?
For primitive values, shallow agrees with Object.is when the values are the same. For objects, it compares top-level properties and also requires compatible prototypes.
Follow-up: When should a selector use another strategy? Use a different equality approach when correctness depends on changes below the first level.
Related
useShallowcreateWithEqualityFnzustand/vanilla/shallow