Proven Tips to Optimize the Performance of React Native App

For modern mobile app developers, React Native is the most promising and viable framework took for developing cross-platform applications. Ever since the framework launched it never faded from the limelight and surpasses all other frameworks of mobile app development.

However since React Native is a new app development framework, developers facing difficulties in improving its performance under certain scenarios. When an application requires more tabs, parallel processing, more controls, animations, navigations, and the inclusion of 3rd party libraries the framework becomes slow. However, the framework is on the verge of evolving according to the rising demands of developers, thanks to the continuous efforts of the React Native community people.

React Native

This blog illustrates the common performance issues developers are facing with React Native and briefs on how to optimize those issues.

What Is React Native? Why It Is So Popular? 

Before diving deep into the core topic, let’s brush up with some basics.

React Native is a JavaScript (JS) framework based on the Facebook JS library which is used to build strong UI. However, here it is focused on building UI on mobile platforms rather than targeting browsers. In simple words, the cross-platform app development framework React Native enables web developers to build a native mobile application. It doesn’t matter whether developers are developing apps for android or iOS platforms, by using React Native framework they can easily share codes between platforms.

Apart from the mobile platforms Android and iOS, React Native has the potential to develop apps for future platforms. The efficient code sharing feature of React Native enables app developers to develop mobile apps much quicker. Being an open-source framework and having large community support, React Native is so popular among developers worldwide.

Benefits of Using React Native on App Development

Here are the lists of major advantages an app developer can enjoy by using React Native app development framework.

• Code Reusability: Mobile app developers using the framework React Native can re-use the used codes again and again on multiple platforms. This eliminates the work of recreating the same codes on multiple platforms. This enables a developer to build efficient mobile apps quickly by saving a lot of time by using the same codes. React native framework even allows developers to utilize the web application code written using React on mobile app development. 
• Allows Real-time Code Change: The hot and live reloading function provide by React Native framework allows developers to change codes in real-time. This makes the development and testing process easier. The live reloading function allows the app to reload the entire app right after the code changes. However, the hot reloading function allows reloading of a specific area where changes are made. 
• Supports Third-Party Plugin: React Native framework is still evolving, developers may require some more functions & features to meet specific business needs. To tackle these issues the framework offers 2 types of modules JS-based & Native-based to support 3rd party plugins. 

Tips to Improve React Native App Performance 

Here are the lists of performance improvements and practices to follow for improving the performances of a mobile application developed using React Native.

1. Replace ScrollView With FlatList to Display Long Items

To display long lists of items, a developer can utilize the 'Flatlist' rather than using 'Scrollview'. Though Scrollview is a sophisticated way to display long-listed items, it slows down the overall performance of the app.

However, in the case of 'Flatlist', it portrays only the essential set of items and eliminates the others. Because of that, it utilizes low memory and increases app performance.

FlatList Code Format:

<FlatList

  data={elements}

  keyExtractor={item => `${items.name}`}

  renderItem={({ item }) => <Item key={item.name.toString()} />}

/>

2. Remove Console Statements, if App Doesn’t Need Additional Dependencies

The mobile app developers use console statements to debug the JS codes, once the debugging process is completed it should be removed before bundling. Else, it will create a big mess in the JavaScript thread and cause unnecessary re-renders.

Developers can use this code to track and remove the console statements from the source code once debugging process is completed.

npm install babel-plugin-transform-remove-console

OR

yarn add babel-plugin-transform-remove-console

3. Optimizing Images

Image optimization plays a huge role in improving the app’s performance. Using a large size and huge amount of graphical images will eat more memory and may lead to an app crash.  

Here are the steps developers can take to optimize the app’s image size

• Changing image format to JPG
• Using images with smaller resolution
• Using WEBP format images to reduce image size

In addition, developers can use image caching techniques to cache the images locally to improve the app’s performance.

4. Use Nativedriver for Animations

Instead of using JS thread to run animations, developers can prefer animation APIs to star animations on apps. Utilizing ‘Animated library’ which uses ‘NativeDriver’ helps animation files to start independently without bothering the JS thread.

By doing so, the app developed using React Native can run animation files smoother and richer experience.

Nativedriver Configuration Code for Animation APIs:

import React, {useRef} from ‘react’

import {Animated} from ‘react-native’

const App = () =>{

const opacity = useRef(new Animated.value(0)).current

const showVal = () =>{

Animated.timing(opacity, {

toValue: 1,

duration: 500,

useNativeDriver: true,

}).start();

  } 

  …

return (

<View>

<Animated.View>

<Animated.Text>Text to show</Animated.Text>

</Animated.View>

<Button title=”Show” onPress={showVal} />

</View>

  )

}

5. Optimize Your App Using Hermes

Developers optimize their mobile applications by using the open-source JavaScript engine ‘Hermes’. By using this JS engine, developers can easily reduce the App’s APK file size and the consumption of the memory by the application. In addition, Herms reduces the interactive time (TTI) of the mobile application developed using React Native.

Code Formats to Enable Hermes in Android Under build.gradle:

def enableHermes = project.ext.react.get("enableHermes", true);

Code Formats to Enable Hermes in iOS Under Podfile:

use_react_native!(:path => config[:reactNativePath], :hermes_enabled => true

Bottom Line 

Well, the above-listed tips on optimizing the React Native performance issues would solve around half of the problems faced by developers. Almost all performance issues of React Native can be resolved with a little bit of background work. This article provided some shed light on improving your knowledge of React Native framework and improving its performance.