How to Improve the Performance of your React Native App

November 22, 2021 Publish By : EXPERT APP DEVS 6 min read Viewed By : 187
improve performance of react native app

Introduction -

In this tutorial, I am going to explain a very important part of any app which is the performance of the app. React native offers a very promising way of handling performance-related things.

And it offers easy-to-understand code, more concise and sharing data. So the app optimization is very important so let’s start with the details.

How to improve startup time -

There are some points that improve the startup time of any app.

1. Hermes -

  • Hermes is a javascript engine optimization and open source for react native. 
  • if you enable this, it enhances the startup time 
  • it decreases memory usage and 
  • also reduces the size of the app. 
  • If you want to use the Hermes then you need the latest version of react native.

Syntax - Hermes in android

project.ext.react = [
       entryFile   : "index.js",
   -   enableHermes: false  // clean and rebuild if changing
            +   enableHermes: true  // clean and rebuild if changing]
             - keep class com.facebook.hermes.unicode.** { *; }
             - keep class com.facebook.jni.** { *; }
            Next, clean the build:
          cd android && ./gradlew clean
          npm react-native run-android

Hermas in iOS -

use_react_native!(
   :path => config[:reactNativePath],
   # to enable hermes on iOS, change `false` to `true` and then install pods
-   :hermes_enabled => false
+   :hermes_enabled => true
)

2. useMemo -

  • We can use the useMemo for the purpose of avoiding the re-rendering in react native.
  • It returns a memorized value for function and also avoids the re-rendering of children.
  •  If your app receives the same props more than one time then it uses the previous cached props so it improves the performance of your app.
  • It also memorized the computation to improve the re-calculation fast.

import * as React from 'react';
import {View, FlatList} from 'react-native';
import {useState} from 'react';
import UseMemoListItemSeprator from './UseMemoListItemSeprator';

const data = [
   { name: 'Sri Lanka' },
   { name: 'India' },
   { name: 'Australia' },
];
const [arrCountry, setArrCountry] = useState(data);
const [count, setCount] = useState(0);

function UseMemoFlatListItem({item, onChange, arrCountry}) {
   return useMemo(() => {

       return (
           <View style={Styles.container}><Text>{item.name}</Text></View>
       );
   }, [item.status]);
}
return (
   <View style={Styles.container}><Button title='Increment' onPress={() => setCount(count + 1)} /><FlatList
           data={arrCountry}
           keyExtractor={(item) => String(item.name)}
           renderItem={({item, index}) => (
               <UseMemoFlatListItem
                   item={item}
               />
           )}
           ItemSeparatorComponent={() =><UseMemoListItemSeprator />}
           showsVerticalScrollIndicator={false}
       /></View>
);

3. Flipper -

  • Flipper is used for debugging, it is basically a debugger for android and ios platform.  
  • It also has a network inspector and layout which shows the error in a very clear UI log.
  • Flipper directly works with native code.
  • After installing flippers we are able to track the functions, method, and many more other logics too.
  • You can also install the desktop version.

4. Cache Images - 

  • Image is a core component in react native which we use for the showing of images to users.
  • It has some issues with rendering the display images multiple times.
  • It re-rendering multiple times on single screens.
  • So it reduces the performance of the app because of image loading.
  • For resolving the image loading and flickering issue we can use the cache, which is provided by react native by default.
  • But there is one more thing, this one is only used in iOS still it is not available for android.
  • You can also use the third-party plugin which is - react-native-image,  it fully fills all your requirements.

<Image
 source={{
   uri: 'https://unsplash.it/200/200?image=8',
   cache: 'only-if-cached'
 }}
 style={{ width: 400, height: 400 }}
/>

Fast image implementation syntax - 

import FastImage from 'react-native-fast-image'

const App = () => (
 <FastImage
       style={{ width: 400, height: 400 }}
       source={{
           uri: 'https://unsplash.it/200/200?image=8',
           headers: { Authorization: 'auth-token' },
           priority: FastImage.priority.normal,
       }}
       resizeMode={FastImage.resizeMode.contain}
   />
)

  • Also we can use the another library for caching the images which is - react-native-cached-image 

Syntax -

import { CachedImage } from 'react-native-cached-image';
<CachedImage
 style={{ width: 400, height: 400  }}
 source={{ uri: 'https://unsplash.it/200/200?image=8' }}
/>

For improving the performance you must need to handle the image caching properly.

5. NativeDriver & Animate API -

We all know about animations which you can use in react native, but using animations is not a very good practice in react native. You can use the nativeDrive and animation by pushing the details in the bridge. You can set the nativeDriver as true.

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

const App = () =>{

   Animated.timing(this.state.value, {
       toValue: 1,
       duration: 500,
       useNativeDriver: true,
   }).start();
   
}

6. App Size Optimization -

Developers do not much care about app size at the start of any project. However, reducing the size of apps is a very important part of app performance.

You can use the proguard for reducing the size of the app. There are four files for handling the binary size of app bundle in different CPU architecture, you can optimize the binary size of android by setting the enableProguardInReleaseBuilds true.

def enableProguardInReleaseBuilds = true
def enableSeparateBuildPerCPUArchitecture = true

7. React Native Code Optimization -

If you are a developer then you must know about the importance of code optimization. There are lots of ways to make your code better in react native.

  • Avoid unnecessary functions
  • Handle re-rendering 
  • Use pure component

import React, {PureComponent} from 'react';
import { Text } from 'native-base';
 
class PureComponentExample extends PureComponent {
 render() {
   return <Text> This is a pure component</Text>;
 }
}
export default PureComponentExample;

8. Memory Optimization -

  • You can monitor the memory leak
  • Avoid the background process
  • In place of scrollview use the flatlist, sectionlist, and virtual list.
  • Avoid using console log as the production mode.

I hope you like the blog, if you have any query please feel free to ask.

Happy coding.
 

Need a consultation?

Drop us a line! We are here to answer your questions 24/7.