イミュータブル とは？

一度作った値やデータが変わらない性質のことだよ。更新するときは新しいものを作る。同じオブジェクトを複数の場所から参照していると、一方で中身を変えると他方にも影響する。元を変更しない設計なら、こうした意図しない書き換えを避けやすくなるんだ。

constが禁止するのは、変数への再代入だよ。たとえば「const obj = {a: 1}」でも、obj.a = 2と中身を変更できる。文字列や数値そのものはイミュータブルだけれど、通常のオブジェクトや配列は変更可能なんだ。

そのオブジェクト自身のプロパティは追加・削除・変更できなくなるけれど、凍結は浅いよ。プロパティが指す入れ子のオブジェクトまで、自動で凍結するわけではない。スプレッド構文によるコピーも浅いので、入れ子の更新では変更する部分まで新しく作る必要があるんだ。

データの大きさや更新方法によるよ。変えない部分を元のデータと共有する「構造的共有」で、全体のコピーを避ける方法もある。Immerは、その仕組みを使いながら更新を書きやすくするライブラリの例だよ。ただし、いつでも軽くなるとは限らず、必要なら実際の処理で測定しよう。

以前のstateを保ち、新しいstateをsetterに渡して更新を伝えるためだよ。直接書き換えるだけでは再描画が起きず、過去のstateも変わってしまう。Reactがすべてのオブジェクトを変更不能にするわけではないので、元を変更せず新しいオブジェクトを作る扱い方が大切なんだ。