なぜReactでは状態を直接変更してはいけないのか🧐

こんにちは！株式会社アルシエで教育に関するサポートをしている岸本です。

今回は「Reactでは状態を直接変更がだめなのか」についてお伝えしていきます。

Reactでは、状態変数を直接変更しない方がベストプラクティスと考えられています。

代わりに、Reactが提供するsetStateメソッドを使用して状態の更新をする必要があります。

直接変更することを推奨されていない理由

1.適切に更新できない

Reactでは、コンポーネントの再レンダリングは状態とプロパティに基づいてレンダリングされます。

setStateメソッドを使用することで、Reactは状態の変更を追跡し、必要な場合に再レンダリングをします。

状態を直接変更すると、Reactが変更を検出できずにコンポーネントを正しく更新できない可能性があります。

2.不変性の利点

Reactは、浅い比較（shallow comparison）などの最適化を実行して、コンポーネントを再レンダリングする必要性を判断いたします。

状態を直接変更すると、Reactは状態が変更されていないと想定し、再レンダリングをスキップする可能性があります。ですので、不変性を保つことによって、Reactが正しく再レンダリングの最適化を行えるようになります。

3.元に戻す/やり直しとタイムトラベルデバッグ

不変性により、突然変異を気にしせずに以前の状態を追跡できます。

元に戻したり、デバッグなどの機能の実装が容易になります。

4.関数型プログラミングのパラダイム

不変性は関数型プログラミングの原理と一致しており、データが不変であることが重視されます。

そのため、一度作成されたデータは変更されず、新しいデータが生成されます。

これにより, コードの推論が容易になりますし、バグが発生しにくくなる利点があります。

例

間違い

let numbers = [1, 2, 3, 4, 5];

function incrementList(lst) {
  for (let i = 0; i < lst.length; i++) {
    lst[i] += 1;
  }
}

incrementList(numbers);
console.log(numbers);

この例では、配列の要素を直接変更しています。関数型プログラミングでは、データの不変性を重視するため、このような変更は避けましょう。

良い

let numbers = [1, 2, 3, 4, 5];

function incrementList(lst) {
  return lst.map(num => num + 1);
}

let newNumbers = incrementList(numbers);
console.log(numbers);       // [1, 2, 3, 4, 5]
console.log(newNumbers);    // [2, 3, 4, 5, 6]