Nicholas Nicholas - 1 year ago 137
React JSX Question

React perf always prints empty Array

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 Source

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.