Zenn
📌

React のレンダリングとオブジェクト参照を理解する

2025/02/10に公開
JavaScript
React
tech

はじめに

React アプリケーションのパフォーマンスを最適化する上で、レンダリングの挙動を理解することは非常に重要です。特に、オブジェクト参照の等価性（Object Referential Equality）は、React のレンダリングメカニズムの根幹をなす概念の一つです。

この記事で学ぶこと

  • React のレンダリングが発生するメカニズム
  • オブジェクト参照の等価性が React のレンダリングに与える影響
  • state におけるオブジェクトの正しい更新方法
  • React アプリケーションのパフォーマンス最適化手法

対象読者

  • React の基本的な概念（コンポーネント、props、state）を理解している方
  • React アプリケーションのパフォーマンス最適化に興味がある方
  • React のレンダリングメカニズムをより深く理解したい方

前提知識

この記事を理解するためには、以下の知識が必要です。

  • JavaScript の基本的な文法
  • React の基本的な概念（コンポーネント、props、state）
  • React Hooks の基本的な使い方（useState、useEffect）

それでは、React のレンダリングとオブジェクト参照の等価性について、実践的な観点から見ていきましょう。

React のレンダリングの基本

コンポーネントの再レンダリングが発生するタイミング

React のレンダリングメカニズムを理解することは、効率的なアプリケーション開発において重要です。コンポーネントの再レンダリングは、主に以下の 3 つのケースで発生します。

  1. コンポーネントの state が変更された場合
  2. コンポーネントに渡される props が変更された場合
  3. 親コンポーネントが再レンダリングされた場合

それぞれのケースについて、詳しく見ていきましょう。

useState と再レンダリング

state の変更による再レンダリングは、最も基本的なケースです。useState フックを使用して state を更新すると、そのコンポーネントは再レンダリングされます。

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

このコードでは、ボタンをクリックすると setCount が呼び出され、count の値が更新されます。その結果、Counter コンポーネント全体が再レンダリングされます。

ただし、同じ値で state を更新した場合は再レンダリングが発生しません。これは React の最適化機能の一つです。

function ExampleComponent() {
  const [count, setCount] = useState(0);

  // 同じ値での更新は再レンダリングを引き起こしません
  const handleClick = () => {
    setCount(0); // 現在の値と同じ
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Update</button>
    </div>
  );
}

props の変更による再レンダリング

コンポーネントに渡される props が変更されると、そのコンポーネントは再レンダリングされます。これは、親コンポーネントから子コンポーネントへのデータの流れを反映するための重要なメカニズムです。

function ChildComponent({ value }) {
  return <div>Value: {value}</div>;
}

function ParentComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <ChildComponent value={count} />
      <button onClick={() => setCount(count + 1)}>Update Value</button>
    </div>
  );
}

この例では、ParentComponent の count が更新されると、新しい value が ChildComponent に渡され、ChildComponent が再レンダリングされます。

親コンポーネントの再レンダリングによる子コンポーネントへの影響

親コンポーネントが再レンダリングされると、デフォルトではその子コンポーネントも再レンダリングされます。これは、props が変更されていない場合でも発生します。

function ParentComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Parent Count: {count}</p>
      <ChildComponent staticValue="Hello" />
      <button onClick={() => setCount(count + 1)}>Update Parent</button>
    </div>
  );
}

function ChildComponent({ staticValue }) {
  return <div>{staticValue}</div>;
}

この例では、ボタンをクリックして ParentComponent の count が更新されると、staticValue が変更されていないにもかかわらず、ChildComponent も再レンダリングされます。

これは時として不要な再レンダリングを引き起こす可能性がありますが、React は内部的に仮想 DOM を使用して実際の DOM 更新を最適化しているため、多くの場合はパフォーマンスへの影響は最小限に抑えられます。ただし、コンポーネントの処理が重い場合や、頻繁な再レンダリングが発生する場合は、React.memo などの最適化手法を考慮する必要があります。

これらの基本的なレンダリングメカニズムを理解することは、効率的な React アプリケーションの開発において非常に重要です。特に、オブジェクト参照の等価性との関連を理解することで、より効果的なパフォーマンス最適化が可能になります。

オブジェクト参照の等価性とは

プリミティブ型とオブジェクト型の違い

JavaScript における値の型は、プリミティブ型とオブジェクト型の 2 つに大きく分類されます。この違いを理解することは、React のレンダリング最適化において非常に重要です。

