How to optimize React Native app performance in 2021?

Any app or product must have good performance to stand out in the market competition. When you work with React Native, you may face problems with the performance of your app. So you need to pay attention to performance improvements and best practices for react the native app during its development, fix some issues and deliver a great experience to end users. Hence here we’ll discuss some of the tips and best practices to optimize react native app performance.

Tips and best practices to optimize react native app performance-

1. Resize and scale images-

Optimizing images is important to improve react native app’s performance if the app is built to show a large amount of graphical content or images.  If images are not properly optimized in terms of resolution and size, rendering of multiple images needs high memory usage on the device. It may cause an app to crash because of memory overload. Here are some of the improvements to optimize images in react native app- 

• Use of smaller resolution images
• Use PNG format rather than JPG format
• Using WEBP format for images – it reduces the binary size of images on iOS and android

2. Do Cache all Images Locally-

Catching is a way to solve image problems that optimize the overall performance of react native app. But while caching images at the time of loading in your app, you have to save images locally. By caching images locally in the subsequent requests, you won’t just improve the app’s performance but also save the time of loading images. Now, it is time to recall the debate on cross-platform vs native app development for android and ios as here caching with the image component is for ios only not for android.

Let’s see a way to do local image caching:

  source={{

    uri: ‘https://unsplash.it/200/200?image=8’

    cache: ‘only-if-cached’

  }}

  style={{ … }}

/>

Though react native is particular about image components, it lacks some important solutions to reduce the impact of the following issues- 

• Reduced image loading speed
• Attaching multiple images on a single screen
• Low app performance
• Poor cache performance
• Image flickering and cache misses

You should consider quick loading image format with react native libraries with great cross platform app development frameworks.

3. Avoid Use of ScrollView to Render Huge Lists-

There are several ways to show items with scrollable lists in react Native. Two common ways to implement lists in react native are- using ScrollView and FaltList components. ScrollView is easy to implement. Mostly it is used to iterate over a list of a finite number of items. But it renders all children at once. When there is less number of items on the list, then this approach is good. The use of ScrollView with a huge amount of data can directly affect the overall performance of react native app.

  {items.map(item => {

    return ;

  })}

React native provides FlatList to deal with a large amount of data in list format. Items in FlatList are lazily loaded, so the app doesn’t use excessive or inconsistent memory amounts. FlatList can be used as-

  data={elements}

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

  renderItem={({ item }) => }

/>

4. Avoid Passing Inline Functions as Props–

Whenever you pass a function as a property to a component, avoid passing function inline as-

function MakeBeverage(props) {

  return(

    

  )

}

export default function BeverageMaker() {

  return (

    

      

        onPress={()=> console.log(‘making some beverage’)}

      />

    

  );

}

This method recreates functions whenever a new reference gets rendered by a parent so it is better to avoid the above method. Child components get re-rendered automatically even if master props remain the same. To deal with the performance issues of an app, programmers should define a function in class format or within a function to eliminate the chances of re-renders.

Let’s see the right command to pass functions while making changes in your cross-platform app.

export default function BeverageMaker() {

  function handleMakeBeverage(){

    console.log(‘Making beverage, please wait!’)

  }

  return (

    

      

        onPress={handleMakeBeverage}

      />

    

  );

}

5. Avoid Rendering Overhead and Unnecessary Renders-

React native manages the rendering of components in a like way to React.js. So the optimization techniques are valid for react and also apply tot react native apps. One best optimization techniques is to avoid unnecessary renders on the main thread. In functional components, this can be done by using React.memo(). Mainly it is used to handle memoization, which means if any component receives the same set of properties more than once, it will use previously cached properties and render the JSX view by functional component just once, it saves rendering overhead. 

6. Remove Nonessential Libraries & Add-ons-

The whole functionality of react native app reflects the key features of the library used for its development. So, one must be selective about the number of libraries and features you want to integrate with the application. Remove irrelevant and unnecessary libraries and dependencies as a priority. Reduce unnecessary navigation, sections, animations, or other functions that will increase screen loading time to worsen app performance.

7. Avoid Updating state or dispatch Actions in the component will update-

Use component will update lifecycle method to prepare for an update, not to trigger another. If goal is to set a state, accomplish this by using componentWillReceiveProps instead. Use componentDidUpdate instead of componentWillReceiveProps to dispatch any Redux actions.

8. Use Hermes-

Hermes is an open-source Javascript engine optimized particularly for mobile apps. It is available for the Android platform for React Native version 0.60.4 and for the iOS versions from 0.64-rc.0 and above. Hermes helps to reduce the download size of the APK, the memory footprint, and consumption, and the time required for the app to become interactive. Open build.gradle and add the following line to enable Hermes for Android.

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

Open Podfile to enable Hermes for iOS and add the following line:

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

9. Avoid Arrow Functions-

Do not use arrow functions as callbacks in your functions to render views. With the use of the arrow function, every render generates a new instance of a particular function, hence when reconciliation happens, React native compares a difference and as the function reference doesn’t match, it is not able to reuse old references.

class ArrowClass extends React.Component {

  // …

  addTodo() {

    // …

  }

  render() {

    return (

      

         this.addTodo()} />

      

    );

  }

}

class CorrectClass extends React.Component {

  // …

  addTodo = () => {

    // …

  }

  render() {

    return (

      

        

      

    );

  }

}

10. Run Nativedriver for Animation-

Lots of developers prefer to run animations in Javascript thread that further drops down their loading speed on the application. JS thread gets blocked when used for animation rendering and henceforth, doing such isn’t advisable as a part of react native application development. So you need to use native codes to run animations on the UI thread so that you don’t need to worry about animations even if Javascript threads are backed. 

Let’s see native driver configurations 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 (

    

        

          Text to show

        

        

    

  )

}

11. Use InteractionManager–

InteractionManager enables you to schedule the execution of tasks on the Javascript thread after any interactions or animations have been completed. Especially, InteractionManager lets Javascript animations to run seamlessly. Tasks can be scheduled to run after interactions using the below code-

InteractionManager.runAfterInteractions(() => {

  // …long-running synchronous task…

});

Conclusion-

React native is an open-source framework used to create cross-platform mobile apps. It delivers a seamless experience as long as you build apps. If you’re going to use react native for your next app development, the above tips will help you to optimize react native app performance. You can consult with solace experts for an effective and performance rich react native app development. Hire react native developers of the solace team who are well proficient to build modern apps. Connect with Solace and get a free quote for react native development. We will be happy to help you. 

The post Best Guide To Optimize React Native Performance In 2021 first appeared on Blog.