【React】MapオブジェクトをStateで管理する場合の留意点

概要

ユースケースとしてあまり無いかもしれませんが、JavaScriptのMapオブジェクトをReactのStateで管理する場合、どう更新するのかというのがふと気になりました。
Mapオブジェクトの概要については、Mapオブジェクトに関してにまとめられていますが、更新する際には基本的に作成したオブジェクトに対して、破壊的な変更が行われます。つまり、配列の更新時にハマりがちな、useStateで配列を更新するの記事にあるObject.is()が同じ値になる問題と、同様の考慮がMapオブジェクトでも必要になってきます。

対応

挙げられる対応として、Using ES6 Map with React State hooksの記事にある通り、更新操作を行った後にnew Mapで当該オブジェクトのcloneを作成し、stateにセットするというやり方が挙げられます。

実装サンプル

上記の対応内容で、stateを更新する実装サンプルは以下のとおりです。

const [sampleMap, setSampleMap] = useState(new Map());

// Mapの更新操作
const updateMap = (key, value) => {
  sampleMap.set(key, value)
  setSampleMap(new Map(sampleMap));
}