React.memo でトップページのレンダリングを最適化する

はじめに

レンダリングのデバッグで役立つ設定

1. React Developer Tools をインストール
2. レンダリングを可視化するように設定

続いて Chrome Dev Tools を開いたとき、下図のように React のロゴが表示されれば成功です！

最後に、レンダリングを可視化する設定を行います。手順は下図の通りです。

親コンポーネントも再レンダリングする理由

// テキストアニメーションのコンポーネント
import { TopTitle } from 'components/home/TopTitle';

...

export default function Hero(): JSX.Element {

...

		<div className="py-6 lg:py-10">
		  <TopTitle />
		</div>

...
}

React.memo によるレンダリング最適化

import { memo } from 'react';
const メモ化されたコンポーネント = memo(コンポーネント);

React.memo を導入してみる

// テキストアニメーションのコンポーネント
import { TopTitle } from 'components/home/TopTitle';
import { memo } from 'react';

...

export default function Hero(): JSX.Element {
  const TopTitleMemo = memo(TopTitle);

...

	<div className="py-6 lg:py-10">
		<TopTitleMemo />
  </div>

...
}

最後に

参考文献

• React の最上位 API – React
• React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をする - Qiita