Updating a nested object
A store keeps a related group of fields under one object and one field must change without losing its siblings.
Zustand · Const
nested state
Zustand's set merges only the store's top level. To update nested state safely, copy the nested object and overwrite the changed property; deeper updates require copying each object level involved.
How it works
Zustand's set function merges only the top level of the store. When changing a nested object, explicitly copy that object with the spread operator and replace the changed property; for deeper structures, copy every object level involved in the update.
Syntax
set((state) => ({ nested: { ...state.nested, key: nextValue } }))Key points
- Top-level properties can be updated without manually copying unrelated top-level state, but nested objects require their own merge logic.
- Create a new nested object and include its existing properties before assigning the changed value.
- The standard immutable pattern is to spread the prior nested object, then overwrite only the property being updated.
- The second argument can request full replacement instead of the normal shallow merge.
Common mistakes
- Nested objects are not merged automatically. Updating one nested property without spreading the existing nested object can discard its sibling properties.
- Passing the replace flag changes set's behavior, so replacing the whole store can remove fields that are absent from the new state.
Example: Updating a nested object immutably
import { create } from 'zustand'
type Store = {
nested: { count: number }
increment: () => void
}
const useStore = create<Store>((set) => ({
nested: { count: 0 },
increment: () =>
set((state) => ({
nested: {
...state.nested,
count: state.nested.count + 1,
},
})),
}))
useStore.getState().increment()
console.log(useStore.getState().nested.count)The action preserves the nested object while replacing it with a copy containing the incremented count.
When to use it
Updating deeply nested data
A state value is several object levels deep and must be changed immutably.
Replacing the entire state
A complete replacement state is intentionally constructed and should not be merged with the old store.
Interview questions
QHow does Zustand update nested state?
Zustand merges updates shallowly, at the store's first level. A nested object therefore needs to be copied explicitly before changing one of its properties.
Follow-up: How would you update a value three levels deep? Copy each containing object with the spread operator, from the outer level down to the object being changed.
QHow should a nested counter be incremented?
Use an updater function such as set((state) => ({ ... })) when the next value depends on current state. For a nested update, spread the existing nested object and calculate the new property from the previous value.
Follow-up: Why prefer an updater function for an increment? It reads the current store value supplied by Zustand and avoids constructing the update from a potentially stale external value.
QWhat does the replace argument to set do?
The replace argument can disable Zustand's default merge behavior: set((state) => newState, true). With replacement enabled, the returned object becomes the store state rather than being shallowly merged.
Follow-up: What risk does replacement create? Any state fields omitted from the returned object are no longer present, so the complete state shape must be supplied.
Related
setcreateupdater functionsspread operatordeeply nested object