【Reactフック】useMemoによるパフォーマンス最適化

計算コストの高い処理が多いアプリケーションでは、パフォーマンス最適化が重要です。
そのために便利なReactフックのひとつにuseMemoがあります。

本記事では、useMemoの基本的な使い方から、よくある使用パターン、そしてベストプラクティスについて詳しく解説します。

useMemoとは

useMemoは、計算コストの高い計算結果をメモ化します。
特定の依存関係が変化しない限り同じ値を再利用するため、不要な再計算を避けることができます。

基本的な使い方

useMemoの基本的な使い方は以下の通りです。

import React, { useMemo } from 'react';

const App = ({ input }) => {
  const result = useMemo(() => {
    // 計算コストの高い処理
    return highCostCalculation(input);
  }, [input]);

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

上記の例では、[input]が依存関係配列として渡されていますので、input が変更されない限り再計算されません。

よくある使い方と実践的なサンプル

パターン1: リストのフィルタリング

const filteredItems = useMemo(() => {
  return items.filter(item => item.isActive);
}, [items]);

パターン2: ソートされたリストの生成

const sortedItems = useMemo(() => {
  return [...items].sort((a, b) => a.value - b.value);
}, [items]);

ベストプラクティスと注意点

• 計算コストの高い処理に対して使用する
• 依存関係配列を正しく設定する
  • 必要な依存関係を設定し忘れたり、逆に不要な依存関係を設定してしまうのに注意が必要です。
• 過剰な使用は避ける

useCallbackとの違いと使い分け

useMemoと特によく比較されるReactフックにuseCallbackがあります。両者の違いと使い分けのポイントを解説します。

• useMemo: 高コストの計算結果をメモ化し、依存関係が変わらない限り同じ値を再利用します。
• useCallback: 関数の再生成を防ぐために、特定の依存関係が変化しない限り同じ関数を保持します。

useMemoは値のメモ化に使用され、計算結果やデータのキャッシュに適しています。一方、useCallbackは関数のメモ化に使用され、特定の依存関係が変わらない限り同じ関数を再利用するため、再レンダリングの際のパフォーマンスを向上させます。

// useMemoの例
// 計算結果の値である「memoizedValue」がメモ化される
const memoizedValue = useMemo(() => heavyComputation(data), [data]);

// useCallbackの例
// useCallbackに引数として渡されている無名関数がメモ化される
const memoizedCallback = useCallback(() => {
  handleEvent();
}, [dependencies]);

まとめ

useMemoを使うことで、Reactアプリケーションのパフォーマンスを向上させることができます。
ただし、過度な使用は避け、適切な依存関係を設定することが重要です。

何か質問、誤りの指摘、ご意見ご感想などありましたら、ぜひコメント頂ければ幸いです。

それでは、最後までお読みいただき、ありがとうございます。