Hey everyone - I'm one of the engineers on the Chrome DevTools team and Ibuilt a small proof-of-concept React performance Chrome DevTools extension as part of my 20% time.

I've been very excited about React for a while and saw some interesting React performance tooling such as thePerformance User Timings andreact-addons-perf, and saw the potential value of creating a view that summarizes component-based lifecycle timings in a table.

This tool could highlight interesting performance insights:

• Which components are taking the longest time on load?
• What's taking the most time after certain user actions (e.g. scrolling a list-type view, clicking on a new route)?
• How many component instances are there at a given moment?

I've created a repo here with the POC and usage docs:
➡️https://github.com/wwwillchen/react-perf-tool

Demo GIF

I'd personally love to see tooling like this available right in React DevTools. Additionally, on the Chrome DevTools team, we're interested in how we can adapt a mature version of this into a generalized component-based profiling view that can be in the DevTools' Performance panel.

I'm not sure if I'm the best person to upstream this tool into React DevTools, but I'm happy to help anyone who's interested in that.