How can I measure wasted renders in React 16? How can I measure wasted renders in React 16? reactjs reactjs

How can I measure wasted renders in React 16?


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!