にょっす速報🐮✋

React.memo を使うべき場合と使わない場合

この記事の目次

React アプリケーションのパフォーマンスを向上させるための手法のひとつとして、React.memo が挙げられます。本記事では、React.memo を使うべき場合と使わない方が良い場合について、具体的な例とともに解説します。

React.memo とは？

React.memo は、コンポーネントをメモ化するための高階コンポーネント (Higher-Order Component, HOC) です。React.memo を使用すると、親コンポーネントが再レンダリングされた場合でも、渡された props に変更がない限り子コンポーネントを再レンダリングしないようにできます。

デフォルト動作: props の浅い比較 (===) を行い、変更がない場合は再レンダリングをスキップ。

カスタム比較関数: 必要に応じて、独自の比較ロジックを渡すことも可能。

以下のように簡単に使用できます。

const MyComponent = React.memo(function MyComponent(props) {
  return <div>{props.text}</div>;
});

React.memo を使うべき場合

  1. 親コンポーネントの頻繁な再レンダリングを抑えたいとき

親コンポーネントが状態やプロパティの変更によって頻繁に再レンダリングされる場合、子コンポーネントの props が変更されていないにもかかわらず再レンダリングが発生することがあります。このような場合、React.memo を使用することで無駄な再レンダリングを防げます。

例:

const ListItem = React.memo(({ item }) => {
  return <li>{item.name}</li>;
});
  1. 計算コストが高い場合

子コンポーネントが複雑なロジックや処理を含んでおり、再レンダリングのたびに計算コストが発生する場合、React.memo による最適化が有効です。

  1. 表示専用のコンポーネント（純粋コンポーネント）

内部で状態を持たず、props のみに依存して描画を行う表示専用のコンポーネントは、React.memo と非常に相性が良いです。

React.memo を使うべきでない場合

  1. props が頻繁に変化する場合

React.memo は props の比較を行うため、props が頻繁に変化する場合には比較処理自体がオーバーヘッドとなり、パフォーマンスが逆に低下する可能性があります。

  1. props が複雑なオブジェクトの場合

React.memo の浅い比較では、ネストされたオブジェクトや配列の変更を正しく検知できません。この場合、再レンダリングの抑制に失敗したり、余計なコストが発生したりすることがあります。

例:

const ComplexComponent = React.memo(
  ({ data }) => {
    return <div>{data.name}</div>;
  },
  (prevProps, nextProps) => {
    return prevProps.data.id === nextProps.data.id; // カスタム比較関数
  }
);
  1. 再レンダリングが軽量な場合

子コンポーネントの再レンダリングにかかるコストが小さい場合、React.memo を使うことでコードが複雑になるだけでなく、パフォーマンスの向上もほとんど見られません。

  1. 必要な再レンダリングを抑制してしまう場合

意図せず再レンダリングを抑制してしまうと、正しい描画が行われない可能性があります。このような場合は React.memo の使用を避けるべきです。

判断基準

React.memo を使用する際には以下のポイントを基準に判断しましょう。

再レンダリングの頻度

親コンポーネントの再レンダリングが頻繁に発生しているか？

計算コスト

子コンポーネントの再レンダリングによるパフォーマンス問題が顕在化しているか？

props の性質

props がシンプルで浅い比較が十分であれば適用。

まとめ

React.memo は、React アプリケーションのパフォーマンスを最適化する強力なツールです。ただし、すべてのコンポーネントに適用すべきものではなく、適用する場面を見極めることが重要です。再レンダリングが頻繁に発生する場面や計算コストが高い場合に限定して使用し、過剰な最適化を避けるようにしましょう。

);

コメント(0件)

トピックス