Geek Answers Handbook

React perf always prints an empty array

I am trying to test the performance of my application using perf response tools. The problem is that it does not work. I'm calling

Perf.start() Perf.stop() Perf.printWasted()

in a console that works (no console errors or warnings), but printWasted() always returns an empty array and message

Total time: 0.00 ms

This also happens for other functions like printInclusive() and printExclusive() . What is the problem? PS I am using a jet router, how does perf react with this? Maybe this causes some problems? Also, process.env.NODE_ENV not configured for production, and I am using React 0.13.3

+5
source share
2 answers

I had the same problem as described here - in my case it was a stupid mistake. Perhaps you (or someone else in the future) may have made the same stupid mistake, so I thought I would explain what I did.

I wrote some test codes where I downloaded the React library directly to 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 works, I also downloaded the "add-ons" 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 I reloaded the page, went to the console and typed

 React.addons.Perf.start()

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

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

and i always got

Array [0]

Total time: 0.0 ms

The error was that script add-ons should not be loaded in addition to the primary React script, it should be loaded instead - i.e.

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

After fixing this, I started getting results from the tool methods.

+3
source

I came across the same issue when using webpack extarnals as suggested in this quick start version: https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

 // webpack.conf.js: //... externals: { "react": "React", "react-dom": "ReactDOM" }

with

 // index.js // ... window.Perf = require('react-addons-perf')

and

 // index.html <script src="/js/react/dist/react.js"></script> <script src="/js/react-dom/dist/react-dom.js"></script> <script src="/js/bundle.js" charset="UTF-8"></script>

It turns out that this configuration also causes Perf results to always remain empty. Elimination of the problem with writing externals (and, thus, as a result of the reaction inside the webpack package). Turns out there was no performance difference at build time.

+1
source

More articles:


All Articles