メモ化

Reactはstateやpropsが更新される度に再レンダリングが行われます。
useCallback()、React.memo()、useMemo()を利用すると、初回の処理を実行して記録し、値が必要となった2回目以降は、保持していた計算結果を再利用します。これをメモ化といいます。

メモ化は再レンダリングする必要がなくなるため、パフォーマンスの向上を期待できます。

React.memo()

React.memo()はコンポーネントのレンダリング結果をメモ化するReact APIです。親コンポーネントから渡されたpropsについて前回との変更差分をチェックし、コンポーネントが返した描画結果を記録してメモ化し、差分があった場合のみ再レンダリングを行います。

前回のpropsと新しく親コンポーネントから渡されたpropsを比較し、値が等価であるかチェックする
等価である場合、メモ化したコンポーネントを利用するため、再レンダリングをスキップする
等価でない場合、再レンダリングを行う

また、React.memo()でコンポーネントをラップしても、ラップされたコンポーネント内でuseSate()やuseContext()を利用している場合、その変化に応じたコンポーネントの再レンダリングが行われます。頻繁に再レンダリングされる親コンポーネントを持つ子コンポーネント以外で利用しても大きなパフォーマンス効果を得ることはできません。

React.memo（）を使用したサンプル

React.memo()を使用した成果物を作成しました。
再レンダリングが行われる度に、Consoleに変更したラジオボタンリストのメッセージが表示されます。
例えば、ラジオボタンリストAの値を変更した場合、Consoleに「ラジオボタンリストAが選択されました」と出力されます。この時、ラジオボタンリストBの値は変更されていないため、Consoleには出力されません。

コード解説

index.js

2回レンダリングされるのを防ぐためにStrictModeは削除しました。

import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(<App />);

App.js

import React, { useState } from "react";
import "./styles.css";

// ラジオボタン用の要素を持った配列を設定
const items = [
  { id: 1, item: "東京" },
  { id: 2, item: "大阪" },
  { id: 3, item: "愛知" },
  { id: 4, item: "福岡" },
  { id: 5, item: "北海道" },
  { id: 6, item: "宮城" }
];

//　親コンポーネントRadioからprops(name, handleChange, value)を受け取る
const RadioOption = (props) =>

  // map()を用いて配列itemsの要素を１つひとつ設定する
  items.map((item) => {
    return (

      // ラジオボタン内で一意となるkey属性を設定
      <label key={item.id}>
        <input
          type="radio"
          value={item.item}

          // ラジオボタンリストA・Bと２つ存在するため、リストを分けるのにnameを設定する
          name={props.name}

          // ラジオボタンで選択された値を親コンポーネントで定義されている状態変数valueA,valueBに渡す
          onChange={props.handleChange}

          // ラジオボタンの初期値（最初にチェックされている値）を設定する
          // 親コンポーネントから渡されるvalueには初期値にitems[0].item=東京が設定されている
          // そのため、最初にラジオボタンにチェックされているのは東京になる
          checked={item.item === props.value}
        />
        {item.item}
      </label>
    );
  });

// 親コンポーネントRadioからprops(text, value)が渡される
// React．memoでRadioResultコンポーネントをラップする
// 親コンポーネントRadioから渡されたprops(text, value)を記録する
// 2回目以降は前回のprops(text, value)と比較し、等価でない場合のみ再レンダリングを行う
const RadioResult = React.memo((props) => {
  console.log(`${props.text}が選択されました`);
  return (
    <p>
      選択された値:<b>{props.value}</b>
    </p>
  );
});

const Radio = () => {

  // ラジオボタンリストAで現在選択されている値を設定する状態変数valueA
  // valueAを更新するsetValueA
  const [valueA, setValueA] = useState(items[0].item);

  // ラジオボタンリストBで現在選択されている値を設定する状態変数valueB
  // valueBを更新するsetValueB
  const [valueB, setValueB] = useState(items[0].item);

  // ラジオボタンリストAで選択された値(value)を設定する関数handleChangeAを定義
  const handleChangeA = (e) => setValueA(e.target.value);

  // ラジオボタンリストBで選択された値(value)を設定する関数handleChangeBを定義
  const handleChangeB = (e) => setValueB(e.target.value);

  return (
    <>
      <div className="radio-list">
        <div>
          ラジオボタンリストA
          <RadioOption
            name="radioA"
            value={valueA}
            handleChange={handleChangeA}
          />
          <RadioResult text="ラジオボタンリストA" value={valueA} />
        </div>
        <div>
          ラジオボタンリストB
          <RadioOption
            name="radioB"
            value={valueB}
            handleChange={handleChangeB}
          />
          <RadioResult text="ラジオボタンリストB" value={valueB} />
        </div>
      </div>
    </>
  );
};

export default function App() {
  return <Radio />;
}

今回の処理は親コンポーネントであるRadioからReact.memo()でラップされた子コンポーネントRadioResultへprops（text, value）を渡す。
textは固定の文字列のため、変更される値はvalueのみである。
今回のプログラムの構造は以下のようになっていますが、RadioコンポーネントからRadioResultコンポーネントへ渡されるvalueAの値が変更されても、もう１つのRadioResultコンポーネントへ渡されるvalueBの値は変更されないため、ボタンリストAのみ再レンダリングされ、ンソール画面には「ボタンリストAが変更されました」と出力されます。

しかし、React.memo()を外した場合、親コンポーネントから渡されるvalueが変更されると、例えボタンリストAのみ変更しても、ボタンリストBを再レンダリングされ、コンソール画面には「ボタンリストAが変更されました」、「ボタンリストBが変更されました」と両方出力されます。

styles.css

label {
  display: block;
}

.radio-list {
  display: flex;
  justify-content: space-around;
}