how do I disable ReactPerf?

[tjwebb]

I'm working on integrating react server-side rendering with a framework I maintain (sails.js) and ReactPerf is ironically causing serious slowdowns in my project to the point that it's skewing my perception of certain things, and making development generally more annoying. I can report my findings (via Chrome debugger) on that separately if anyone's interested. For now, I'd like to disable ReactPerf.

The docs state

The Perf object documented here is exposed as React.addons.Perf when using the react-with-addons.js build in development mode.

I am not using react-addons at all, I'm just using the React 0.13 npm module. however,

at node_modules/react/lib/React.js:29:

  var ReactPerf = require("./ReactPerf");

at node_modules/react/lib/React.js:50:

  var render = ReactPerf.measure('React', 'render', ReactMount.render);

I see no option to disable. Thoughts?

[jeffchan]

ReactPerf has a __DEV__ flag: https://github.com/facebook/react/blob/master/src/test/ReactPerf.js#L38

If you set your env to production, then it won't run. See: https://facebook.github.io/react/downloads.html#npm

[graue]

You probably want to make sure the environment variable NODE_ENV is set to "production". This disables a lot of debugging that can slow down React, including the ReactPerf stuff: with this setting, ReactPerf.measure is a no-op and will just return the function passed in.

[tjwebb]

You probably want to make sure the environment variable NODE_ENV is set to "production".

Yea, that's the thing, I'm not in production. So NODE_ENV is sort of a sledgehammer in this case, since it'd also turn off debug settings for a bunch of other libraries I'm using as well.

ReactPerf has a __DEV__ flag: https://github.com/facebook/react/blob/master/src/test/ReactPerf.js#L38

Thanks for the tip; I'll check this out. Is __DEV__ just global, on the window object?

[sairion]

tip: If you use Webpack, you can use imports-loader to inject var to specific module.

[tjwebb]

Setting window.__DEV__ = false seems to have no effect, and ReactPerf is still doing its thing. I'm rendering a large number of elements, and ReactPerf is sucking down 90-95% of the overall processing power required to render them.

[graue]

If you're intent on using React in development mode, my recommendation would be to fork the version of React you're using, modify the measure and measureMethods functions in ReactPerf.js to always be no-ops, and use that fork for your performance testing. Just be aware that there are many other checks in React that slow down performance in development mode and may skew your results.

I'm going to close out this issue because it doesn't look like there's anything concrete for React itself to do differently here, but feel free to continue discussing.

[jimfb]

@tjwebb Depending on the build of React you're using, the __DEV__ gets compiled out (global replace), so setting window.__DEV__ would have no effect. You will need to enable/disable dev as part of your build process while compiling React.

[sophiebits]

Also – it's very unlikely that ReactPerf is causing you perf problems if it's disabled. When measurement is disabled, it just calls the wrapped function directly so there should be barely any overhead. If you're seeing it as a hot spot, it may be an artifact of your profiling tools.