How can I measure cost-effective render in React 16?

Question

I previously used the action-addons-perf package to measure various things, such as spent rendering through Perf.printWasted() . Unfortunately, this package was removed in React 16 in favor of the Chrome Performance tab, which does not have equivalent tools.

I know why-did-you-update , but this is not exactly the same.

Is there any way in React 16 for measuring lost renders?

Answer 1

Yes, response-addons-perf has been removed, and you won’t get them for React 16 onwards (in Fiber), as pointed out by Dan Abramov in this release .

Edit 09-2018: A profiler for React DevTools has recently been announced, now you can use this tool to optimize and analyze rendering. You can read more about this tool and how to use it in this official blog post.

.Edit 09-2019: React Dev Tools received a major update, now you can measure renders, and there is a setting for getting the "why did you update" -like features in the RDT settings.

Another option is to use the why-you-updated option, you mentioned it, but the difference, which is "not quite the same" with the response-perf-addon, is that the latter tool uses internal reconciliation analysis. instead of relying on the fact that re-rendering is triggered by updating the state or parents, for example, why did you update. For me, there isn’t much difference between these tools when we approach the unnecessary analysis of the performance of React rendering.

Alternatively, you can use the performance table addon that was associated with this issue . In my opinion, Ben Schwartz’s article on performance analysis will be most useful for you and your application’s performance, since React uses the Timing API internally and will be displayed in Chrome DevTools under the “User Timing” section of the “Performance” tab.

Hope this helps!