最新の Web アプリケーションを構築する場合、パフォーマンスが重要です。ユーザーは高速で応答性の高いアプリを期待しているため、わずかな遅延でもフラストレーションを引き起こす可能性があります。 React は強力ですが、特にアプリケーションのサイズと複雑さが増大するにつれて、パフォーマンスのボトルネックに悩まされることがあります。幸いなことに、メモ化、遅延読み込みなど、パフォーマンスを最適化する手法がいくつかあります。

このガイドでは、React アプリケーションのパフォーマンスを最適化する最も効果的な方法のいくつかを詳しく説明します。メモ化、遅延読み込み、ボトルネックの特定と修正に役立つ React Profiler などのツールの基本について説明します。始めましょう!

はじめに: 最新の React アプリでパフォーマンスが重要な理由

Web アプリを車に例えてください。外観がどれほど洗練されていても、パフォーマンスが良くなければ、ユーザー エクスペリエンスは損なわれます。 React アプリでは、この「パフォーマンス」とは、データや状態が変化したときにコンポーネントがどれだけ速くレンダリングされ、どれだけ効率的に更新されるかを指します。

React アプリがスケールするにつれて、コンポーネントを不必要に再レンダリングしたり、重いバンドルを一度にロードしたりすると、パフォーマンスが低下する可能性があります。そのため、スムーズでパフォーマンスの高いアプリケーションを構築するには、React パフォーマンスの最適化 テクニックを学ぶことが重要です。

React でのメモ化

React.memo と useMemo を効果的に使用する方法

メモ化とは、単に 関数呼び出しの結果をキャッシュ することを意味する派手な言葉で、毎回再計算する必要がありません。 React では、メモ化により、以前のレンダリングの結果を記憶し、何も変更されていない場合はそのキャッシュされた結果を使用することで、不必要な再レンダリングを防ぐことができます。

React.memo

React.memo から始めましょう。この高次コンポーネントは、プロパティが変更されていない場合にコンポーネントが再レンダリングされるのを防ぎます。

例：

const MyComponent = React.memo(function MyComponent({ name }) {
  console.log('Rendered');
  return 
Hello, {name}
;
});

この例では、名前 prop が変更された場合にのみ、MyComponent が再レンダリングされます。同じ名前の値を渡すと、React はレンダリングをスキップし、パフォーマンスを向上させます。

使用メモ

次はuseMemoです。このフックは、関数コンポーネント内の高価な計算や値をメモ化するために使用されます。

例：

import { useMemo } from 'react';

function MyApp({ items }) {
  const expensiveCalculation = useMemo(() => {
    return items.reduce((total, item) => total   item.value, 0);
  }, [items]);

  return 
Total Value: {expensiveCalculation}
;
}

ここでは、項目配列が変更された場合にのみ計算が再実行され、レンダリングのたびに同じ結果が再計算されるのを避けることで時間を節約します。

コンポーネントの遅延読み込み

React.lazy による読み込み時間の改善

遅延読み込みは、コンポーネントを事前にすべて読み込むのではなく、必要な場合にのみ読み込む手法です。これにより、アプリケーションの初期ロード時間が短縮され、より速く感じられるようになります。

React には、オンデマンドでコンポーネントをロードできる React.lazy() という組み込み関数が用意されています。

例：

import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    Loading...}>
      
    
  );
}

この例では、MyComponent は実際に必要な場合にのみロードされます。 Suspense コンポーネントは、コンポーネントのフェッチ中にフォールバック UI (読み込みスピナーなど) を提供し、ユーザー エクスペリエンスをよりスムーズにします。

パフォーマンス監視のための React Profiler

ボトルネックを特定する方法

測定できないものを最適化するのは困難です。そこで、React Profiler の出番です。React Profiler を使用すると、コンポーネントのパフォーマンスを追跡し、遅いレンダリングを特定し、再レンダリングの「コスト」を測定できます。

React Profiler を使用するには、コンポーネント ツリーを でラップし、パフォーマンス データを収集するコールバック関数を提供するだけです。

例：

import { Profiler } from 'react';

function onRenderCallback(
  id, // the "id" prop of the Profiler tree that has just committed
  phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
  actualDuration, // time spent rendering the committed update
  baseDuration, // estimated time to render the entire subtree without memoization
  startTime, // when React began rendering this update
  commitTime, // when React committed this update
  interactions // the Set of interactions belonging to this update
) {
  console.log({ id, phase, actualDuration });
}

function MyApp() {
  return (
    
      
    
  );
}

プロファイラーを使用すると、各コンポーネントのレンダリングにかかる​​時間を追跡し、不必要な再レンダリングなど、パフォーマンスを改善できる領域を見つけることができます。

その他の最適化戦略

コード分​​割、イベント処理の最適化など

メモ化と遅延読み込み以外にも、React アプリのパフォーマンスを向上させるテクニックがいくつかあります。

1. コード分割: Webpack のコード分割機能を使用して、アプリをより小さなチャンクに分割し、オンデマンドでロードできるようにします。これにより、初期バンドル サイズが小さくなります。

   const OtherComponent = lazy(() => import('./OtherComponent'));

1. イベント処理の最適化: useCallback フックを使用してイベント ハンドラーをメモ化し、レンダリングのたびにイベント ハンドラーが再作成されるのを防ぎます。

   const handleClick = useCallback(() => {
     console.log('Clicked');
   }, []);

1. デバウンスとスロットリング: デバウンスまたはスロットリングして更新頻度を制限することで、スクロールやサイズ変更などのイベント リスナーを最適化します。

   const handleScroll = debounce(() => {
     console.log('Scroll event');
   }, 300);

結論: これらの技術を使用して高性能の React アプリケーションを構築する

高速かつ効率的な React アプリケーションを構築するには、さまざまなテクニックを組み合わせる必要があります。 React.memo および useMemo で memoization を使用すると、不要な再レンダリングを防ぐことができます。 React.lazy を使用した 遅延読み込み コンポーネントを使用すると、必要なときにのみコンポーネントをフェッチすることで読み込み時間を短縮できます。 React Profiler は、パフォーマンスのボトルネックを特定し、最適化するのに役立ちます。

コード分割やイベントの最適化などの戦略と組み合わせることで、React アプリのサイズと複雑さが増大しても、スムーズで応答性の高いユーザー エクスペリエンスを確実に提供できます。

React アプリのパフォーマンスを次のレベルに引き上げる準備はできましたか? プロジェクトでこれらの最適化テクニックを試して、アプリの速度が向上するのを確認してください!

この記事が気に入ったら、私の仕事をサポートすることを検討してください:

• コーヒー買ってきて
• メンターシップやキャリアに関するアドバイスの電話を予約する
• Twitter でフォローしてください
• LinkedIn でつながる