メインコンテンツまでスキップ

9. Performance

Reactアプリケーションのパフォーマンスを最適化するための方法はいくつかあります。パフォーマンスの問題を未然に防ぎ、アプリケーションの応答性を向上させるために、以下のテクニックとツールを使用することが推奨されます。

メモ化​

メモ化は、再レンダリングのコストを削減するために、コンポーネントや関数の結果をキャッシュするテクニックです。Reactでは、以下のフックと関数を使用してメモ化を行います。

React.memo​

React.memoは、関数コンポーネントの結果をメモ化する高階コンポーネントです。コンポーネントが同じpropsで再レンダリングされる場合、メモ化された結果を再利用します。

使用例​

import React from 'react';

const MyComponent = React.memo(function MyComponent({ name }) {
  console.log('Rendering MyComponent');
  return <div>Hello, {name}</div>;
});

// 親コンポーネント
function ParentComponent() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Click me</button>
      <MyComponent name="Alice" />
    </div>
  );
}

export default ParentComponent;

useMemo​

useMemoは、依存関係が変更された場合にのみ再計算されるメモ化された値を返します。パフォーマンスのために重い計算を避けるのに役立ちます。

使用例​

import React, { useMemo } from 'react';

function ExpensiveCalculationComponent({ num }) {
  const expensiveCalculation = (num) => {
    console.log('Calculating...');
    return num * 2;
  };

  const result = useMemo(() => expensiveCalculation(num), [num]);

  return <div>Result: {result}</div>;
}

useCallback​

useCallbackは、依存関係が変更された場合にのみ新しい関数を生成するメモ化されたコールバック関数を返します。特に、子コンポーネントにコールバック関数を渡す場合に役立ちます。

使用例​

import React, { useState, useCallback } from 'react';

const ChildComponent = React.memo(({ onClick }) => {
  console.log('Rendering ChildComponent');
  return <button onClick={onClick}>Click me</button>;
});

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
}

export default ParentComponent;

レンダリング最適化​

不要なレンダリングを回避することで、パフォーマンスを向上させることができます。以下のテクニックを使用してレンダリングを最適化します。

コンポーネントの分割​

大きなコンポーネントを小さなコンポーネントに分割し、それぞれのコンポーネントが必要なときにのみレンダリングされるようにします。

条件付きレンダリング​

条件に基づいてコンポーネントをレンダリングします。これにより、不要なレンダリングを回避できます。

使用例​

import React, { useState } from 'react';

function ConditionalRenderingComponent() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        Toggle Visibility
      </button>
      {isVisible && <div>Visible Content</div>}
    </div>
  );
}

リストのキー​

リストのアイテムに一意のキーを付けることで、Reactが効率的にリストのアイテムを更新できるようにします。

使用例​

import React from 'react';

function ListComponent({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

レンダリングのバッチ処理​

Reactは、状態の変更が発生した場合に、複数の状態変更をバッチ処理して一度に再レンダリングを行います。これにより、複数のレンダリングを一回のレンダリングにまとめることができます。

使用例​

import React, { useState } from 'react';

function BatchUpdateComponent() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  const handleClick = () => {
    setCount1(count1 + 1);
    setCount2(count2 + 1);
  };

  return (
    <div>
      <button onClick={handleClick}>Increment</button>
      <p>Count1: {count1}</p>
      <p>Count2: {count2}</p>
    </div>
  );
}

このように進めていきます。他に追加や修正の希望があればお知らせください。