Release a tool for statistical perf analysis (a replacement for ReactPerf)

[Pajn]

Do you want to request a feature or report a bug?
A feature

What is the current behavior?
N/A

What is the expected behavior?
It's great that React 16 integrates with the timeline in browsers dev tools and that is very helpful in cases where you are trying to fix the performance of a specific thing. However I do miss the perf tool from previous versions and could not find any issue tracking a re-implementation of such a tool.

What was great in the perf tool that is not covered as well with timeline integration?

• Easily see which components render needlessly and therefore should be easily eliminated with sCU (and what impact it will give)
• Easily see the collective render time of a component. I might for example have a component that renders very fast but which have very many instances and thus contribute to a significant render time anyway.
• Give an overview of which components are slow by themselves and which are fast by themselves but render slow components. The flamegraph shows this, but I find it to specific in some scenarios with too much detail that can distract.

Basically the wasted, exclusive and inclusive tables. The DOM table I feel is much better represented by the timeline integration.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
16, yes the perf addon in 15 was good.

[gaearon]

Basically the wasted, exclusive and inclusive tables.

For exclusive and inclusive tables it might make sense to build something on top of Performance Observer API exposed by the browsers. This uses the high precision timings that we emit via our integration with User Timing API.

In fact @wwwillchen already created a proof of concept a while ago: facebook/react-devtools#801. It would be great if someone could take it, polish, and turn into an npm module.

The "wasted" table is more complicated and I'd rather not get into it until we figure out the async story in Fiber. It's not clear to me how it should work in async mode, and I'd rather not invest effort into it now if it will break later anyway.

[nitin42]

Hey! Can I work on this? I could take a look at @wwwillchen's work and then turn it into a usable npm module.

[gaearon]

Totes!

[gaearon]

Seems like @bvaughn's upcoming DevTools Profiler should help with this.

[Pajn]

That sounds super interesting. Is there a place where the progress can be followed?

[gaearon]

facebook/react-devtools#1069