How can I measure wasted renders in React 16?

Question

I previously used the react-addons-perf package to measure various things like wasted renders via Perf.printWasted(). Unfortunately, this package was retired in React 16 in favor of Chrome's Performance tab which doesn't have equivalent tools.

I'm aware of why-did-you-update, but this isn't exactly the same.

Is there any way in React 16 to measure wasted renders?

Answer 1

Yes, react-addons-perf was retired, and you will not get them for React 16 and further (into Fiber) as stated by Dan Abramov in this issue.

Edit 09-2018: there is a profiler for React DevTools announced recently, now you can use this tool for your rendering optimizations and analysis. More about this tooling and how to use it in this official react blog post

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

Another option is to use why-did-you-update, you mentioned it, but the difference that "isn't exactly the same" with react-perf-addons is that the latter tool use internal reconcilliation analysis, instead of relying on the fact that re-render is triggered by updating state or parents, like why-did-you-update. To me there is no much difference between this tools when we approach React unnecessary rendering performance analysis.

Alternatively you can use performance table addon that was linked in this issue. In my opinion performance analysis principles that are outlined in article by Ben Schwarz will be the most helpful for you and your application performance since React uses Timing API internally and it will be shown in Chrome DevTools under "User Timing" in Performance tab.

Hope this helps!