Technetium 101(React Native): Performance Optimization

This article will offer a list of suggestions for optimizing performance while building a React Native app

1. Avoid use inline functions directly as props to a component & also avoid inline styling


class Foo extends Component {
  render() {
    return (
      <button onClick={() => console.log('boop')}>  {/* 🙅‍♀️ */}
        BOOP
      </button>
    );
  }
}

class Foo extends Component {
handleClick = () => {  // this anonymous function is fine used like this
    console.log('boop');
  }
  render() {
    return (
      <button onClick={this.handleClick}>  {/* 🙆‍♂️ */}
        BOOP
      </button>
    );
  }
}

onPress contains an arrow function , a new reference to that inline function is declared in every render. It is not recommended that way. Causing an unnecessary re-render computation.
use StyleSheet for styles
ref

https://medium.com/corebuild-software/easily-optimise-your-react-native-components-rendering-8deb22176c8a

2. remove console.log() / redux-logger

Make sure to remove them before bundling
Can also use this babel plugin that removes all the console.* calls. You need to install it first with npm i babel-plugin-transform-remove-console --save-dev, and then edit the .babelrc.

This will automatically remove all console.* calls in the release (production) versions of your project

{
  "env": {
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}

3. Moving static images to the native side

Reduce the JavaScript bundle size (for non changing/updating image eg, icon)

4. Reduce file size of images by using/convert new image format WebP

WebP is a modern image format that provides superior lossless and lossy compression for images on the web
WebP lossless images are 26% smaller in size compared to PNGs.
WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index
WebP images speed up image loading time by 28%
Reduced codePush bundle size by 66%
Helps reduce iOS and Android binary size by 25%
Faster React-native JS thread
Smooth navigator transitions

5. Cache images locally (ios only)

<image 
 source={{
 uri: 'https://facebook.github.io/react/logo-og.png' ,
 cache: 'only-i- cached',
 }}
/>

Reduce the time taken to load images

6. Image size and suffixes (@2X, @3X)

Use the suffixes @2x and @3x, which will be displayed depending on the screen resolution of your device
If the image sizes do not match the screen of your device, the best option will be selected

7. Enable Hermes (android & ios early stage rn0.64)

It is designed to improve app performance, focusing on our React Native apps, even on mass-market devices with limited memory, slow storage, and reduced computing power

decreases memory usage,
reduces app size
improves start-up time
Change to true at android/app/build.gradle
gradlew clean and rebuild

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

Since React Native version 0.64-rc.0, Hermes is also available to be used on the iOS platform. To enable it for iOS, open Podfile and modify the following code:

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

Standards-compliant

Hermes currently targets the ES6 specification, and we intend to keep current with the JavaScript specification as it evolves. To keep the engine’s size small, we have chosen not to support a few language features that do not appear to be commonly used in React Native apps, such as proxies and local eval(). A complete list can be found at our GitHub.

8. AAB (Android App Bundle) instead of APK (Android App Package) for publishing to playstore (android only)

From August 2021, new apps will be required to publish with the Android App Bundle on Google Play.

gradlew bundleRelease instead of gradlew assembleRelease
Bigger the file makes tough on lower-end devices to deal will storage and performance issues
AAB greatly reduces app/file size by approximately 35%
APK contain 4 cpu architecture — this means that the APK you submit to the store contains four builds of Javascript runtime out of which only one can actually be used

armv7
arm64
x86
x86_64

Requirement

Enable App Signing by Google Play

With App Signing by Google Play you will no longer need to manage the key you use for signing releases.
This is good because if you don’t keep the key, you don’t risk having it lost or compromised, which under such circumstances would essentially prevent you from publishing updates of your app
Step-by-step instructions for migrating an existing app to App Signing by Google Play

https://support.google.com/googleplay/android-developer/answer/9842756?visit_id=637515299576048022-2727927084&rd=1

. Prefer pure components wherever possible?

Pure components adds basic optimisation to component re-rendering condition. So, your component will not be updated if references to props & states remain the same. This might work out perfectly in many use cases — especially if you are using immutable state management in your app.
But there also might be places where you might not want this optimisation.