[解決済み】Reactコンポーネントが再レンダリングされる原因を追跡する

質問

Reactでコンポーネントの再レンダリングを引き起こしている原因をデバッグする体系的なアプローチはありますか？私はそれが何回レンダリングするかを見るために単純なconsole.log()を置きましたが、コンポーネントが複数回（例えば私の場合4回）レンダリングする原因となっているものを見つけ出すのに苦労しています。タイムラインやすべてのコンポーネントのツリーレンダリングと順序を表示するツールはありますか？

解決方法は？

コンポーネントの（再）レンダリングの理由は、React Devtoolsのプロファイラツールで確認することができます。コードの変更は必要ありません。reactチームのブログポストを参照してください。 Reactプロファイラの紹介 .

まず、settings cog > profilerから、quot;Record why each component rendered"を選択します。