■目次

React.memoとは

親コンポーネントが再レンダリングされた際に、追従して子コンポーネントも再レンダリングされることを防ぐメソッド。Reactにデフォルトで備わっている機能。

子コンポーネント自身のstateやpropsで受け取ったものに変更があったときだけ再レンダリングされるようになる。

使い方

• レンダリングコストの高い子コンポーネントに対して「必要に応じて」適用しよう
  • 適用すべきコンポーネント
    • 複数の要素から成り立っている子コンポーネント
    • 今後肥大化が予想される子コンポーネント
  • 一番小さい粒度のコンポーネントはmemo化しなくてOK
• React.memoが対象とするものは「コンポーネント」だよ

▼書き方

/**
* 子コンポーネント自身にReact.memoを適用する
*/

**import { memo } from "react";**

export const HogeHoge = **memo(**(props) => {
	// 省略
}**)**;

/**
* TypeScript併用時
*/
**import { FC, memo } from "react";**

export const HogeHoge: FC = **memo(**(props) => {
	// 省略
}**)**;

**HogeHoge.displayName = 'HogeHoge';**

▼使用例

/**
* 子コンポーネント
*/
import { memo } from "react";

export const ChildArea = **memo(**(props) => {
  const { open } = props;
  console.log("ChildAreaがレンダリングされた！！");

  const data = [...Array(2000).keys()];
  data.forEach(() => {
    console.log("...");
  });

  return (
    <>
      {open ? (
        <div style={style}>
          <p>子コンポーネント</p>
        </div>
      ) : null}
    </>
  );
}**)**;

/**
* 親コンポーネント
*
* inputは子コンポーネントと関係ないため、どれだけテキスト入力しても**ChildArea**が
* 再レンダリングされることはない
* 「表示」ボタンをクリックすると、**ChildArea**に渡しているstateのopenが更新されるため、
* **ChildArea**も再レンダリングされる
*/
import { useState } from "react";
import { ChildArea } from "./ChildArea";
import "./styles.css";

export default function App() {
  console.log("App");
  const [text, setText] = useState("");
  const [open, setOpen] = useState(false);

  const onChangeText = (e) => {
    setText(e.target.value);
  };

  const onClickOpen = () => {
    setOpen(!open);
  };

  return (
    <div className="App">
      <input value={text} onChange={onChangeText} />
      <br />
      <br />
      <button onClick={onClickOpen}>表示</button>
      **<ChildArea open={open} />**
    </div>
  );
}

▼実際の挙動はこちら

Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版

参考

useMemo, useCallback, React.memoとは何か？違いは？

【React】実務におけるuseMemo/useCallback/React.memoの適用方針 | Enjoy IT Life