React.memo と useMemo: React でパフォーマンスを最適化する方法

パフォーマンスの最適化は、スケーラブルな React アプリケーションを構築する際の重要な側面です。コンポーネント ツリーが成長するにつれて、不必要な再レンダリングによりアプリの速度が低下する可能性があります。幸いなことに、React には 2 つの便利なフック React.memo() と useMemo() が用意されており、コンポーネントと値をメモ化することで不要なレンダリングを減らすのに役立ちます。

この記事では、React.memo() と useMemo() の違い、それぞれをいつ使用するか、避けるべき一般的な落とし穴について詳しく説明します。

1. useMemo について: 高価な計算の最適化

   React では、useMemo フックを使用して、負荷の高い計算または操作の結果をメモ化し、レンダリングごとに再計算されるのを防ぎます。 useMemo は メモ化された値 を返し、React は依存関係の 1 つが変更された場合にのみそれを再計算します。これは、特に集中的な操作を処理する場合のパフォーマンスの最適化に役立ちます。

   例:

   

   この例では、負荷の高い計算 (数値 * 2) は 数値プロパティが変更された場合にのみ再計算されます。カウントの状態によって引き起こされる再レンダリングのたびに再計算されるわけではありません 。 useMemo を使用しないと、レンダリングごとに計算が行われるため、パフォーマンスが低下する可能性があります。

2. いつ useMemo() を使用しますか?

   • レンダリングのたびに再実行する必要のない、計算量の多い関数があります。
   • 計算には、安定した入力に依存する大量のデータ操作、フィルタリング、または並べ替えが含まれます。

   React.memo() と同様に、単純な計算には useMemo() を 過度に使用しないでください。不必要な複雑さが生じ、大幅なパフォーマンスの向上が得られない可能性があります。

3. React.memo について: 不必要な再レンダリングを避ける
   useMemo が負荷の高い計算をどのように最適化できるかを説明したので、コンポーネント レベルでの不必要な再レンダリングの回避について話しましょう。

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

   React.memo は、機能コンポーネントの結果をメモ化する高次コンポーネントです。これにより、プロパティが変更された場合にのみ子コンポーネントが再レンダリングされるようになります。

   例:

   

   この例では、otherState が切り替わると、ParentComponent は再レンダリングされますが、カウント prop が同じである限り、ChildComponent は再レンダリングされません。これにより、不必要な再レンダリングが防止され、パフォーマンスが最適化されます。

4. React.memo() を使用する場合は?

   • コンポーネントは同じプロパティを使用して再レンダリングします。
   • コンポーネントは、不必要な再レンダリングによってパフォーマンスが低下する可能性がある大規模なデータ セットまたは複雑な UIをレンダリングします。

   ただし、注意してください。コンポーネントのプロパティが頻繁に変更される場合、React.memo() を過剰に使用すると、React はレンダリングのたびに新しいプロパティと以前のプロパティを比較する必要があるため、逆の効果が生じる可能性があります。

5. React.memo() と useMemo() の主な違い

   • React.memo(): プロパティが変更されていない場合に再レンダリングを防ぐために、コンポーネント全体をメモ化するために使用されます。
   • useMemo(): コンポーネント内での不必要な再計算を防ぐために計算値をメモ化するために使用されます。

   本質的に、React.memo() はコンポーネントを最適化し、useMemo() はコンポーネント内の値または計算を最適化します。

6. 避けるべき一般的な落とし穴

   • メモ化による過剰最適化: React.memo() と useMemo() の両方で、依存関係やプロパティをチェックするために追加の計算が導入されます。メモ化のメリットが得られないコンポーネントでこれらを過剰に使用すると、不必要な複雑さが生じ、さらにはパフォーマンスの低下につながる可能性があります。
   • プロパティの突然変異を無視する: React.memo() はプロパティに対して浅い比較を実行します。小道具が複雑なオブジェクトまたは配列である場合、わずかな変更でも再レンダリングがトリガーされる可能性があります。 useCallback() を React.memo() と組み合わせて使用​​して、関数を props として処理することを検討してください。

結論:

React.memo() と useMemo() はどちらも React アプリを最適化するための強力なツールですが、いつどのように効果的に使用するかを知ることが重要です。まずアプリのプロファイリングを行い、不必要な再レンダリングの原因となっているコンポーネントや計算を特定して、意味のある場所にメモ化を適用します。

目標はすべてをメモ化することではなく、特定のボトルネックをターゲットにしてパフォーマンスを向上させることであることに注意してください。

この記事を気に入っていただけた場合は、LinkedIn で私とつながるか、Dev.to で私をフォローして、React のヒントと洞察をさらに入手してください。質問がありますか、それともあなたの経験を共有したいですか?以下にコメントをドロップしてください!

以上がReact.memo と useMemo: React でパフォーマンスを最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。