【React】memo・useCallbackを使ってレンダリングの最適化

再レンダリングが起きる条件

✔︎stateが更新されたコンポーネントは再レンダリング
✔︎propsが更新されたコンポーネントは再レンダリング
✔︎再レンダリングされたコンポーネント配下の子要素は再レンダリング

memo機能とは？

Reactのmemoは、関数コンポーネントを最適化するための機能の一つです。memoを使用すると、コンポーネントが再レンダリングされるかどうかをReactが自動的に判断し、再レンダリングが必要ない場合は、コンポーネントの再計算をスキップすることができます。これにより、アプリケーションのパフォーマンスが向上し、レンダリング時間が短縮されます。

memoの使い方

以下のように関数コンポーネントを定義した場合、propsに変更がない限り、再レンダリングがスキップされます。

import React, { memo } from 'react';

const MyComponent = memo((props) => {
  return (
    <div>
      <p>{props.name}</p>
      <p>{props.age}</p>
    </div>
  );
});

このように、memoを使用することで、アプリケーションのパフォーマンスを最適化することができます。ただし、memoは、関数コンポーネントに対してのみ使用することができます。関数コンポーネントに対しては、PureComponentを使用することができます。

 useCallbackってなに？

useCallback は、React フレームワークのフックの一つで、関数コンポーネント内でのコールバック関数のメモ化（キャッシュ化）を行うために使用されます。メモ化を行うことにより、同じ関数が同じ引数で呼ばれた場合には以前にキャッシュした結果を返すことができます。

useCallbackの使い方

useCallback は、特に、親コンポーネントから子コンポーネントにコールバック関数を渡す場合に有用です。通常、親コンポーネントが再レンダリングされると、その子コンポーネントも再レンダリングされるため、同じコールバック関数が再生成されてしまい、パフォーマンスに問題が生じる可能性があります。しかし、useCallback を使用すると、関数が再生成されるのを防ぐことができます。

以下は、useCallback の例です。

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

function MyComponent() {
  const [count, setCount] = useState(0);

  const incrementCount = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

この例では、incrementCount 関数が useState フックによって返される count ステートを参照しています。useCallback の第二引数に [count] を指定することで、count ステートが変更されたときにのみ、incrementCount 関数が再生成されるようにします。これにより、余分な再レンダリングを防ぎ、パフォーマンスを向上させることができます。

コンポーネントをmemo化して、そこに関数を渡す場合には併せて関数の方でuseCallbackを組み合わせる必要があります。