React: 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.

[gaearon]

@tj

the react-addons-perf module apparently does not exist once installed

Can you clarify? I was able to run

npm i --save-dev react-addons-perf

then put

window.ReactPerf = require('react-addons-perf')

in my index.js, and was able to refer to it from the console

[ffxsam]

For me personally, this worked:

import Perf from 'react-addons-perf';

window.Perf = Perf;

[tj]

hmm weird must have been something funky with webpack

[gaearon]

You might want to verify you don’t have a duplicate React. Maybe there was some version issue and you got a duplicate one? npm ls react

[lcxfs1991]

I see a lot of transactions here like, update attribute, set innerHTML, update styles, set textContent and so on. Do they really happen?

In addition, why I can't see the detailed content of "set innerHTML"

[gaearon]

I see a lot of transactions here like, update attribute, set innerHTML, update styles, set textContent and so on. Do they really happen?

Yes, although AFAIK some updateAttributes might be avoidable: #5329. Note that a DOM operation isn’t necessarily expensive so don’t worry too much about them unless they really seem unexpected.

In addition, why I can't see the detailed content of "set innerHTML"

The operation name is misleading because it’s actually using document.createElement(). Those are real nodes, and reading their innerHTML is prohibitively expensive.

[jmm]

If you're using Browserify and just want to utilize this from the console without changing your app code you can do b.require("react-addons-perf") for the bundle that includes React, then from the console:

window.whatever = require("react-addons-perf");

A pain in the neck to be sure, but it's one option for using it currently. Alternatively you could, just in dev, include an additional entry file (from disk or stream) that sets it as a global, e.g.:

if (environment !== "production") b.add("dev-init.js");

[jvalen]

Hi @tj

the react-addons-perf module apparently does not exist once installed

hmm weird must have been something funky with webpack

I had problems with that too. I'm going to explain what I did, just in case we were in the same scenario or maybe it's useful for someone else.

I was using webpack-dev-server, I didn't notice that it loads an iframe and I couldn't access to its context by default from the dev tools console. There is a drop-down in Chrome and Firefox that allows you to switch to the iframe context.

Other solution could be use webpack-dev-server inline mode which doesn't wrap the app inside an iframe.

[ConAntonakos]

Am I missing something? There's no longer .start() or .stop() it seems?

This is only API I see on the Perf object:

[ffxsam]

Nope, works ok here. Make sure you're referencing the correct Perf object.

[ffxsam]

Oh.. I should mention I'm using version 15.1.0.

[gaearon]

Am I missing something? There's no longer .start() or .stop() it seems?

Make sure you have both react and react-addons-perf of the same version. You probably see this because you updated only one of the packages.

[gaearon]

Closing in favor of an umbrella issue in https://github.com/facebook/react/issues/8060.

[uragecz]

Is there any way how to print measurement to DOM, like a simple text, because of i don't have any access to console..

[curgery]

react-addons-perf working on react version 16(.1)? Stackflow's documentation is stating otherwise.....
RLG

[koba04]

@curgery

As of React 16, react-addons-perf is not supported. Please use your browser’s profiling tools to get insight into which components re-render.

• https://reactjs.org/docs/perf.html
• https://reactjs.org/docs/optimizing-performance.html#profiling-components-with-the-chrome-performance-tab