React.memo, useCallBack, useMemoを使う理由

パフォーマンス改善のために使う。です。

React.memo, useCallback, useMemoをちゃんと使うとメモ化され無駄なレンダリングが抑制されます。

メモ化とは、以下です。

再レンダリングされても同じ結果になるものは、初回のものを記録する。
値を記録し再レンダリングされても値を計算しない。 ※値が変化するときのみ処理する。

よく分からないですね。
後半のサンプル動かしながら覚えていきましょう。

Reactをやり始めの頃は、ただただ関数にuseCallbackを付けたら、良いんだろ？と思い実装していました。

上記考え、やり方は無駄な実装です。
（厳密にいうと逆に、useCallbackを処理する分、パフォーマンス悪くなるとの意見もあります。）
ちゃんと理解して使用しましょうということです。

レンダリングが起こる条件

こことここがとても分かりやすかったです。特にここのサンプルを動かすと理解が深まると思います。

Reactコンポーネントの再レンダリングは、おおよそ以下3つの条件で発生します。

propsの更新
stateの更新（自コンポーネントのstate）
親コンポーネントが再レンダリングされた時

※一つでも条件に当てはまれば、再レンダリングされるということです。

素のサンプルコードを動かしてみよう

メモ化を施していない素のソースです。

import React, { useState } from "react";

/**
 * 親コンポ
 * @returns
 */
export const App: React.FC = () => {
  const [countStateA, setCountStateA] = useState(0);
  const [countStateB, setCountStateB] = useState(0);

  //Aボタンのstateセット用関数
  const incrementACounter = () => setCountStateA(countStateA + 1);

  //Bボタンのstateセット用関数
  const incrementBCounter = () => setCountStateB(countStateB + 1);

  return (
    <>
      <Count text="A ボタン" countState={countStateA} />
      <Count text="B ボタン" countState={countStateB} />
      <button onClick={incrementACounter}>A ボタン</button>
      <button onClick={incrementBCounter}>B ボタン</button>
    </>
  );
};
export default App;

/**
 * 子コンポ
 */
const Count: React.FC<{ text: string; countState: any }> = ({
  text,
  countState,
}) => {
  console.log("Count child component:", text);
  return (
    <p>
      {text}:{countState}
    </p>
  );
};

Aボタン押下時に、Bボタンも描画されています。
Bボタン押下時に、Aボタンも描画されています。

React.memoを使用してみます。

先程のソースの子コンポをReact.memoでラップします。
へい！よー！

import React, { useState } from "react";

/**
 * 親コンポ
 * @returns
 */
export const App: React.FC = () => {
  const [countStateA, setCountStateA] = useState(0);
  const [countStateB, setCountStateB] = useState(0);

  //Aボタンのstateセット用関数
  const incrementACounter = () => setCountStateA(countStateA + 1);

  //Bボタンのstateセット用関数
  const incrementBCounter = () => setCountStateB(countStateB + 1);

  return (
    <>
      <Count text="A ボタン" countState={countStateA} />
      <Count text="B ボタン" countState={countStateB} />
      <button onClick={incrementACounter}>A ボタン</button>
      <button onClick={incrementBCounter}>B ボタン</button>
    </>
  );
};
export default App;

/**
 * 子コンポ
 */
// const Count: React.FC<{ text: string; countState: any }> = ({ ★ ここを変えました。
const Count: React.FC<{ text: string; countState: any }> = React.memo(
  ({ text, countState }) => {
    console.log("Count child component:", text);
    return (
      <p>
        {text}:{countState}
      </p>
    );
    // }; ★ ここを変えました。
  }
);

Aボタン押下時に、Bボタンは描画されなくなりました。
Bボタン押下時に、Aボタンは描画されなくなりました。

無駄な描画を抑制できました。

propsに関数がある場合

先程のReact.memoで無駄な描画を抑制できましたが、
原理を簡単に言うとpropsの中身が変わらなければ描画しない。
ということです。

しかし、propsが関数になると、オブジェクト？なので、毎度前回とは等価ではないとReactは判断するようです。

