Description
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]