プリミティブ型（数値、文字列、真偽値など）は、値そのものが直接比較されます。一方、オブジェクト型（オブジェクト、配列、関数など）は、値の内容ではなく、メモリ上の参照が比較されます。

// プリミティブ型の比較
const num1 = 42;
const num2 = 42;
console.log(num1 === num2); // true

// オブジェクト型の比較
const obj1 = { value: 42 };
const obj2 = { value: 42 };
console.log(obj1 === obj2); // false

この例では、同じ内容を持つオブジェクトでも、異なるメモリ位置に格納されているため、比較結果は false となります。

JavaScript におけるオブジェクトの比較

JavaScript でオブジェクトを比較する場合、等価演算子（===）は参照の一致を確認します。これは、オブジェクトの内容が同じであっても、異なるインスタンスであれば false となることを意味します。

// 同じ参照を持つ場合
const objA = { name: "React" };
const objB = objA;
console.log(objA === objB); // true

// 新しいオブジェクトを作成する場合
const objC = { name: "React" };
const objD = { name: "React" };
console.log(objC === objD); // false

この動作は、スプレッド構文を使用する場合も同様です。

const original = { count: 0 };
const copy = { ...original };
console.log(original === copy); // false

オブジェクト参照の等価性が React のレンダリングに与える影響

React は、コンポーネントの再レンダリングを決定する際に、state や props の変更を検知するためにオブジェクト参照の等価性を使用します。

function ExampleComponent() {
  const [data, setData] = useState({ count: 0 });

  const updateData = () => {
    // 同じ値でも新しいオブジェクトを作成
    setData({ count: 0 });
  };

  return (
    <div>
      <p>Count: {data.count}</p>
      <button onClick={updateData}>Update</button>
    </div>
  );
}

この例では、updateData が呼ばれるたびに、値は同じでも新しいオブジェクトが作成されるため、コンポーネントは再レンダリングされます。これは、React が浅い比較（shallow comparison）を使用して変更を検出するためです。

コンポーネントの最適化における重要性

オブジェクト参照の等価性は、特にパフォーマンス最適化において重要な役割を果たします。たとえば、React.memo を使用する場合、props の比較はオブジェクト参照に基づいて行われます。

const MemoizedComponent = React.memo(function ChildComponent({ data }) {
  return <div>Value: {data.value}</div>;
});

function ParentComponent() {
  const [count, setCount] = useState(0);

  // レンダリングごとに新しいオブジェクトが作成される
  const data = { value: "Hello" };

  return (
    <div>
      <MemoizedComponent data={data} />
      <button onClick={() => setCount(count + 1)}>Update Count</button>
    </div>
  );
}

この例では、ParentComponent が再レンダリングされるたびに新しい data オブジェクトが作成されるため、React.memo による最適化が効果的に機能しません。この問題を解決するには、useMemo を使用してオブジェクトの参照を安定させる必要があります。

function ParentComponent() {
  const [count, setCount] = useState(0);

  // オブジェクトの参照を安定させる
  const data = useMemo(() => ({ value: "Hello" }), []);

  return (
    <div>
      <MemoizedComponent data={data} />
      <button onClick={() => setCount(count + 1)}>Update Count</button>
    </div>
  );
}

このように、オブジェクト参照の等価性を理解し適切に扱うことは、React アプリケーションのパフォーマンス最適化において非常に重要です。特に大規模なアプリケーションや、頻繁な更新が発生するコンポーネントでは、この概念を意識した実装が必要となります。

state におけるオブジェクトの正しい更新方法

ミュータブルな更新の問題点

React の state として保持されているオブジェクトを直接変更（ミュータブルな更新）することは、予期せぬ問題を引き起こす可能性があります。以下の例で具体的に見ていきましょう。

function UserProfile() {
  const [user, setUser] = useState({ name: "John", age: 25 });

  const updateAge = () => {
    // 誤った更新方法
    user.age = 26;
    setUser(user);
  };

  return (
    <div>
      <p>
        Name: {user.name}, Age: {user.age}
      </p>
      <button onClick={updateAge}>Update Age</button>
    </div>
  );
}

このコードには以下の問題があります。

  1. React は state の変更を参照の変化で検知するため、同じオブジェクトを変更しても再レンダリングがトリガーされない可能性があります。
  2. 以前の state の値が失われ、デバッグが困難になります。
  3. React の最適化機能が正しく動作しなくなる可能性があります。

イミュータブルな更新の重要性

イミュータブルな更新とは、既存のオブジェクトを変更せず、新しいオブジェクトを作成して state を更新する方法です。これには以下の利点があります。

  1. 予測可能な state の更新
  2. コンポーネントの再レンダリングが確実に行われる
  3. デバッグのしやすさ
  4. パフォーマンス最適化の容易さ
