React Native Performance Profiling

[maicki]

With React 16 and React Native 0.45.1 we lost a couple of really important tools for performance profiling on React Native.

Previously there were different ways to profile performance bottlenecks:

• Via Systrace on Android and iOS we saw the flame graph within the Chrome tracing view.
• RCTRenderingPerf / react-addons-perf: We were able to determine the wasted render count and time of components.

Unfortunately ...

... Systrace on iOS broke with the introduction of the CxxBridge: TypeError: global.nativeTraceBeginSection is not a function (Systrace)

... RCTRenderingPerf is not available with React 16 anymore as react-addons-perf was removed due to Fiber: Plan for Addons in React 16 and RCTRenderingPerf was recently removed completely from React Native: Remove unused RCTRenderingPerf.

With React on the web it's not such a big deal, as you can use the Chrome Timeline to get at least a bit of insights how long a component needs to render (Fiber Performance measurements) and it's the recommended way based on the feedback from the React Core Team.
Unfortunately this is not available in React Native. If you use react-dev-tools or remote debugging, you only see the performance timeline of the react-dev-tools. Still it's not really possible to see the wasted render time per component as we saw before with react-addons-perf.

Currently this is a big issue for us, as we are kind of blind to determine the reason for performance issues or if we just would like to profile certain components.

One very promising PR is this one from @gaearon : Not for Merge - Disable ReactPerf and Update Systrace React Integration #12797 - that hopefully would give us some transparency of components render cycle back. Work needs to be pickup though.

Maybe to mention is that we are very comfortable with Xcode Instruments or Android Profiling tools, but in there it's not possible to the fine granularity of profiling like e.g. we had with react-addons-perf.

• What are the future plans for React Native Performance Profiling?
• Are there any other best practices available?

[nerdmed]

@maicki we are also struggeling with react-native performance on older devices like iPad 2 and iPad Mini. We are using this to get some Profiling information: import Perf from 'ReactPerf'; did you try that one? But it is still very frustrating without a proper JS CPU profiling on iOS.

[maicki]

Interesting, for reference this works for us now in the latest React Native version to get at least the wasted render count / time per component:

import Perf from 'ReactPerf';
...
componentDidMount() {
    // We have to push it to the next tick otherwise React Native would have
    // problems with the WorkerPerformance
    setTimeout(() => {
      Perf.start();

      // Some arbitrary time for metrics
      setTimeout(() => {
        Perf.stop();
        Perf.printWasted();
      }, 5000);

    }, 0);
 }

@nerdmed Agree, having more fine granular tools, e.g. Systrace and the Chrome timeline, would greatly benefit the performance profiling.
Working on Texture thought me some valuable lessons about profiling with using Instruments. The fine granular overview of what is going on was invaluable as we run tests on not so powerful devices like iPod Touch, iPad Mini, iPad 2 and especially iPad 3.

[javiercr]

Thank you @maicki for the great wrap up on the current situation with performance profiling. We're also struggling to improve the performance of some of our complex UI components (such as our datepicker), since we lost the ability to use Systrace on iOS.

Regarding Systrace, I think it's also important to note that the Android's Systrace doesn't give you much information about the JS thread (probably due to the lack of markers).

We got some perf insights by using react-native-console-time-polyfill. As it was recently explained to me, when we use the remote debugging, the JS gets executed insides of Chrome process, making JS execution actually faster than in the actual device / simulator.

[pull-bot]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[javiercr]

Thanks for taking this out of the Icebox. Performance tooling is absolutely necessary in order to create stellar experiences with RN.

Also related: #15003

[MaxGraey]

For very simple profiling you can use this polyfill until global.nativeTraceBeginSection not repaired.

[wuweijia]

after I reset the simulator can be used wish I could help you

[varungupta85]

ReactPerf doesn't spit out any logs in 0.49.3. It was working fine in 0.44.0. Has anyone been able to use ReactPerf in 0.49.3 or higher?

[Rebsos]

ReactPerf is still not working in 0.50.3

[gaearon]

ReactPerf is not expected to work with 16.

Systrace, however, is. If it doesn’t work for you please provide the exact sequence of steps you’re doing.

[brunolemos]

Systrace, however, is. If it doesn’t work for you please provide the exact sequence of steps you’re doing.

@gaearon I think systrace is broken for most people: #15003

[xutm]

Interesting, for reference this works for us now in the latest React Native version to get at least the wasted render count / time per component:

import Perf from 'ReactPerf';
...
componentDidMount() {
    // We have to push it to the next tick otherwise React Native would have
    // problems with the WorkerPerformance
    setTimeout(() => {
      Perf.start();

      // Some arbitrary time for metrics
      setTimeout(() => {
        Perf.stop();
        Perf.printWasted();
      }, 5000);

    }, 0);
 }

@nerdmed Agree, having more fine granular tools, e.g. Systrace and the Chrome timeline, would greatly benefit the performance profiling.
Working on Texture thought me some valuable lessons about profiling with using Instruments. The fine granular overview of what is going on was invaluable as we run tests on not so powerful devices like iPod Touch, iPad Mini, iPad 2 and especially iPad 3.

@maicki @nerdmed
react-native:@0.50.4
what's your react-native version?

[cpojer]

• The guide for Systrace on Android can be found here: http://blog.nparashuram.com/2018/11/react-native-performance-playbook-part-i.html
• There are currently a bunch of PRs in-flight that will add back some performance markers for native code.
• There are a bunch of sub issues linked here that we can handle separately.
• We are working on a big re-architecture for React Native which will solve many existing performance problems and should enable better tooling. See http://blog.nparashuram.com/2019/01/react-natives-new-architecture-glossary.html

cc @axe-fb who may have more comments and ideas on how you can profile your JS code

[pie6k]

So I'm not sure what is the status of this.

Right now (RN 0.61.5) when trying to profile, 9 out of 10 times I just get this:

Rarely, I get full react tree markers, but it seems like it's totally random.

I appreciate your efforts with new architecture design, but I'm simply not sure what is the status now. Is there anything I can fix right now to make profiler work, or not really?

[atheeq]

@pie6k Any luck with the above issue? I am also running into the same issue

[evelant]

@pie6k @atheeq to make chrome profiler work start your profile and then reload (from dev menu) your app while the profiler is still running. You will get normal profiling after the reload.

@gaearon systrace has been broken for everybody as far as I can tell for > 2.5 years now. Can you provide any insight on if/how it might get fixed? It's a huge pain point, perf problems on Android are so much infinitely harder to debug without it.

[axe-fb]

@AndrewMorsillo systrace on Android is not completely broken. Use instructions here (http://blog.nparashuram.com/2018/11/react-native-performance-playbook-part-i.html) to use it.

Chrome Profiler gives you incorrect information since the profiling happens over web sockets.

[evelant]

@axe-fb Thanks for that link, the blog is a goldmine of useful information. From that post however it doesn't seem to enable the use of systrace as described in the docs. My Android app is performing poorly somewhere in the interaction between js, native modules, and the gpu in a way that's incredibly hard to diagnose. If systrace worked as the docs state it seems like it would be trivial to find the issue but without full systrace support it's proving to be incredibly difficult.

I have little experience with native android development so unfortunately it's very difficult for me to contribute meaningfully to fixing this. The core issue is that when using systrace now the mqt_js and mqt_native_mod threads are shown but lack any call details so they're more or less useless for debugging #26032