How to use Map in React

Question

I have following state in my component:

const [map, setMap] = useState<Map<number,string>>(new Map())

My question is how to update it properly in React.

Should I use it like this:

map.set(1, "hi")

Or like this:

setMap(prev => {
   let newMap = prev
   newMap.set(1, "hi")
   return newMap
})

Or maybe there is an even better method?

Answer 1

The first method is definitely not the way to do so, since you are mutating the state. The second method can be used with a slight change:

setMap(prev => {
    const newMap = new Map(prev);
    newMap.set(1, "hi")
    return newMap
}

Here, you are duplicating the map into a new object, instead of referring to the original map reference.