Reactでのパフォーマンス最適化

UdemyのReact講座の中でパフォーマンス最適化について学習したのでまとめてみました。

レンダリングの最適化

前提知識

Reactが画面を更新する流れ

トリガー：何らかの契機にレンダリングを予約すること
レンダリング：コンポーネントを実行すること
コミット：DOMへの更新を行うこと

レンダリングがトリガーされるタイミング

1.初回レンダリング
2.stateの値が変更されたとき

本記事では、2のケースでの最適化を考える。

不要なレンダリングとは？

Reactでは、親コンポーネントのレンダリングが走ると自動的に子コンポーネントもレンダリングされる。
つまりデフォルトでは、

親コンポーネントでstateの値が変更される
↓
親コンポーネントのレンダリング
↓
子コンポーネントで使用しているstateの値が変わっていなくてもレンダリング(不要)

の無駄なレンダリングが発生するケースがある。

防止策

Reactの標準関数のmemoの引数に子コンポーネントを設定する。

Child.jsx

import { memo } from "react";

// stateであるcountの値が変更されたときのみレンダリング
const Child = memo(({ count }) => {

  return (
    <div className="child"
    >
      <h2>子コンポーネント領域</h2>
      <span>ボタンクリック回数：{count}</span>
    </div>
  );
});

export default Child;

上記のコードでは

自コンポーネント内のstateの値に変更があった場合のみレンダリングし、無ければレンダリングをしない

ことにより、不要なレンダリングの回避を実現している。

まとめ

プロジェクトで扱うアプリケーションの規模が大きくなるほど、パフォーマンスの観点は重要になってくる。個人で学習する際にもパフォーマンスを意識する癖をつけていきたい。

---

追記
パフォーマンス最適化関連は引き続き調査し、随時更新していきます！
補足やご指摘ございましたら、ぜひお知らせいただけますと幸いです。