CPU usage surge on device when not using remote debugging

[itaibs]

Description

Our react native app flows with reasonable (not amazing) speed when developing. But when creating a release apk / ipa, we get an unusably unresponsive app. Pressing on a button takes more than 2-3 seconds to start handling the event, transition stutter etc.

We succeeded in identifying that the difference isn't between debug/release version, but between when device uses remote debugging with chrome and when it doesn't.
It doesn't matter if DEV is set to true or not and we even completely removed logging by overriding console's functions.
This happens on both iOS and android - but only (or at least much more apparent) on physical devices.

Further investigation shows that cpu usage surges drastically (watched on xcode) when not using remote debugging, even with the most basic interactions (inserting a text in a TextInput).

Reproduction Steps and Sample Code

Just typing into a TextInput will show a surge in cpu. The surge will be significantly higher when remote debugging is off.

Object.keys(console).forEach(key => {
  if (typeof console[key] == 'function') {
    console[key] = function() {};
  }
});

import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';

export default class InsertPhoneScene extends Component {
  render() {
    const { pinIsSending } = this.props;
    return (
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'flex-start',
        alignItems: 'center'
      }}>
        <Text style={{marginTop: 50}}>
          Insert phone number below to sign up
        </Text>
        <TextInput
          style={{ width: 200, height: 50, borderWidth: 2, marginTop: 50 }}
          autoFocus={true}
        />
      </View>
    );
  }
}

AppRegistry.registerComponent('vanillaProject', () => InsertPhoneScene);

Above you can see cpu usage of inserting a phone number in one of our screens in the app with remote debugging enabled, then a spike when I reload the app without remote debugging and then the cpu usage when inserting the same number in the same screen.

I used Android systrace to profile 5 seconds on our app of pressing a button, once with remote debugging (https://itaibs.github.io/traceChrome.html) and once without (https://itaibs.github.io/trace.html). The differences are very apparent - when no remote debugging, the js thread (and the cpus) work for more than a second and only then UI and render threads start to move. With remote debugging it looks much healthier.

Note that the above code will generate surges of ~40-50% cpu usage (for just inserting text in a text input), but in our app there is much more going on (state handling, http calls etc) and the cpu surges to way over 100% when pressing a button that changes state / starting a call etc.

Solution

No idea.

Additional Information

• React Native version: [0.44]
• Platform: [both]
• Development Operating System: [mac]
• Dev tools: [Xcode, Systrace]

[hramos]

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!

Steps to re-open:
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.

[uriva]

@hramos I vote to reopen, this seems important.

[rpavlovs]

@hramos Same issue

[batmaster]

My CPU go over 130% and RAM keep increasing until the app close itself -_-

[AndrejGajdos]

+1

[EyMaddis]

+1

[EyMaddis]

With our project, it was a simple console.log(aReactElement) that serialized over the bridge and caused the JS engine to get into an endless loop.

[caijiang]

do not try to serialize vars passed by onSubmitEditing, such like:

onSubmitEditing={(all)=>{
            console.log(all)
          }}