Question

Views

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?

about 4 years ago · Juan Pablo Isaza

Answer question

Accepted Answer · 2022-08-23T23:56:53.523Z

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.