react native guide

The Ultimate Guide

to React Native

Optimization

2023 Edition

The Ultimate Guide to React Native Optimization

Table of Contents

How This Guide Is Organized 3

Introduction to React Native Optimization 6

Part one

Replace Lottie with Rive 66

Optimize your app’s JavaScript bundle 75

Part two

Always run the latest React Native version to access the new features 82

How to debug faster and better with Flipper 93

Avoid unused native dependencies 99

Optimize your application startup time with Hermes 105

Optimize your Android application’s size with these Gradle settings 113

Experiment with the New Architecture of React Native 120

Part Three

Know how to prole Android 196

Thank you 207

Authors 208

The Ultimate Guide to React Native Optimization

How This Guide Is Organized

Optimizing the React Native app is a complex process

where you need to take various aspects into account

– from implementation through using the latest React

Native features to testing and continuous deployment.

This guide is a comprehensive source of tactics, tricks, tips, tools, and

best practices to help you deliver an optimized React Native app.

• Resource usage

• User experience

• Maintenance costs

• Time-to-market

All these aforementioned aspects have a particular impact on the rev-

enue-generating effectiveness of your apps. Such elements as stabil-

ity, performance, and resource usage are directly related to improving

the ROI of your products because of their positive impact on the user

experience.

The Ultimate Guide to React Native Optimization

This guide is divided into three parts:

The rst part is about improving performance through understanding

them. This part covers the following topics:

1. Pay attention to UI re-renders

2. Use dedicated components for certain layouts

3. Think twice before you pick an external library

4.

5. Find the balance between native and JavaScript

6. Animate at 60FPS - no matter what

features

2. How to debug faster and better with Flipper

3. Avoid unused native dependencies

4. Optimize your Android application startup time with Hermes

5. Optimize your Android application’s size with Gradle settings

6. Experiment with the New Architecture of React Native

The Ultimate Guide to React Native Optimization

2. Have a working Continuous Integration (CI) in place

3. Don’t be afraid to ship fast with Continuous Deployment

4. Ship OTA (Over-the-Air) in an emergency

5. Make your app consistently fast

6. Know how to prole iOS

7. Know how to prole Android

The structure of each section looks like this:

Issue

This part describes the main problem with React Native performance.

Solution