開発Tips（2025-12-02）

React

React Hooksの useMemo を活用することで、不要な再計算を避けてパフォーマンスを最適化できます。コンポーネントのリレンダリング時に、計算コストの高い処理の結果をメモ化し、依存配列内の値が変更された場合にのみ再計算を行います。

計算コストの高い処理のメモ化によるパフォーマンス最適化

useMemo は、計算コストの高い処理の結果をメモ化するために使用されます。依存配列内の値が変更された場合のみ、関数が再実行され、新しい値が計算されます。それ以外の場合は、メモ化された値を再利用することで、不要な再計算を避けることができます。

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

function ExpensiveComponent({ data }) {
  const [count, setCount] = useState(0);

  // 計算コストの高い処理
  const expensiveCalculation = useMemo(() => {
    console.log('Calculating...');
    let result = 0;
    for (let i = 0; i < 100000000; i++) {
      result += data[i % data.length];
    }
    return result;
  }, [data]); // dataが変更された時のみ再計算

  return (
    <div>
      <p>Result: {expensiveCalculation}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count ({count})</button>
    </div>
  );
}

export default ExpensiveComponent;

説明:

上記の例では、expensiveCalculation が useMemo を使用してメモ化されています。 data が変更された場合のみ、計算が実行されます。 count の値を更新しても、data が変更されない限り、計算は再実行されません。

注意点:

• 依存配列を正しく設定することが重要です。依存配列が空の場合、関数はコンポーネントがマウントされた時に一度だけ実行されます。
• useMemo はパフォーマンス最適化のために使用されるべきであり、副作用の実行には適していません。副作用は useEffect を使用してください。
• メモ化された値が複雑なオブジェクトである場合は、shallow equalityチェックが行われるため、オブジェクトのプロパティが変更された場合に再計算されない可能性があります。その場合は、useCallback を使用してオブジェクトをメモ化するか、useRef を使用してオブジェクトの参照を保持することを検討してください。

おすすめポイント:

• 計算コストの高い処理があるコンポーネントのパフォーマンスを改善するために、積極的に useMemo を使用しましょう。
• React.memo と組み合わせて使用することで、コンポーネント自体のリレンダリングを抑制し、さらなるパフォーマンス向上を図ることができます。