はじめに

React.memo、useCallback、useMemoを利用したコンポーネント、関数、値のメモ化は、実装コストが少ない分「とりあえず記述しとけ！」みたいなノリで書きがちな初心者(自分)が多そうな気がします。

しかし、意味のないメモ化はただの負債でしかないので、ちゃんと理解した上で記述できるよう、おさえておきたい内容を初心者向けに記事にしました。

React.memo、useCallback、useMemoってなんや！？って方は、以前書いた記事を参考にしていただければと思います。

JavaScriptのデータ型

まずおさえておきたいのは、JavaScriptのデータ型についてです。

JavaScriptのデータ型は基本型と参照型に分類されます。

基本型：number, string, boolean, synbol, null/undefined
参照型：array, object, function

これらは値を変数に格納する方法が異なります。
基本型の変数には値そのものが直接格納されますが、参照型の変数には値を格納しているメモリ上のアドレス(ポインタ、参照値)が格納されます。

Reactのレンダリング

"Add a Boxer"でReact.memoでメモ化したBoxerコンポーネントを追加するケースを考えます。

App.jsx

const Boxer = React.memo(({ name, punch }) => {
  console.log(`rendering ${name}`);
  return <p onClick={() => punch(name)}>{name}</p>;
});

const App = () => {
  const [boxers, setBoxers] = useState(['Ippo', 'Sendo', 'Mashiba']);

  const punch = (name) => console.log(`${name} has punched`);

  return (
    <>
      {boxers.map((name, i) => (
        <Boxer key={i} name={name} punch={punch} />
      ))}

      <button onClick={() => setBoxers([...boxers, prompt('Name a boxer')])}>
        Add a Boxer
      </button>
    </>
  );
};

コードを一見すると、Boxerを追加したとき、既存コンポーネントのPropsであるnameとpunchに変化はなさそうです。
メモ化が成功して、既存コンポーネントの再レンダリングは起こらないようにみえます。

しかし、実はこれ、再レンダリングが起こります。

この理由を考えるときに、前項の「JavaScriptのデータ型」を理解している必要があります。

BoxerのPropsであるpunchには関数が設定されています。

関数のデータ型は参照型であり、描画のたびに異なるインスタンスが生成されます(格納されるメモリのアドレスが変わります)。
結果、punchの値が変化したとみなされて、Boxerコンポーネントが再描画されることになるというわけです。

それでは、関数punchの値が変化したとみなされないようにはどうすればいいのか...
ここで使用するのがuseCallbackです。

punch()をuseCallbackでメモ化してみます。

const punch = useCallback((name) => console.log(`${name} has punched`), []);

再度Boxerを追加してみると、今度は既存コンポーネントの再レンダリングが行われなくなりました。

まとめ

React.memoを使うときは、ラップするコンポーネントのPropsのデータ型に気をつけて、関数のような参照型が含まれる場合は必ずuseCallbackで合わせてメモ化しましょう！

参考資料

JavaScript本格入門　山田祥寛　著

オブジェクト指向でなぜつくるのか　平澤章　著

Reactハンズオンラーニング　Alex Banks, Eve Porcello　著