Map and Set in Zustand

Map and Set are mutable data structures. To use them in Zustand, you must create new instances when updating.

Map

Reading a Map

const foo = useSomeStore((state) => state.foo)

Updating a Map

Always create a new Map instance:

// Update single entry
set((state) => ({
  foo: new Map(state.foo).set(key, value),
}))

// Delete entry
set((state) => {
  const next = new Map(state.foo)
  next.delete(key)
  return { foo: next }
})

// Update multiple entries
set((state) => {
  const next = new Map(state.foo)
  next.set('key1', 'value1')
  next.set('key2', 'value2')
  return { foo: next }
})

// Clear
set({ foo: new Map() })

Set

Reading a Set

const bar = useSomeStore((state) => state.bar)

Updating a Set

Always create a new Set instance:

// Add item
set((state) => ({
  bar: new Set(state.bar).add(item),
}))

// Delete item
set((state) => {
  const next = new Set(state.bar)
  next.delete(item)
  return { bar: next }
})

// Toggle item
set((state) => {
  const next = new Set(state.bar)
  next.has(item) ? next.delete(item) : next.add(item)
  return { bar: next }
})

// Clear
set({ bar: new Set() })

Why New Instances?

Zustand detects changes by comparing references. Mutating a Map or Set doesn't change its reference:

// ❌ Wrong - same reference, no re-render
set((state) => {
  state.foo.set(key, value)
  return { foo: state.foo }
})

// ✅ Correct - new reference, triggers re-render
set((state) => ({
  foo: new Map(state.foo).set(key, value),
}))

Pitfall: Type Hints for Empty Collections

Provide type hints when initializing empty Maps and Sets:

{
  ids: new Set([] as string[]),
  users: new Map([] as [string, User][])
}

Without type hints, TypeScript infers never[] which prevents adding items later.

Demos

Basic: https://stackblitz.com/edit/vitejs-vite-5cu5ddvx