React js Performance tool addon throws "Cannot read property 'counts' of undefined"

Question

I've confused as to how to utilize React's performance tool. My current usage is shown below:

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

This doesn't render anything on the page and blurts out

Uncaught TypeError: Cannot read property 'counts' of undefined 

Answer 1

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

It looks like Perf.start() only works if it is called outside of the component lifecycle. So, call it before you start your application, or call it directly from the browser's console before you trigger the event you're trying to monitor.

Answer 2

Your error stack trace seems to be coming from something else...

First of all you first need to call Perf.stop() and then try calling printInclusive(). It won't print anything on the page, it should spit out a nice table into the browser's console.

However, the easiest way to try Perf Tools is to open your browser's console and type it in manually window.React.addons.Perf.start(); followed by your actions and eventually window.React.addons.Perf.stop(); and window.React.addons.Perf.printExclusive(); or whichever API call you're using.