React.Memoでメモ化

こんにちは、なかにしです。

今回はReact.Memoの機能を使って「メモ化」をしていこうと思います。

カウントアップアプリを例として使いながら解説します！

事前準備
現状の無駄確認
さいごに

事前準備

事前準備として、カウントアップアプリを用意します。

import "./App.css";
import { useState } from "react";
import { Sample } from "./Sample";
import { Sample2 } from "./Sample2";

function App() {
  const [number, setNumber] = useState(1);

  return (
    <div className="App">
      <p>カウント:{number}</p>
      <Sample />
      <Sample2 />

      <button onClick={() => setNumber((prevNumber) => prevNumber + 1)}>
        カウントアップボタン
      </button>
    </div>
  );
}

export default App;

export const Sample = () => {
  console.log("sample1がローディングされました。");

  return <div>sample</div>;
};

export const Sample2 = () => {
  console.log("sample2がローディングされました。");

  return <div>sample2</div>;
};

▽初期状態

現状の無駄確認

現状のコードには無駄があります。

▽コンソールを見てみると…

無事にsample1とsample2がローディングされていますね。

▽この状態でカウントアップボタンを押すと…

変更箇所は「App.tsx」の{number} の場所だけなのに、
「Sample1.tsx」「Sample2.tsx」が毎回レンダリングされています。

これは親コンポーネントがレンダリングされた時、
子コンポーネントもレンダリングされるというReactの仕様のせいです。

学生の頃の「連帯責任」を思い出しますね。

でも、用もないのに呼び出されて可哀想ですよね。
これを用があるときだけ呼び出す為、「Memo化」を使用します。

「Memo化」は簡単で、用があるときだけ呼び出したいコンポーネントを
React.memo()で囲ってあげるだけです。

▽Sample, Sample2 をメモ化

import React from "react";

export const Sample = React.memo(() => {
  console.log("sample1がローディングされました。");

  return (
    <>
      <div>
        <p>sample</p>
      </div>
    </>
  );
});

import React from "react";

export const Sample = React.memo(() => {
  console.log("sample1がローディングされました。");

  return <div>sample</div>;
});

▽動作確認

さっきとは違い、用がないものは呼び出されなくなりました！

Memo化の便利な所は「用がないときは呼び出されない」ので、
逆を言えば「用があるときはちゃんと呼び出される」ということです。

▽Sample.tsx に用事をつけてみます。

import React from "react";

type Number = {
  number: number;
};

export const Sample: React.FC<Number> = React.memo(({ number }) => {
  console.log("sample1がローディングされました。");

  return (
    <>
      <div>sample</div>
      <p>sample1のカウント:{number}</p>
    </>
  );
});

これでApp.tsxのカウントとSample.tsxのカウントが連動しました。

ボタンを押す→App.tsxのカウントが変化→Sample.tsxのカウントが変化
なので、App.tsxとSample.tsxのみ変化します。Sample2.tsxは無関係です。

▽動作確認