function UserProfile() {
  const [user, setUser] = useState({ name: "John", age: 25 });

  const updateAge = () => {
    // 正しい更新方法
    setUser({ name: user.name, age: 26 });
  };

  return (
    <div>
      <p>
        Name: {user.name}, Age: {user.age}
      </p>
      <button onClick={updateAge}>Update Age</button>
    </div>
  );
}

スプレッド構文を使用した正しい更新方法

スプレッド構文を使用することで、より簡潔にイミュータブルな更新を行うことができます。

function UserProfile() {
  const [user, setUser] = useState({
    name: "John",
    age: 25,
    preferences: { theme: "light", notifications: true },
  });

  const updateUser = () => {
    // スプレッド構文を使用した更新
    setUser({
      ...user,
      age: 26,
      preferences: {
        ...user.preferences,
        theme: "dark",
      },
    });
  };

  return (
    <div>
      <p>
        Name: {user.name}, Age: {user.age}
      </p>
      <p>Theme: {user.preferences.theme}</p>
      <button onClick={updateUser}>Update User</button>
    </div>
  );
}

この方法の利点は以下の通りです。

  1. コードが簡潔になる
  2. 元のオブジェクトの構造が保持される
  3. 更新したいプロパティのみを指定できる

ネストされたオブジェクトの更新方法

ネストされたオブジェクトを更新する場合は、変更が必要なレベルまですべての階層で新しいオブジェクトを作成する必要があります。

function ComplexUserProfile() {
  const [user, setUser] = useState({
    personal: {
      name: "John",
      age: 25,
    },
    settings: {
      preferences: {
        theme: "light",
        notifications: {
          email: true,
          push: false,
        },
      },
    },
  });

  const updateNotifications = () => {
    setUser({
      ...user,
      settings: {
        ...user.settings,
        preferences: {
          ...user.settings.preferences,
          notifications: {
            ...user.settings.preferences.notifications,
            push: true,
          },
        },
      },
    });
  };

  return (
    <div>
      <p>Name: {user.personal.name}</p>
      <p>
        Push Notifications:{" "}
        {String(user.settings.preferences.notifications.push)}
      </p>
      <button onClick={updateNotifications}>Enable Push Notifications</button>
    </div>
  );
}

深くネストされたオブジェクトの更新は複雑になりがちですが、以下のアプローチで管理を簡単にすることができます。

  1. オブジェクトの構造をできるだけフラットに保つ
  2. 更新ロジックを関数として分離する
  3. 必要に応じて、オブジェクトの構造を見直す
// 更新ロジックを分離した例
function updateNestedValue(obj, path, value) {
  const pathArray = path.split(".");
  let current = { ...obj };
  let pointer = current;

  for (let i = 0; i < pathArray.length - 1; i++) {
    const key = pathArray[i];
    pointer[key] = { ...pointer[key] };
    pointer = pointer[key];
  }

  pointer[pathArray[pathArray.length - 1]] = value;
  return current;
}

function ComplexUserProfile() {
  const [user, setUser] = useState({
    personal: { name: "John", age: 25 },
    settings: { theme: "light", pushEnabled: false },
  });

  const updatePushSetting = () => {
    const updatedUser = updateNestedValue(user, "settings.pushEnabled", true);
    setUser(updatedUser);
  };

  return (
    <div>
      <p>Push Enabled: {String(user.settings.pushEnabled)}</p>
      <button onClick={updatePushSetting}>Enable Push</button>
    </div>
  );
}

このように、イミュータブルな更新を適切に行うことで、React アプリケーションの予測可能性と保守性を高めることができます。特に大規模なアプリケーションでは、これらのパターンを一貫して適用することが重要です。

パフォーマンス最適化のベストプラクティス

React.memo による不要な再レンダリングの防止

React.memo は、コンポーネントの再レンダリングを最適化するための高階コンポーネントです。props が変更されない限り、コンポーネントの再レンダリングを防ぐことができます。

const ExpensiveComponent = React.memo(function ExpensiveComponent({ data }) {
  return (
    <div>
      {/* 重い処理を含むレンダリング */}
      {data.items.map((item) => (
        <div key={item.id}>{item.value}</div>
      ))}
    </div>
  );
});

function ParentComponent() {
  const [count, setCount] = useState(0);
  const data = { items: Array(1000).fill({ id: 1, value: "item" }) };

  return (
    <div>
      <ExpensiveComponent data={data} />
      <button onClick={() => setCount((c) => c + 1)}>Count: {count}</button>
    </div>
  );
}

