React js Performance tool addon throws "Unable to read value" count "from undefined"

Question

I am confused about how to use the Performance React tool. My current usage is shown below:

var Perf = React.addons.Perf; Perf.start(); this.setState({ newState: newStateObject, }, function(){ Perf.printInclusive(); Perf.stop(); }); 

It does not display anything on the page and is not erased

 Uncaught TypeError: Cannot read property 'counts' of undefined 

Answer 1

See https://github.com/facebook/react/issues/3389#issuecomment-79236067 .

It seems that Perf.start() only works if it is called outside the component's life cycle. Therefore, call it before launching the application or call it directly from the browser console before starting the event that you are trying to control.

Answer 2

Your error stack trace seems to come from something else ...

First of all, you first need to call Perf.stop() , and then try calling printInclusive() . He will not print anything on the page, he must spit out a beautiful table in the browser console.

However, the easiest way to try Perf Tools is to open your browser console and manually window.React.addons.Perf.start(); followed by your actions, and ultimately window.React.addons.Perf.stop(); and window.React.addons.Perf.printExclusive(); or any other API that you use.

Answer 3

It seems like Perf.start () should fit outside the rendering, so I am adding Perf.stop () to the render callback function.

below, hope this can be useful :)

 Perf.start(); ReactDOM.render( <App />, document.getElementById('app'),()=>{ Perf.stop(); var measurements = Perf.getLastMeasurements(); console.table(Perf.getLastMeasurements()); Perf.printInclusive(measurements); Perf.printExclusive(measurements); Perf.printWasted(measurements); Perf.printDOM(measurements); } );