Performance Optimization

Performance is a priority concern in all mobile apps. When it comes to React Native, it's no different. React Native offers an excellent developer experience and blissful UI, but only until your app starts growing. The more complex your application gets, the more issues you start facing due to the inherent nature of React Native's architecture. In this tutorial chapter, we will delve into the best practices for React Native performance optimization.

The root cause of performance issues in React Native can be narrowed down to slow JavaScript code, overdraws, and large view hierarchies. But worry not, we have solutions for each of these problems. Let's start with slow JavaScript code.

1. Optimize JavaScript Code

The fundamental architecture of React Native allows developers to write JavaScript code which then communicates with the native thread (either Android or iOS) using a JavaScript bridge. The performance issue usually arises when there's a high volume of data crossing over the bridge. Optimization of the data and operations that pass through this bridge can provide noticeable performance improvements.

The usual culprits are console statements. A simple rule: Avoid console logs in production builds.

// Bad
console.log('Scarlett movie starred by ', actor);

// Good
if (__DEV__) {
  console.log('Scarlett movie starred by ', actor);
}

Another culprit is unnecessary renders caused by poor management of mutable data. To prevent unwanted re-renders, make use of the shouldComponentUpdate function.

shouldComponentUpdate(nextProps, nextState) {
  return this.state.movie !== nextState.movie;
}

2. Reduce Overdraws

Overdraw happens when the same pixel is drawn over multiple times in a single frame. Overdraw is costly and may affect your app's performance. FlatLists or ScrollViews in React Native are notorious for causing overdraws. An excellent way to mitigate this problem is to use the shouldComponentUpdate React lifecycle method to avoid unnecessary re-renders.

Another way to reduce overdraw is to make use of the removeClippedSubviews prop for FlatList or ScrollView. This prop, when set to true, removes views that are not within the parent's bounds.

<FlatList
  removeClippedSubviews={true}
  data={[...]}
  renderItem={({item}) => <MovieList movie={item} />}
/>

3. Use PureComponent or memo function

Components which only re-render when their inputs (props or state) change can be optimized by using PureComponent or React.memo. Both methods perform a shallow equality check on the new props and state and re-render the component only if something has actually changed.

import React, { PureComponent } from 'react';

class MovieList extends PureComponent {
  // ... rest of the component
}

or using functional components using React.memo:

const MovieList = React.memo(function MovieList(props) {
  // ... rest of the component
});

4. Use InteractionManager

When dealing with complex animations or large data, the frame rate might drop, leading to 'jank'. InteractionManager allows you to schedule heavy computations or animations to start after any interactions or animations have been completed.

InteractionManager.runAfterInteractions(() => {
  // ... heavy computations or data loading
});

5. Use react-native-fast-image for Image Loading

The standard React Native Image component is not very efficient when it comes to loading and maintaining images in memory. The react-native-fast-image library solves this problem by using the native image handling capabilities of Android and iOS.

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

<FastImage
  style={{ width: 50, height: 50 }}
  source={{
    uri: 'https://image.tmdb.org/t/p/w500/kqjL17yufvn9OVLyXYpvtyrFfak.jpg',
    priority: FastImage.priority.normal,
  }}
  resizeMode={FastImage.resizeMode.contain}
/>

6. Use Hermes

Hermes is a JavaScript engine optimized for running on mobile, especially on Android. It's lightweight and starts quickly, which improves the performance of React Native apps on Android.

To use Hermes, edit your android/app/build.gradle file to enable Hermes:

project.ext.react = [
    entryFile: "index.js",
    enableHermes: true,  // clean and rebuild if changing
]

In conclusion, improving the performance of a React Native app involves several strategies, from optimizing JavaScript code, minimizing overdraws, using PureComponent or memo, scheduling heavy operations with InteractionManager, efficiently load images with react-native-fast-image, and consider using Hermes for Android. Implementing these can help you dramatically improve your app's performance. Remember, every millisecond counts when it comes to providing a fluid and responsive UI, so keep optimizing!