React Developer Tool, having some of great features which you can use in your daily development and specially profiler timeline to track your page performance.

You can simply add extension to google chrome(if you do not have already) and then on using chrome developer tool(F12) for your React web app, you will see two new tab i.e. "Component" and "Profiler".

Chrome Extension:

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

With "Component" tab, you could see all the components used for that page in left side and right side you will see selected component informations like state, props etc.

With latest new version (4.22.0) of React developer tool, having some exciting feature:

• Now you see state name with component tab, earlier that was not available:

• With "Profiler" tab, now we have new option i.e. "Timeline" which help you to analyse your page load time in parts like how much time it took in API call, how much network time, how much render time etc..

To use react profiler timeline:

• Open a website that's built with the React (version 18 or newer).
• Open the "Performance" tab in Chrome and record some performance data.
• Click the "Save profile..." button in Chrome to export the data.
• Import the data into the profiler

I am recording page performance. I simply opened my one of the react page and then from chrome developer tool(F12), Performance tab, start the recording and then did actions on page like used search button click event to search and load content on page and then stop recording and saved the generated recording profile (fyi - this got auto downloaded as json file).

Now moved to "Profiler" tab, Timeline sub tab option and imported the above downloaded profile and then see the timeline of each different sections of the page, like after button click, it took some time to render then it call one of API which took 2 second etc.