Map-backed state
Maintain keyed records while preserving immutable updates.
Zustand · Const
Map and Set support
Use Map and Set values in Zustand by replacing them with newly created instances on every update. This preserves reference changes so Zustand can detect updates and re-render subscribers.
How it works
The page explains how to store Map and Set values in Zustand while preserving immutable update semantics. Clone the collection, apply the mutation to the clone, and return the new reference so Zustand can detect the change.
Syntax
set((state) => ({ collection: new Map(state.collection) }))Key points
- Map and Set can be stored in Zustand state, but their mutable nature requires immutable replacement during updates.
- For Map updates, clone the current Map before changing one entry, deleting entries, applying several changes, or clearing it.
- For Set updates, clone the current Set before adding, deleting, toggling, or clearing members.
- The replacement collection's new reference is what lets Zustand recognize the update.
Common mistakes
- Changing a Map or Set in place does not trigger Zustand's reference-based change detection; create a new collection instance instead.
- Empty Map and Set literals may need explicit TypeScript type hints so their element types are inferred correctly.
Example: Immutable Set update
import { create } from 'zustand'
type Store = {
selected: Set<string>
toggle: (id: string) => void
}
const useStore = create<Store>((set) => ({
selected: new Set<string>(),
toggle: (id) =>
set((state) => {
const next = new Set(state.selected)
next.has(id) ? next.delete(id) : next.add(id)
return { selected: next }
}),
}))
useStore.getState().toggle('a')
console.log(useStore.getState().selected.has('a'))Creates a Zustand store with a Set and toggles membership by cloning the Set before changing it.
When to use it
Set-backed state
Track selected, enabled, or expanded identifiers.
Collection toggles
Toggle membership in a collection from an action.
Interview questions
QHow should a Map be updated in Zustand?
Use a copy of the existing collection, mutate that copy, and return it from set. For example, create a new Map from the old Map before calling set, delete, or clear operations.
Follow-up: Why is returning the original Map unsafe? Because its reference is unchanged, so Zustand may not detect a state change and subscribers may not re-render.
QHow should a Set be updated in Zustand?
Create a new Set from the current Set, then add, delete, or toggle the item on the copy. Return the new Set in the state update.
Follow-up: How would you toggle membership? Check whether the copied Set has the item; delete it when present, otherwise add it.
QWhy must Map and Set updates create new instances?
Zustand detects changes by comparing references. Since Map and Set are mutable, in-place operations preserve the reference and do not provide the new reference needed for reliable change detection.
Follow-up: What should an empty typed collection look like in TypeScript? Use an explicit assertion such as new Set([] as string[]) or new Map([] as [string, User][]).
Related
setuseSomeStoreMapSet