ただし、この例では React.memo が効果的に機能しません。なぜなら、レンダリングのたびに新しい data オブジェクトが作成されるためです。これを解決するには、useMemo を併用する必要があります。

useMemo と useCallback の適切な使用方法

useMemo と useCallback は、値やコールバック関数の参照を安定させるために使用します。

function OptimizedComponent() {
  const [count, setCount] = useState(0);

  // 重い計算を含むデータの生成
  const expensiveData = useMemo(() => {
    return {
      items: Array(1000)
        .fill()
        .map((_, index) => ({
          id: index,
          value: `item ${index}`,
        })),
    };
  }, []); // 依存配列が空なので初回レンダリング時のみ実行

  // イベントハンドラの参照を安定させる
  const handleClick = useCallback(() => {
    setCount((c) => c + 1);
  }, []); // 依存配列が空なので関数の参照は常に同じ

  return (
    <div>
      <ExpensiveComponent data={expensiveData} onClick={handleClick} />
      <div>Count: {count}</div>
    </div>
  );
}

ただし、これらのフックを過度に使用すると、かえってパフォーマンスが低下する可能性があります。以下の場合にのみ使用を検討します。

  1. 計算コストが高い値の生成
  2. React.memo と組み合わせて使用する場合
  3. 子コンポーネントに渡すコールバック関数

state の構造設計の重要性

state の構造は、アプリケーションのパフォーマンスに大きな影響を与えます。以下は、効率的な state 設計の例です。

// 改善前: すべての更新で全体が再レンダリング
function BadStructure() {
  const [state, setState] = useState({
    user: { name: "John", age: 25 },
    settings: { theme: "dark" },
    posts: [
      /* 大量のデータ */
    ],
  });

  return (
    <div>
      <UserInfo user={state.user} />
      <Settings settings={state.settings} />
      <Posts posts={state.posts} />
    </div>
  );
}

// 改善後: 関連する state を分割
function GoodStructure() {
  const [user, setUser] = useState({ name: "John", age: 25 });
  const [settings, setSettings] = useState({ theme: "dark" });
  const [posts, setPosts] = useState([
    /* 大量のデータ */
  ]);

  return (
    <div>
      <UserInfo user={user} />
      <Settings settings={settings} />
      <Posts posts={posts} />
    </div>
  );
}

この改善により、各コンポーネントは必要な state が変更されたときのみ再レンダリングされます。

パフォーマンス最適化の判断基準

パフォーマンス最適化を行う前に、以下の判断基準を考慮することが重要です。

  1. 実際にパフォーマンスの問題が発生しているか
  2. 最適化による複雑性の増加が許容できるか
  3. 最適化による保守性への影響
function ShouldOptimize({ items }) {
  const [filter, setFilter] = useState("");

  // 最適化が必要かどうかの判断例
  const filteredItems = useMemo(() => {
    if (items.length < 100) {
      // 少量のデータの場合は最適化不要
      // データ量が少ない場合（100件未満）は、単純な文字列検索を実行
      return items.filter((item) => item.name.includes(filter));
    }
    // 大量のデータの場合は最適化
    // データ量が多い場合は、.toLowerCase() を使用した大文字・小文字を区別しない検索を実行
    return items.filter((item) =>
      item.name.toLowerCase().includes(filter.toLowerCase())
    );
  }, [items, filter]);

  return (
    <div>
      <input value={filter} onChange={(e) => setFilter(e.target.value)} />
      {filteredItems.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

パフォーマンス最適化は、計測可能な問題に対して適用すべきです。React Developer Tools の Profiler を使用して、実際のパフォーマンスを測定し、最適化が必要な箇所を特定することをお勧めします。

以上のベストプラクティスを適切に組み合わせることで、効率的で保守性の高い React アプリケーションを構築することができます。

おわりに

本記事では、React のレンダリングメカニズムとオブジェクト参照の等価性について深く掘り下げて解説してきました。特に重要なポイントは以下の通りです。

  1. React のレンダリングは、state や props の変更によってトリガーされ、その検出にはオブジェクト参照の等価性が利用されること
  2. オブジェクトの更新は必ずイミュータブルな方法で行う必要があること
  3. パフォーマンス最適化は、実際の問題に基づいて慎重に判断する必要があること

これらの概念を適切に理解し活用することで、より効率的で保守性の高い React アプリケーションを開発することが可能になります。

参考資料

https://react.dev/learn/updating-objects-in-state

Discussion