以下のソースを試してみましょう。
（前のソースを一部書き換えます。）

import React, { MouseEventHandler, useState } from "react";

/**
 * 親コンポ
 * @returns
 */
export const App: React.FC = () => {
  const [countStateA, setCountStateA] = useState(0);
  const [countStateB, setCountStateB] = useState(0);

  //Aボタンのstateセット用関数
  const incrementACounter = () => setCountStateA(countStateA + 1);

  //Bボタンのstateセット用関数
  const incrementBCounter = () => setCountStateB(countStateB + 1);

  return (
    <>
      {/* ★ ここから書き換えます。 start */}
      {/* <Count text="A ボタン" countState={countStateA} />
      <Count text="B ボタン" countState={countStateB} />
      <button onClick={incrementACounter}>A ボタン</button>
      <button onClick={incrementBCounter}>B ボタン</button> */}
      <p>A ボタン: {countStateA} </p>
      <p>B ボタン: {countStateB} </p>
      <Button counterState={incrementACounter} buttonValue="Aボタン" />
      <Button counterState={incrementBCounter} buttonValue="Bボタン" />
      {/* ★ end */}
    </>
  );
};
export default App;

// ★ 追加 start
/**
 * 子コンポ（Button）※React.memoされています。
 */
const Button: React.FC<{
  counterState: MouseEventHandler<HTMLButtonElement> | undefined;
  buttonValue: string;
}> = React.memo(({ counterState, buttonValue }) => {
  console.log("Button child component:", buttonValue);
  return <button onClick={counterState}>{buttonValue}</button>;
});
// ★ 追加 end

// ★ 以下削除
// /**
//  * 子コンポ
//  */
// // const Count: React.FC<{ text: string; countState: any }> = ({ ★ ここを変えました。
// const Count: React.FC<{ text: string; countState: any }> = React.memo(
//   ({ text, countState }) => {
//     console.log("Count child component:", text);
//     return (
//       <p>
//         {text}:{countState}
//       </p>
//     );
//     // }; ★ ここを変えました。
//   }
// );

また、
Aボタン押下時に、Bボタンも描画されています。
Bボタン押下時に、Aボタンも描画されています。
の状態になりました。

あかん。。

関数をuseCallbackでメモ化

してみます。

import React, { MouseEventHandler, useState, useCallback } from "react";

/**
 * 親コンポ
 * @returns
 */
export const App: React.FC = () => {
  const [countStateA, setCountStateA] = useState(0);
  const [countStateB, setCountStateB] = useState(0);

  //Aボタンのstateセット用関数
  // const incrementACounter = () => setCountStateA(countStateA + 1); //★ 書き換え
  const incrementACounter = useCallback(
    () => setCountStateA(countStateA + 1),
    [countStateA]
  );

  //Bボタンのstateセット用関数
  // const incrementBCounter = () => setCountStateB(countStateB + 1); // ★ 書き換え
  const incrementBCounter = useCallback(
    () => setCountStateB(countStateB + 1),
    [countStateB]
  );

  return (
    <>
      <p>A ボタン: {countStateA} </p>
      <p>B ボタン: {countStateB} </p>
      <Button counterState={incrementACounter} buttonValue="Aボタン" />
      <Button counterState={incrementBCounter} buttonValue="Bボタン" />
    </>
  );
};
export default App;

/**
 * 子コンポ（Button）※React.memoされています。
 */
const Button: React.FC<{
  counterState: MouseEventHandler<HTMLButtonElement> | undefined;
  buttonValue: string;
}> = React.memo(({ counterState, buttonValue }) => {
  console.log("Button child component:", buttonValue);
  return <button onClick={counterState}>{buttonValue}</button>;
});

今度はちゃんと
Aボタン押下時に、Bボタンは描画されなくなりました。
Bボタン押下時に、Aボタンは描画されなくなりました。
に出来ました。

useMemoを使ってみる。

先程は、useCallbackを使って関数をメモ化しました。
今度は、値自体をメモ化します。

以下書きかけ