【React】memoとuseMemoの違いとは？

投稿日 9月 18, 2023
更新日 1月 17, 2024
著者しんぺー
カテゴリー React

memoとuseMemoがあるのを今知りました。
なにが違うのか簡単に教えて

それぞれの使用例と、比較表を作成しました。

memoとuseMemoの比較

memoは、コンポーネントの見た目が変わったかどうかを確認します。

useMemoは、計算に時間がかかる値を保存するためのもの。

特性	memo	useMemo
主な用途	関数コンポーネントの再レンダリングを最適化するために使用	計算コストの高い値のキャッシュを作成するために使用
使用方法	`React.memo()` ハイオーダーコンポーネントを使用	`useMemo()` フックを使用
レンダリングのトリガー	プロパティ（props）が変更されたときに再レンダリングを防ぐ	依存する変数が変更されたときに再レンダリングを防ぐ
使用例	`const MemoizedComponent = React.memo(MyComponent);`	`const memoizedValue = useMemo(() => expensiveCalculation(dep1, dep2), [dep1, dep2]);`
インターフェース	関数コンポーネントのラッパーとして使用	フックとして使用
依存関係の指定	自動的にすべてのプロパティに依存	依存する変数を明示的に指定

それぞれの使用例

memo

Commentコンポーネントをラップし、MemoizedCommentという変数に代入しています。

import React from 'react';

// コメントコンポーネント
function Comment({ text }) {
  return <div>{text}</div>;
}

// CommentコンポーネントをReact.memo()でラップ
const MemoizedComment = React.memo(Comment);

// アプリケーション内でMemoizedCommentを表示
function App() {
  const comments = ["コメント1", "コメント2", "コメント3"];

  return (
    <div>
      {comments.map((comment, index) => (
        <MemoizedComment key={index} text={comment} />
      ))}
    </div>
  );
}

useMemo

useMemoフックを使用して、計算結果をキャッシュします。useMemoは2つの引数を取ります。第1引数は計算を行う関数です。この関数内で、complexCalculation(a, b)を呼び出し、計算結果を取得します。第2引数は依存関係の配列で、ここでは[a, b]としています。これは、aまたはbが変更された場合にのみ計算を実行し、それ以外の場合はキャッシュされた結果を使用することを示しています。

import React, { useMemo } from 'react';

// 複雑な計算を模倣する関数
function complexCalculation(a, b) {
  console.log("複雑な計算を実行中...");
  return a + b;
}

function MyComponent() {
  const a = 5;
  const b = 10;

  // useMemoを使用して複雑な計算の結果をキャッシュ
  const result = useMemo(() => {
    return complexCalculation(a, b);
  }, [a, b]);

  return (
    <div>
      <p>複雑な計算の結果: {result}</p>
    </div>
  );
}