Reactアプリケーションのパフォーマンスを最適化することで、よりスムーズで快適なユーザー体験を提供できます。本章では、Reactの再レンダリング抑制、コード分割、パフォーマンス測定について解説します。

1. Reactの再レンダリング抑制

React.memo

• 概要:
  • 関数コンポーネントをメモ化して、不要な再レンダリングを防止。
• 使用例:

  import React from "react";
  
  const ChildComponent = React.memo(({ value }: { value: string }) => {
    console.log("ChildComponent rendered");
    return <div>{value}</div>;
  });
  
  const ParentComponent = () => {
    const [count, setCount] = React.useState(0);
    return (
      <div>
        <button onClick={() => setCount(count + 1)}>Increment</button>
        <ChildComponent value="Static Value" />
      </div>
    );
  };

useMemo

• 概要:
  • 計算コストが高い処理の結果をメモ化。
• 使用例:

  const ExpensiveComponent = ({ items }: { items: number[] }) => {
    const total = React.useMemo(() => {
      console.log("Calculating total");
      return items.reduce((acc, item) => acc + item, 0);
    }, [items]);
  
    return <div>Total: {total}</div>;
  };

useCallback

• 概要:
  • 関数の再生成を防ぎ、子コンポーネントに渡すコールバックをメモ化。
• 使用例:

  const ParentComponent = () => {
    const [count, setCount] = React.useState(0);
    const handleClick = React.useCallback(() => {
      console.log("Button clicked");
    }, []);
  
    return (
      <div>
        <button onClick={() => setCount(count + 1)}>Increment</button>
        <ChildComponent onClick={handleClick} />
      </div>
    );
  };
  
  const ChildComponent = React.memo(({ onClick }: { onClick: () => void }) => {
    console.log("ChildComponent rendered");
    return <button onClick={onClick}>Click Me</button>;
  });

2. Code-SplittingとDynamic Import

Code-Splitting

• 概要:
  • アプリケーションを小さなチャンクに分割し、必要に応じて読み込む。

React.lazyとSuspense

• 使用例:

  import React, { Suspense } from "react";
  
  const LazyComponent = React.lazy(() => import("./LazyComponent"));
  
  const App = () => {
    return (
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    );
  };

Dynamic Import

• 概要:
  • 必要なタイミングでモジュールを読み込む。
• 使用例:

  const handleClick = async () => {
    const { default: module } = await import("./module");
    module.doSomething();
  };

3. パフォーマンス測定

React Profiler

• 概要:
  • コンポーネントのレンダリング時間を測定。
• 使用方法:

  import { Profiler } from "react";
  
  const onRenderCallback = (
    id, // コンポーネントのID
    phase, // "mount"または"update"
    actualDuration // レンダリングにかかった時間
  ) => {
    console.log({ id, phase, actualDuration });
  };
  
  const App = () => {
    return (
      <Profiler id="App" onRender={onRenderCallback}>
        <ChildComponent />
      </Profiler>
    );
  };

Web Vitals

• 概要:
  • ユーザーエクスペリエンスを測定する重要な指標。
• 導入:

  npm install web-vitals

• 使用例:

  import { getCLS, getFID, getLCP } from "web-vitals";
  
  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);

---

パフォーマンス最適化はReactアプリケーションの品質を向上させる重要な要素です。本章で紹介した手法を活用し、効率的で快適なアプリケーションを構築しましょう。