React Developer Toolsでレンダリングを可視化する

こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。

React Developer Toolsは、React用開発ツールです。Reactの開発元であるMetaが提供しています。 結構有名ですが、まだ使ったことがない人に向け、簡単に書いていきます。

React Developer Toolsの使い方

拡張機能を追加します。

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

アイコンが追加されていることを確認します。通常のReactページで使用する場合、アイコンは青いですが、開発環境ではアイコンの色が赤くなります。

ローカル環境で使用するために、拡張機能の一覧から、React Developer Toolsの「拡張機能を管理」を選択します。

「ファイルのURLへのアクセスを許可する」をオンにします。

Reactを採用しているページで、デベロッパーツールを開くと、メニューに「Components」と、「Profiler」が追加されています。

Propsの確認

「Components」でpropsや、hooksの確認、レンダリング関係を見ることができます。

左側では、コンポーネントの階層を確認することができます。

右側では、以下を確認できます。

• コンポーネント名
• props
• hooks
• 親階層
• 親コンポーネントのどのファイルのどの部分から呼ばれたのか

以前はhooksの部分でstateを表示していたと思うのですが、hooksに変わっています。個人的にはstateの表示の方が良かった気がします。

レンダリング関係の確認

またReact Developer Toolsでは、stateの状態が変化したときに、再レンダリングされるコンポーネントを可視化することができます。

「View settings」を選択し、「Highlight updates when components render.」にチェックを入れます。

再レンダリング発生時に、緑のハイライトが現れるようになります。 今回の例ですと、「Component1」が再レンダリングされているのがわかります。

また、レンダリング数が多いと緑のハイライトが黄色くなっていきます。

レンダリングが可視化できると、毎回コンソールでログを表示しなくても、無駄なレンダリングが発生していないか確認することができます。

上記の例では、Component1をメモ化してみました。メモ化していないComponent2では、無駄なレンダリングが発生しているのが確認できます。

まとめ

React Developer Toolsを使うと、レンダリングの削減など、パフォーマンスの見直しに役立つと思います。他にも機能が存在しますので、Reactを使うときは、ぜひ使ってみてください。

ではまた。