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

概要 ユースケースとしてあまり無いかもしれませんが、JavaScriptのMapオブジェクトをReactのStateで管理する場合、どう更新するのかというのがふと気になりました。 Mapオブジェクトの概要については、Mapオブジェクトに関してにまとめられていますが、更新する際には基本的に作成したオブジェクトに対して、破壊的な変更が行われます。つまり、配列の更新時にハマりがちな、useStateで配列を更新するの記事にあるObject.is()が同じ値になる問題と、同様の考慮がMapオブジェクトでも必要になってきます。 対応 挙げられる対応として、Using ES6 Map with React State hooksの記事にある通り、更新操作を行った後にnew Mapで当該オブジェクトのcloneを作成し、stateにセットするというやり方が挙げられます。 実装サンプル 上記の対応内容で、