【React】React.memo、useCallback、useMemoの違い

忘れそうなのでメモしておきます。

  • React.memo
    • コンポーネントのメモ化できるHOC。
    • propsが変更されない限り、コンポーネントが再レンダリングされなくなる。
  • useCallback
    • 関数のメモ化ができるhooks。
  • useMemo
    • 関数を実行した結果をメモ化できるhooks。

 

以下、使い分けです。

  • useCallback と useMemoは、コンポーネントの中で使う
  • memoは、コンポーネントの外(というかコンポーネントをラップする)で使う

📝React.memo

React.memo は、以下のような感じで使います。

export default React.memo(function A(props) {
  return (
    <h1>てすとだよ</h1>
  );
});

このように書くと

propsが変更されない限り、Aは再レンダリングされないよ!」

という意味になります。

📝useCallback

useCallbackは、以下のような感じで使います。

export default function A(props) {
  const B = useCallback(
    () => {
      dosomething(a,b)
    },[a,b]
  )
  return (
    <h1>てすとだよ</h1>
  );
};

このように書くと

「 変数a,bが変更されない限り、B は再生成されないよ!」

という意味になります。

📝useMemo

useMemoは、以下のような感じで使います。

export default function A(props) {
  const B = useMemo(
    () => {
      dosomething(a,b)
    },[a,b]
  )
  return (
    <h1>てすとだよ</h1>
  );
};

このように書くと

「変数a,bが変更されない限り、B は再生成されないよ!」

という意味になります。

 

「あれ、useCallbackと同じじゃね?」と思うかもですが

useCallbackとの違いは

  • useCallback:関数をメモ化する
  • useMemo:関数の実行結果をメモ化する

です。

 

なので上の例で言うと

  • useCallback:アロー関数がBに入る
  • useMemo:アロー関数の実行結果がBに入る

という違いがあります。

(上の例の場合、useMemoの中のアロー関数は何も返していないので、Bにはundefinedが入ることになります)

React.memoと組み合わせて使用しないと意味がない

例えば、useCallbackを単体で使用したとしても、不要な再レンダリングをスキップできるわけではありません。なのでパフォーマンスの向上は期待できません。

useCallbackでメモ化された関数は、React.memoでメモ化されたコンポーネントへpropsとして渡されることで、はじめて意味を成します。

 

 

おわり

React
スポンサーリンク
この記事を書いた人
penpen

1991生まれ。
2019年くらいからフロントエンドエンジニアを目指している元アフィリエイターです💩

penpenをフォローする
penpenをフォローする
penpenメモ

コメント

タイトルとURLをコピーしました