React perf always prints empty Array

Question

I'm trying to test the performance of my app by using react perf tools. The problem is its not working. I call

Perf.start()

Perf.stop()

Perf.printWasted()

in the console, which works (no console errors or warnings), but printWasted() always returns empty Array and a message

Total time: 0.00 ms

This also happens for other functions like printInclusive() and printExclusive() What can be the problem? P.S I'm using react-router, how is react perf performing with that? Maybe that's causing some issues? Also, process.env.NODE_ENV is not set to production, and I'm using React 0.13.3

Answer 1

I was having the same problem as described here - in my case it was a silly mistake, though. It's possible that you (or someone else in the future) may have made the same silly mistake, so I thought I'd explain what I did.

I was writing some test code where I loaded the React library directly into the page -

<script src="/Script/ThirdParty/react-15.0.0.js"></script>
<script src="/Script/ThirdParty/react-dom-15.0.0.js"></script>

When I wanted to get information about how the page was performing, I also loaded the "addons" script -

<script src="/Script/ThirdParty/react-15.0.0.js"></script>
<script src="/Script/ThirdParty/react-dom-15.0.0.js"></script>
<script src="/Script/ThirdParty/react-with-addons-15.0.0.js"></script>

Then refreshed the page, went to the console and typed

React.addons.Perf.start()

I interacted with the page so that a re-render occurred and then typed

React.addons.Perf.stop()
React.addons.Perf.printWasted()

and I always got

Array[0]

Total time: 0.0ms

The mistake was that the addons script should not be loaded in addition to the primary React script, it should be loaded instead - ie.

<script src="/Script/ThirdParty/react-with-addons-15.0.0.js"></script>
<script src="/Script/ThirdParty/react-dom-15.0.0.js"></script>

After correcting that, I started getting results from the perf tool methods.