React-native: Profiling javascript thread performance

[mdamien]

Description

When profiling a react-native app, often the bottleneck is in the JS thread. But there's no way to know which javascript functions are the bottleneck.

As shown in the profiling doc, we can't see the exact js calls:

Reproduction

I've reproduced it by using systrace.py as shown in the docs and got a profile looking like this:

Solution

Ideal solution would be some doc to use the V8 profiler.

Also, for react.js, we have React.addons.Perf. Maybe showing how to use it for react-native would be also nice.

EDIT3: looks like using react-addons-perf solve most of the issues for my specific case, I should maybe include it in the docs

I don't know much about the react-native profiling infrastructure, maybe there's already something built-in that I missed.

EDIT: after a bit more of research, I saw a few things:

• PerformanceLogger, seems to be what I want but can't find docs on how to use it
• looks like systrace already mesure component rendering time
• there's a sampling profiler, not sure how to use it too

EDIT2: also, looks like something is planned

I'm interested in contributing a PR for this if necessary.

Additional Information

• React Native version: 0.30.0
• Platform: android
• Operating System: linux

EDIT4: managed to something like what I wanted with react-addons-perf by using something like this:

import Perf from 'react-addons-perf';

....
    componentDidMount() {
        console.log('start perf tracking');
        Perf.start();
        setTimeout(() => {
            console.log('stop perf tracking');
            Perf.stop();
            Perf.printExclusive();
        }, 10000);
   }
...

But something nicer would be to be able to get a flamegraph

EDIT5: Looks like debugging with chrome allow to use the profiler from chrome directly, making this whole issue solved

[ericvicenti]

Looks like you've got it mostly figured out.

Please submit a PR to help our docs in this regard, if you can!

cc @tadeuzagallo, who will know about the state-of-the-art in perf tooling.

[mdamien]

For history, one of the thing I was orginally looking for is this:

https://twitter.com/addyosmani/status/799384030164578304

It looks like it's also in the react-native codebase, not sure how to trigger it yet:

https://github.com/facebook/react-native/blob/3683beb88ab3233038ac32b9c33112d537478088/Libraries/Renderer/src/renderers/shared/ReactDebugTool.js

EDIT: Looks like the React Dev Tools worked before but are not working anymore https://github.com/facebook/react-devtools/issues/229

That would trigger the performance marks.

Also, there's an extension especially to triger the React.addons.Perf.start stats: https://chrome.google.com/webstore/detail/react-perf/hacmcodfllhbnekmghgdlplbdnahmhmm/related

[jeremyong]

With react-addons-perf and Perf.start/Perf.stop I wasn't able to measure anything (getLastMeasurements always returns an empty array). What might I be doing wrong?

[mdamien]

@jeremyong how did you measure it ? have you tried this code ?

import Perf from 'react-addons-perf';

....
    componentDidMount() {
        console.log('start perf tracking');
        Perf.start();
        setTimeout(() => {
            console.log('stop perf tracking');
            Perf.stop();
            Perf.printExclusive();
        }, 10000);
   }
...

[jeremyong]

Yep tried that too. I get zero output. When I tried debugging it, it seemed like the Perf module being imported wasn't instrumenting the same component that react native was using. Also, I verified that the react, react-addons-perf, and react-dom versions matched my RN version. Note that the react-addons-perf module transitively imports the react-dom debug tool.

[eremzeit]

react-addons-perf doesn't work for me and I'm running RN 0.39. I get following error message when I'm importing react-addons-perf and I start the app.

Unknown named module: 'react-dom/lib/ReactPerf'
Module AppRegistry is not a registered callable module (calling runApplication)

[kfiroo]

@eremzeit I get the same error.. Any luck with this?

[hilkeheremans]

@eremzeit @kfiroo In order for react-addons-perf to work you need to also install react-dom as a (dev) dependency. Do that and this error should disappear.

[24ark]

@jeremyong You can use RCTRenderingPerf.js instead of react-addons-perf.

import PrefMonitor from 'react-native/Libraries/Performance/RCTRenderingPerf';

componentDidMount() {

  PrefMonitor.toggle();
  PrefMonitor.start();
  setTimeout(() => {
      PrefMonitor.stop();
  },5000);

}

[johnculviner]

My guess is even though it says to use react-addons-perf here in the docs for react-native:
https://facebook.github.io/react-native/docs/performance.html#profiling
react-addons-perf only works where there is a DOM since well... it's requiring a DOM module that is never used in react-native because it doesn't do DOM rendering it renders native components

[hojberg]

I thought the perf addon wouldn't work with React 16 due to Fiber?

[hojberg]

also looks like RCTRenderingPerf was removed :(