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?
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.