はじめに
現在、Reactチュートリアルにて三目並べを作成しています！
その中で出てきた「イミュータビリティ」について理解を深めるためにアウトプットしていきます。
React公式サイト
- なぜイミュータビリティが重要なのか
イミュータビリティとは？
イミュータビリティ（immutability）とは、「不変性」をあらわします。
- immutable （不変）
- 必要な変更は “新しいデータのコピーを作って置き換える”（元のデータの書き換えを行わない）
一方、データを書き換えることはミューテートといいます。ミューテーションというのも聞いたことがあります。
- mutable（変異）
- 対象のデータオブジェクトを直接変更する
余談ですが・・・
- mutation → 名詞（変更という行為・結果）
- mutate → 動詞（変更する）
- mutability → 名詞（変更できる性質）
Reactチュートリアルでは、2人が交互にマス目上で◯やXをつけていく三目並べを作成します。
後半で、ゲームの履歴を確認して過去の手に「巻き戻し」ができる、「タイムトラベル」機能を実装します。
この時に、元のデータの書き換えを避けることでデータのバージョンを壊さずに保持して再利用できます。
なぜReactではイミュータブルが重視されるのか？
参考サイトの中には
最近の JavaScript では、ミュータブルが悪とされているので、
という文言もあったのですが、こちらはちょっと不明です🧐（未調査）
下記以降はほぼ参考サイトの引用になるため、もう少し理解が深まったら再編集します。
- 複雑な処理を簡略化できる
- 変更の検出が容易
- 再描画のタイミングを決めやすい
3つ目に関しては下記の公式ドキュメントのテキストが関連していそう。
React がコンポーネントの再レンダーをいつ行うかについての詳細は、memo API のリファレンスを参照してください。（公式）
まだ理解仕切れていない箇所
イミュータビリティには、もう 1 つの利点があります。デフォルトでは、親コンポーネントの state が変更されると、すべての子コンポーネントは自動的に再レンダーされます。これには state 変更によって影響を受けていない子コンポーネントも含まれます。再レンダー自体はユーザに気付かれないものですが（積極的に避ける必要はありません！）、パフォーマンス上の理由から、影響を受けていないことが明らかなツリーの一部の再レンダーをスキップしたい場合があります。イミュータビリティにより、コンポーネントがデータが変更されたかどうかを非常に安価に比較することができます。React がコンポーネントの再レンダーをいつ行うかについての詳細は、memo API のリファレンスを参照してください。
参考サイト