Reactのメモ化周りを整理する

はじめに

ちょっとご無沙汰だったReactを触る機会があったので、改めて学んでいます。Hooksのメモ化周りについて、曖昧だった部分を簡単に整理してみました。

メモ化周りの機能

• React.memo
  不要な再レンダリングを省略できるコンポーネントを生成するもの。
• useCallback
  React.memoが依存する関数をメモ化するためのもの。
• useMemo
  依存する状態に基づいて結果をメモ化する関数。

React.memoとuseMemo

React.memoはメモ化できるコンポーネントを返すことに特化しています。メモ化するコンポーネントは、それを使用する親コンポーネントとは独立して定義します。
useMemoは値を返す関数で、スカラ値やオブジェクトのほか、Reactのコンポーネントも返すこともできます。コンポーネント内でメモ化したコンポーネントを生成する場合はこちらを使います。

useCallbackの目的

useCallbackはReact.memoと併用することによって、関数の再生成によるコンポーネントの再レンダリングを防ぐために使います。関数そのものの生成コストは高くないため、それ自体を目的としては使いません。

まとめ

コンポーネントのメモ化については、React.memoとuseMemoどちらでも可能なので、予め使用方針を明確にしておいたほうが良さそうです。