Request: Better documentation of react-addons-perf

[ffxsam]

https://facebook.github.io/react/docs/perf.html

IMO this is insufficient. Where are we supposed to place each of the API calls? Some example code would be great.

[gaearon]

Agreed it’s not great. These APIs aren’t meant to be used from code (at least, not commonly). They are mostly meant to be used from DevTools console. These two articles are really great at explaining how you can use them:

• http://benchling.engineering/performance-engineering-with-react/
• http://benchling.engineering/deep-dive-react-perf-debugging/

ReactPerf is going to change somewhat (#6046) so it would probably be unwise to spend more time documenting the right now.

[jimfb]

Where are we supposed to place each of the API calls? Some example code would be great.

Perf.start();
React.render(<div />, document.getElementById('container'));
Perf.stop();
Perf.printInclusive(measurements);

Is that the type of code example you are looking for? Or what would be a code example that you would want?

Also, @gaearon Those links are great, I'd be totally ok with linking to those docs until we release the new react perf stuff.

[ffxsam]

@gaearon Wow, awesome links! Bookmarking those, thank you. What was missing for me (from the official Facebook docs) was where exactly to put the perf calls. Console? Code? Where exactly in the code?

[ffxsam]

Ok, I feel like a n00b. How do I access these tools in the Chrome console? React doesn't exist. I can type React = require('react'), but React.addons doesn't exist.

[jimfb]

@ffxsam The easiest way is to use the bower builds:

<script src="https://fb.me/react-with-addons-0.14.7.js"></script>
<script src="https://fb.me/react-dom-0.14.7.js"></script>

[ffxsam]

Yeah, that route won't work for me as I'm using Meteor which doesn't use script tags to include things.

[ffxsam]

To clarify: I have React installed via npm, and used throughout my project. I have a full Meteor/React/Redux project already up and running. I just need to know how to use the perf tools.

[gaearon]

I usually do this (in development only!):

if (process.env.NODE_ENV !== 'production') {
  window.ReactPerf = require('react/addons').addons.ReactPerf
}

somewhere in my index.js.

Again, agreed it’s far from nice, and we need a better story around this.

[ffxsam]

Yep, that's what I was going to try next, and that worked. Thanks again!

[tj]

yes please, going in circles here between deprecated modules and modules that just cycle back to the bad docs haha, and the react-addons-perf module apparently does not exist once installed

[ffxsam]

You haven't seen bad docs till you've been to the webpack page. :)

[tj]

would be sweet to have it integrated right in the chrome dev tools, unless someone is already working on that :D

[gaearon]

Yeah, that’s the longer term plan.