ReactJSのHooksでuseMemoを使ってみた

ReactJSのHooksは、コンポーネント内で状態を管理するための便利な機能です。その中でもuseMemoは、特定の値をメモ化することができるので、パフォーマンスの改善につながるとされています。この記事では、useMemoの使い方と具体的な例を紹介します。

useMemoとは？

useMemoは、特定の値をメモ化するためのHooksの1つです。メモ化することで、その値が再計算されるのを防ぎ、パフォーマンスの改善につながります。基本的には、計算に時間がかかる値を返す関数をuseMemoでラップすることで、再計算を減らすことができます。

useMemoの使い方

useMemoは、以下のように使います。

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

第1引数には、メモ化する値を計算する関数を渡します。第2引数には、依存する値の配列を渡します。依存する値が変化した場合にのみ、再計算が行われます。

実際の例

例えば、以下のようなコンポーネントがあるとします。

import React, { useState } from 'react';

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

  const handleClick = () => {
    setCount(count + 1);
  };

  const expensiveValue = () => {
    console.log('expensiveValue is calculated.');
    let result = 0;
    for (let i = 0; i < 100000000; i++) {
      result += i;
    }
    return result;
  };

  const memoizedValue = useMemo(() => expensiveValue(), []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
      <p>Expensive value: {memoizedValue}</p>
    </div>
  );
};

export default Counter;

このコンポーネントでは、カウンターの値をインクリメントすると同時に、計算に時間がかかる値を表示しています。ここで、useMemoを使わずに実行してみると、ボタンを押すたびに計算が実行されていることがわかります。しかし、useMemoを使うことで、初回のレンダリング時にのみ計算が実行され、以降は再計算が行われなくなります。

まとめ

useMemoは、特定の値をメモ化するこ
とで、パフォーマンスの改善につながるReactJSのHooksの1つです。計算に時間がかかる値を返す関数をuseMemoでラップすることで、再計算を減らすことができます。また、依存する値の配列を第2引数に渡すことで、依存する値が変化した場合にのみ再計算が行われます。

この記事では、useMemoの使い方と具体的な例を紹介しました。このように、useMemoを使うことで、パフォーマンスの向上につながるコンポーネントを作成することができます。是非、ReactJSの開発において活用してみてください。