How to make React Native mobile application faster?

Question

React Native mobile application is working very slow on every click. I am using react native v0.40.0 and following are the dependencies of my project.

{
    "analytics-react-native": "^1.1.0",
    "apisauce": "^0.7.0",
    "babel-preset-es2015": "^6.18.0",
    "es6-promise": "^4.0.5",
    "flow-bin": "^0.36.0",
    "geolib": "^2.0.22",
    "immutable": "^3.8.1",
    "intl": "^1.2.5",
    "isomorphic-fetch": "^2.2.1",
    "lodash": "^4.17.4",
    "lodash.range": "^3.2.0",
    "prop-types": "^15.5.10",
    "raven-js": "^3.13.1",
    "react": "^15.4.2",
    "react-native": "^0.40.0",
    "react-native-apple-healthkit-rn0.40": "^0.3.2",
    "react-native-blur": "^2.0.0",
    "react-native-button": "^1.7.1",
    "react-native-checkbox": "^2.0.0",
    "react-native-code-push": "^1.17.3-beta",
    "react-native-datepicker": "^1.4.4",
    "react-native-device-info": "^0.10.1",
    "react-native-easy-toast": "^1.0.6",
    "react-native-fbsdk": "^0.5.0",
    "react-native-geocoder": "^0.4.5",
    "react-native-gifted-chat": "^0.1.3",
    "react-native-global-props": "^1.1.1",
    "react-native-image-crop-picker": "^0.15.1",
    "react-native-image-picker": "^0.25.1",
    "react-native-image-slider": "^1.1.5",
    "react-native-keyboard-aware-scroll-view": "^0.2.7",
    "react-native-maps": "0.15.2",
    "react-native-modal-dropdown": "^0.4.4",
    "react-native-popup-menu": "^0.7.2",
    "react-native-push-notification": "^2.2.1",
    "react-native-radio-buttons": "^0.14.0",
    "react-native-router-flux": "3.38.0",
    "react-native-segmented-android": "^1.0.4",
    "react-native-snap-carousel": "2.1.4",
    "react-native-stars": "^1.1.0",
    "react-native-swipeout": "^2.2.2",
    "react-native-swiper": "^1.5.4",
    "react-native-tableview-simple": "0.16.5",
    "react-native-vector-icons": "^4.0.0",
    "react-native-video": "^1.0.0",
    "react-native-zendesk-chat": "^0.2.1",
    "react-redux": "^4.4.6",
    "recompose": "^0.20.2",
    "redux": "^3.5.2",
    "redux-thunk": "^2.0.1"
  }

I did profiling with stacktrace in android studios, and found that mqt_js is one of the reason which takes more time on every UI clicks. You can check stacktrace report here

Can anybody help me in solving this performance issue.?

Answer 1

Here are some advices for optimization react-native:

1. Parsing and serializing (such as response.json() or JSON.stringify) blocks js thread, so all JS animations and handlers (such as onScroll and onPress, and of course render method) suffer from this. Try to load from backend only data that you need to show.
2. Use native animations (useNativeDriver: true parameter) where it is possible, and try not to use onScroll. Also, consider using react-native-reanimated for animations.
3. Optimize you render method and try to make its calls as rare as possible. It is called when component's props or state changed.
4. Understand how PureComponent and React.memo work and try to use them where necessary. But keep in mind that they also can slow the app down if not used correctly.
5. Always use StyleSheet for styles, it cashes them and replaces with style id (integer), so styles are passed to native side only once and then style ids are used.

Bad:

// style object is created on every render
render() {
    return <View style={{flex:1}}/>
}

Good:

render() {
    return <View style={styles.flex}/>
}

// style is created once
const styles = StyleSheet.create({
    flex: { flex: 1 }
});

6. Same with functions.

Bad:

// onPress handler is created on every render
render() {
    return <TouchableOpacity onPress={() => this.props.navigator.navigate('SignIn')}/>
}

Good:

render() {
    return <TouchableOpacity onPress={this.onPressSignIn}/>
}

// onPressSignIn is created once
onPressSignIn = () => {
    this.props.navigator.navigate('SignIn');
}

7. Big O of all operations on client should be constant. Enumerate arrays as less as you can. Always use Object and Set instead of Array where it is possible. Use pagination when you need to load big amounts of data from server / database, leave sorting and other heavy calculations for server.

For example if you often need to get objects by id, it is better to use:

let items = {
    "123": { id: "123", ... },
    "224": { id: "224", ... }
};

let item = items["123"];

instead of usual array:

let items = [
    0: { id: "123", ... },
    1: { id: "224", ... }
];

let item = items.find(x => x.id === "123");

8. Check out this doc: https://reactnative.dev/docs/performance