🍊

Reactにおける状態の不変性の話

2024/02/16に公開

React の開発において、コンポーネントの状態（state）の管理は非常に重要な概念です。
React は状態の不変性（immutability）を推奨しており、これにはいくつかの良い理由があります。

状態の不変性とは？

不変性とは、データが一度作成された後、その後変更されないという性質のことです。React のコンポーネントの状態も、この原則に従って扱われるべきです。つまり、状態を更新する際は、直接既存の状態を変更するのではなく、新しい状態オブジェクトを作成してからそのオブジェクトで状態を更新するべきです。

なぜ不変性が重要なのか？

React では、状態が変更されたことを検出してコンポーネントの再レンダリングをトリガするために、状態の不変性が利用されます。状態を直接変更してしまうと、React はその変更を検出できず、結果としてコンポーネントが適切に再レンダリングされない可能性があります。不変性を保つことによって、状態の変更が予測可能で、追跡しやすくなります。

import React, { useState } from "react";

const MyComponent = () => {
  // 初期状態を設定
  const [myState, setMyState] = useState({ count: 0 });

  // 状態を更新するハンドラ
  const incrementCount = () => {
    // 新しい状態オブジェクトを作成してから状態を更新
    setMyState((prevState) => {
      return { ...prevState, count: prevState.count + 1 };
    });
  };

  return (
    <div>
      <p>Count: {myState.count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

export default MyComponent;

上記の例では、useState フックを使用して myState という状態を作成し、setMyState 関数を通じて状態を更新しています。incrementCount 関数では、スプレッド構文を使用して既存の状態をコピーし、新しい count プロパティの値を持つ新しいオブジェクトを作成しています。そして、この新しいオブジェクトを setMyState に渡すことで、状態を不変性を保ちつつ更新しています。

次に、オブジェクトを直接変更してしまう間違ったコード例を見ていきます。

import React, { useState } from "react";

const MyComponent = () => {
  const [myState, setMyState] = useState({ count: 0 });

  const incrementCountWrong = () => {
    myState.count += 1; // 直接オブジェクトを変更している
    setMyState(myState); // 変更されたオブジェクトをそのままセットしている
  };

  return (
    <div>
      <p>Count: {myState.count}</p>
      <button onClick={incrementCountWrong}>Increment</button>
    </div>
  );
};

export default MyComponent;

このコードでは、incrementCountWrong ハンドラ内で myState オブジェクトの count プロパティを直接変更しています。その後、変更された myState オブジェクトを setMyState に渡していますが、これは反応的な更新をトリガしません。
なぜなら、React はオブジェクトの参照が変わらないため、実際には状態が変更されたと認識しないからです。

このように状態を直接変更すると、以下の問題が発生します：

React は状態の変更を検出できず、コンポーネントが再レンダリングされない。
状態の変更が予測不可能になり、バグの原因となる。
開発ツールでの状態の変更の追跡が困難になる。

まとめ

React の状態管理においては、状態を直接変更するのではなく、新しい状態オブジェクトを作成して更新することが重要です。これにより、コンポーネントの再レンダリングが適切にトリガされ、アプリケーションの挙動が予測可能になります。上記の間違った例を避け、状態の不変性を保つことで、より堅牢でメンテナンスしやすいコードを書くことができます。

GitHubで編集を提案

状態の不変性とは？

なぜ不変性が重要なのか？

まとめ

Discussion