ReactのuseMemoとは何か？

useMemo

useMemoフックは、計算結果をキャッシュし、その結果を再利用するためのもので、
計算に時間がかかる関数の結果をメモ化するために使われます。

useMmeo構文

useMemo(() => 値を計算するロジック, 依存配列);

例えば以下のように使います。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

computeExpensiveValueは計算コストの高い関数で、aとbがその関数の引数です。
useMemoの第二引数には、この計算が依存する値（aとb）が含まれています。
これらの値が変更された場合にのみ、computeExpensiveValueが再計算されます。
それ以外の場合は、以前の結果がキャッシュされ、再計算されません。

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

const ExampleComponent = () => {
  const [count, setCount] = useState(0);

  // 偶数の場合は "Even"、奇数の場合は "Odd" を返す
  const evenOrOdd = useMemo(() => {
    return count % 2 === 0 ? 'Even' : 'Odd';
  }, [count]);

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

export default ExampleComponent;

countという状態変数を管理し、それが偶数か奇数かを表示します。
useMemoフックは、countが変更されたときにのみ、偶数か奇数かを計算し直します。
その結果はevenOrOddという変数に格納され、画面上に表示されます。

useMemoの第二引数には、countが含まれており、countが変更された場合にのみ再計算されます。これにより、偶数か奇数かの計算がcountが変更されない限り、同じ結果を再利用します。

⚫︎補足
useMemoの第二引数は[count]。
この場合、countが変更されたときにのみ、useMemo内の関数が再評価されます。

有益資料

この資料だと詳しく載っています。

資料

ChatGPT