Nicholas Nicholas - 3 months ago 8
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

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.

Comments