How to optimize React Native App

A great user experience should be the core objective of any app development. Although React Native tries to provide everything you need to develop a performant application, there are occasions where you have to manually optimize your app. To do this, developers need to have a performance optimization mindset from the start of their projects.

Ways to Optimize the React Native App

1. Use FlatList
2. Remove all console statements
3. Memoize expensive computations
4. Use Relevant sized images
5. Remove unnecessary libraries and features
6. Use Hermes

1. Use FlatList to render large lists in React Native

If you have a large list, rendering all the items at once can cause a performance issue, but lazy loading with FlatList will improve performance

import React from 'react'
import {FlatList} from 'react-native'

const data = [
  {
    id: 1,
    text: 'First'
  },
  {
    id: 2,
    text: 'Second'
  },
  ...
]

const App = () =>{
    const renderItem = ({item}) =>(
        <View>
          <Text>{item.text}</Text>
        </View>
    )
    return (
        <FlatList
          data={data}
          renderItem={renderItem}
          keyExtractor={item => item.id}
        />
    )
}

2. Remove all console statements

While you could install some plugins such as babel-plugin-transform-remove-console to remove these statements from production

3. Memoize expensive computations

React introduced the memo HOC (Higher Order Component) for preventing unnecessary re-rendering and the useMemo hook for optimizing expensive computations.

4. Adjust (resize and scale down) image sizes

Images can contribute significantly to performance issues in React Native applications. So use relevant sized Images to increase the loading performance of your App

5. Remove unnecessary libraries and features

Each library in a React or React Native application leaves some footprint on the application. This is why you should only add libraries and features you need in your app and remove irrelevant dependencies and libraries. Animations, navigations, tabs, and other features can contribute to the screen load time and so the more they are on the screen, the worse the performance.

6. Use Hermes

Hermes is a JavaScript Engine developed by Facebook in 2019. It is one of the must-have features for improving app performance, reducing memory usage, decreasing app size, and improving the app start-up time.
Hermes is not currently enabled by default in React Native but you can easily enable it in your app.
To enable Hermes on Android, edit your android/app/build.gradle file and add the following rules.

project.ext.react = [
      entryFile: "index.js",
      enableHermes: true
  ]