ReactのuseMemo

こんにちは！株式会社アルシエで教育に関するサポートをしている岸本です。

今回は「useMemo」についてお伝えしていきます。

複雑な計算

コンポーネント内で負荷の高い計算を行う場合、useMemoを使用して計算が必要な場合のみ再実行されるようにします。

そうすることで、パフォーマンスを向上させることができます。

以下のコードでは、complexCalculation関数の結果をlistが変更された場合にのみ計算し直しています。

function complexCalculation(list) {
  // 複雑な計算を行うコード
  return result;
}

function MyComponent({ list }) {
  const memoizedResult = useMemo(() => {
    return complexCalculation(list)
  }, [list]);

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

同じデータを指す場合

オブジェクトや配列などのデータを子コンポーネントに渡す場合、同じ参照を維持し、不要なレンダリングを回避できます。

以下は、valuesが変更された場合に新しい参照を作成するようにuseMemoを使用しています。

function MyComponent({ values }) {
  const memoizedValues = useMemo(() => values, [values]);

  return <MemoizedChildComponent values={memoizedValues} />;
}

function ChildComponent({ values }) {
  // ...
}

const MemoizedChildComponent = React.memo(ChildComponent);

大きなリストのフィルタリング

大規模なデータセットを操作する場合、useMemoを使用してリストのフィルタリングや並べ替えなどの操作をメモ化すると、これらの操作が不要に再実行されるのを防ぎ、コンピューティング能力を節約できます。

以下は、listが変更された場合にフィルタリングを再実行します。

function MyComponent({ list }) {
  const filteredList = useMemo(() => {
    return list.filter(item => item.active);
  }, [list]);

  return <ListDisplay items={filteredList} />;
}

`useMemo`を使用しない場合

簡単な計算

簡単な計算の場合、useMemoを使用するのは過剰です。

コードを複雑にする可能性があり、プリミティブな計算や単純な値の変更にはuseMemoを使用する必要はありません。

function MyComponent({ value }) {
  // 単純な計算の場合、useMemo を使わない
  const multipliedValue = useMemo(() => {
    return value * 2;
  }, [value]);

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

頻繁に変更される依存関係

依存関係が頻繁に変更される場合、useMemoを使うとオーバーヘッドを引き起こす可能性があります。

オーバーヘッド
不必要な計算や処理の追加、無駄なリソースの使用、過度なコンピュータリソースの消費などを指しめしています。

変更時に再計算を行うため、変更が頻繁な場合は注意しましょう。

function MyComponent({ frequentlyChangingValue }) {
  // 依存関係が頻繁に変更される場合、useMemo を使わない
  const memoizedValue = useMemo(() => {
    return expensiveCalculation(frequentlyChangingValue);
  }, [frequentlyChangingValue]);

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