なぜ不変性が React でそれほど重要なのか？

公式ドキュメントに基づいて、不変性の概念が React で非常に重要である理由を説明します。一般的に、データを変更する方法は二つあります。一つ目は変数の値を直接変更する方法、二つ目は新しいデータで古いデータを置き換える方法です。

React ドキュメント

一般的に、データを変更する方法は二つあります。一つ目は変数の値を直接変更する方法、二つ目は新しいデータで古いデータを置き換える方法です。

データを直接変更する#

var player = {score: 1, name: 'Jeff'};
player.score = 2;
// player の変更後の値は {score: 2, name: 'Jeff'}

新しいデータで古いデータを置き換える#

var player = {score: 1, name: 'Jeff'};

var newPlayer = Object.assign({}, player, {score: 2});
// player の値は変わらないが、newPlayer の値は {score: 2, name: 'Jeff'}

// オブジェクトスプレッド構文を使うと、次のように書けます：
// var newPlayer = {...player, score: 2};

直接変更（または基盤データを変更）しない方法は前の方法と同じ結果をもたらします。この方法には以下のような利点があります:

複雑な機能の簡素化#

不変性は複雑な機能を実装しやすくします。後の章では「タイムトラベル」と呼ばれる機能を実装します。「タイムトラベル」は、私たちが三目並べの歴史的なステップを振り返り、「以前のステップに戻る」ことを可能にします。この機能はゲームだけでなく、開発においても一般的なニーズである「元に戻す」や「復元」機能にも使用されます。データを直接変更しないことで、ゲームの履歴を追跡し再利用することができます。

データの変更を追跡する#

データを直接変更すると、データの変更を追跡するのが難しくなります。データの変更を追跡するには、可変オブジェクトが変更前のバージョンと比較できる必要があり、これによりオブジェクトツリー全体を一度遍歴する必要があります。

React で再レンダリングするタイミングを決定する#

不変性の最大の利点は、React で純粋なコンポーネントを作成するのに役立つことです。不変データが変更されたかどうかを簡単に判断できるため、コンポーネントを再レンダリングするタイミングを決定できます。