React での不必要な再レンダリングの回避

パフォーマンスの高い React アプリケーションを構築するための鍵の 1 つは、不必要な再レンダリングを避けることです。 React のレンダリング エンジンは効率的ですが、不必要な再レンダリングを防ぐことが依然として重要です。この投稿では、よくある間違いとその回避方法について説明します。

---

1. React.memo を使用したコンポーネントのメモ化

メモ化は、コンポーネントのプロパティが変更されていない場合に再レンダリングをスキップするのに役立ちます。ただし、カスタム比較関数を実装していないため、React.memo を悪用するのは簡単です。

間違った使用法:

const MemoizedComponent = React.memo(MyComponent);

これは props 参照が変更されたかどうかのみをチェックしますが、常に十分であるとは限りません。

正しい使用法:

const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => {
  return prevProps.itemId === nextProps.itemId;
});

ここでは、itemId プロパティが変更された場合にのみ再レンダリングをトリガーするカスタム比較関数を使用します。

---

2. インライン関数の過度の使用を避ける

JSX 内でインライン関数を使用すると、React がレンダリングのたびに新しい関数を新しいプロップとして扱うため、不必要な再レンダリングが発生する可能性があります。

間違った使用法:

function ButtonComponent() {
  return <button onClick={() => handleClick()}>Click me</button>;
}

これにより、レンダリングのたびに handleClick が再作成され、不必要な再レンダリングが発生します。

正しい使用法:

import { useCallback } from 'react';

function ButtonComponent() {
  const handleClick = useCallback(() => {
    // Handle click logic
  }, []);

  return <button onClick={handleClick}>Click me</button>;
}

useCallback を使用することで、handleClick 関数をメモ化し、レンダリングごとに不要な再作成を防ぎます。

---

3. PureComponent の活用

クラス コンポーネントを操作する場合、React.PureComponent を使用すると、プロパティまたは状態が変更された場合にのみコンポーネントが再レンダリングされるようになります。 React.Component を使用している場合、不必要な再レンダリングが発生する可能性があります。

間違った使用法:

class CardComponent extends React.Component {
  // Component logic
}

正しい使用法:

class CardComponent extends React.PureComponent {
  // Component logic
}

React.PureComponent を拡張することにより、React はプロパティと状態を浅く比較し、不必要な再レンダリングを回避します。

---

4. 機能コンポーネントの useSelector の最適化

react-redux の useSelector を使用する場合は、状態の必要なスライスのみを選択することが重要です。

間違った使用法:

import { useSelector } from 'react-redux';

const DataComponent = () => {
  const globalState = useSelector((state) => state);
  // Render logic
};

これにより、状態の一部が変更されるたびにコンポーネントが再レンダリングされます。

正しい使用法:

import { useSelector } from 'react-redux';

const DataComponent = () => {
  const selectedData = useSelector((state) => state.specificSlice);
  // Render logic based on specific slice
};

状態の必要な部分のみを選択することで、再レンダリングを最小限に抑えます。

---

5. クラスコンポーネントへの shouldComponentUpdate の実装

PureComponent を拡張しないクラス コンポーネントの場合、手動で shouldComponentUpdate を実装すると、コンポーネントが再レンダリングされるタイミングをより詳細に制御できるようになります。

間違った使用法:

class ListItem extends React.Component {
  // Component logic
}

これは、プロパティと状態が変更されていない場合でも、親コンポーネントがレンダリングされるたびに再レンダリングされます。

正しい使用法:

class ListItem extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return this.props.itemId !== nextProps.itemId || this.state.value !== nextState.value;
  }

  // Component logic
}

shouldComponentUpdate をカスタマイズすることで、itemId プロパティまたは値の状態が変更された場合にのみコンポーネントが再レンダリングされるようになります。

---

結論

これらの手法を採用すると、React アプリケーションでの不必要な再レンダリングを大幅に削減でき、パフォーマンスの向上につながります。 React.memo によるメモ化の実装、PureComponent の活用、および shouldComponentUpdate の微調整は、React コンポーネントを最適化するための重要な戦略です。

いつ、どのようにレンダリングを最適化するかを理解すると、より高速で応答性の高いアプリケーションが提供され、ユーザー エクスペリエンスが大幅に向上します。

---

参考文献:

1. オタクのためのオタク。 （2023年）。 React のメモ化とは何ですか?
2. シンクフュージョン。 （2024年）。 React でのメモ化
3. ハイグラフ。 （2024年）。 React Memo とは何ですか?その使い方は?
4. Refine.dev。 （2024年）。 React メモガイドと例

このガイドが役立つと思われた場合は、他の人と共有することを検討してください。 ?

---

このブログでは、React アプリケーションでの不必要な再レンダリングを回避しながら、ベスト プラクティスを組み込み、現代の Web 開発実践における明確さと関連性のために変数名を変更する方法について、更新された包括的な概要を提供します。

引用:
[1] https://www.geeksforgeeks.org/what-is-memoization-in-react/
[2] https://stackoverflow.com/questions/74013864/why-arent-all-react-components-wrapped-with-react-memo-by-default
[3] https://www.syncfusion.com/blogs/post/what-is-memoization-in-react
[4] https://hygraph.com/blog/react-memo
[5] https://refine.dev/blog/react-memo-guide/
[6] https://dmitripavlutin.com/use-react-memo-wisely/
[7] https://www.topcoder.com/thrive/articles/memoization-in-react-js
[8] https://react.dev/reference/react/memo

以上がReact での不必要な再レンダリングの回避の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。