PERFORMANCE-DRIVEN DEVELOPMENT

Discover the Ultimate Guide to React Native Optimization

All you need to know about React Native optimization in one place

DownloadDownloadDownload
Download

What is waiting for you inside?

20 chapters filled with the most relevant tips, tricks, tactics, and unique expertise that will help you tackle performance issues of your React Native app.

What will you learn from the Guide?

You will learn the best practices for optimizing Stability, Performance, Resource usage, User experience, Maintenance costs, Time to market, and much more!

What topics are covered in the Guide?

We cover three main groups of topics: 

  1. Improve performance by understanding React Native implementation details
  2. Improve performance by using the latest React Native features
  3. How to ship quicker with a stable environment
Performance Audit Callstack
Discover the Ultimate Guide to React Native Optimization
PERFORMANCE-DRIVEN DEVELOPMENT
Early access is over!
Please come back next week to download your copy of the Ultimate Guide to React Native Optimization!
Download your copy of the
Ultimate Guide to React Native Optimization
What exactly do we audit?
FPS
Frames Per Second
How many times your app UI can be redrawn in a second
TTI
Time To Interactive
Time for app boot to when the UI is ready fo interactions
App Size
AAB & IPA Bundles
How much space the app occupies on a device
PERFORMANCE-DRIVEN DEVELOPMENT
about

The Guide is a must-read for developers looking to work on app performance

  • a number of dependencies in your project
  • amount of JavaScript used in your projects
  • rendering 
  • animations
  • RAM usage
  • navigation performance
  • cold start of the app
  • time for the user to see key interaction
  • CPU usage

The Ultimate Guide to React Native Optimization contains of:

#20
chapters
#214
pages
#20
graphs
#50
code examples
1.29G
Monthly Active Users globally – WeChat
29M
Monthly Active Users in Indonesia – Gojek
350M
Monthly Active Users in India – PayTM
114M
Monthly Active Users in globally – MoMo
49%
will switch to alternative digital service
38%
will tell others about their negative experience
43%
will contact the digital service for help
32%
will abandon or delete the digital experience
#1
Organizational agility
#2
Time to market
#3
Apps maintenance
#4
UX experience

testimonials

What do the experts say about the Guide to React Native Optimization?

Animate at 60 FPS no matter what

"By adding delightful animations to your app, users tend to be muchmore forgiving. If done carefully, animations in React Native canperform great and improve the perceived performance of the app to theuser."

William Candillon
Chief Technology Officer at 28msec

Avoid unused native dependencies

"There are so many tricky parts to making a great native app, and to lower the barrier to entry, React Native can abstract away things that you might want to come back and check on later once you’ve got your app up and running – this ebook does a solid job of helping you understand how to really get from good to great."

Orta Therox
CocoaPods creator, TypeScript core contributor

Make your app consistently fast

"Performance regression monitoring is a critical process in the development and maintenance of mobile apps. Without it, small issues can go unnoticed and lead to significant performance degradation, negatively impacting the user experience and potentially decreasing user retention. Regular performance regression monitoring allows developers to proactively identify and fix issues before they become a problem for users, ensuring the app runs at optimal performance and providing a better experience for all users."

Michał Chudziak
Independent Consultant @michalchudziak.dev

Christoph Nakazawa

"By testing key features of an app via integration testing, developers can effectively identify and eliminate potential bugs, ultimately leading to a more confident and efficient development process."

Christoph Nakazawa
Senior Engineering Manager & Creator of Jest

Animate at 60 FPS no matter what

"By adding delightful animations to your app, users tend to be much more forgiving. If done carefully, animations in React Native can perform great and improve the perceived performance of the app to the user."

William Candillon
Chief Technology Officer at 28msec

Avoid unused native dependencies

"There are so many tricky parts to making a great native app, and to lower the barrier to entry, React Native can abstract away things that you might want to come back and check on later once you’ve got your app up and running – this ebook does a solid job of helping you understand how to really get from good to great."

Orta Therox
CocoaPods creator, TypeScript core contributor

Make your app consistently fast

"Performance regression monitoring is a critical process in the development and maintenance of mobile apps. Without it, small issues can go unnoticed and lead to significant performance degradation, negatively impacting the user experience and potentially decreasing user retention. Regular performance regression monitoring allows developers to proactively identify and fix issues before they become a problem for users, ensuring the app runs at optimal performance and providing a better experience for all users."

Michał Chudziak
Independent Consultant @michalchudziak.dev

Run tests for key pieces of your app

"By testing key features of an app via integration testing, developers can effectively identify and eliminate potential bugs, ultimately leading to a more confident and efficient development process."

Christoph Nakazawa
Senior Engineering Manager & Creator of Jest

Super App Case Study

We worked with MoMo

MoMo is a Vietnamese e-wallet super app with more than 114M users. To learn more about the benefits of using React Native to develop super apps, check out the MoMo case study. Where we helped improve app's performance by migrating architecture to Re.Pack.

summary

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. We not only focus on the technological aspects of React Native optimization. We also underline the impact of each technological aspect on business continuity. This guide contains best practices for optimizing:

  • Stability
  • Performance
  • Resource page
  • User experience
  • Maintenance costs
  • Time-to-market

All these aforementioned aspects have a particular impact on the revenue-generating effectiveness of your apps. Such elements as stability, performance, and resource usage are directly related to improving the ROI of your products because of their positive impact on the user experience. With a faster time-to-market, you can stay ahead of your competitors, whereas an easier and quicker maintenance process will help you reduce your spending on that particular process.

This guide is divided into three parts:

The first part is about improving performance through understanding the React Native implementation details and knowing how to maximize them. This part covers the following topics:

  • Pay attention to UI re-renders
  • Use dedicated components for certain layouts
  • Think twice before you pick an external library
  • Always remember to use libraries dedicated to the mobile platform
  • Find the balance between native and JavaScript
  • Animate at 60FPS - no matter what
  • Replace Lottie with Rive
  • Optimize your app’s JavaScript bundle

The second part is about improving performance by using the latest React Native features or turning some of them on. This part describes the following topics:

  • Always run the latest React Native version to access the latest features
  • How to debug faster and better with Flipper
  • Avoid unused native dependencies
  • Optimize your Android application startup time with Hermes
  • Optimize your Android application’s size with Gradle setting
  • Experiment with the New Architecture of React Native

The third part is about enhancing the stability of the application by investing in testing and continuous deployment. This part tackles the following topics:

  • Run tests for key pieces of your app
  • Have a working Continuous Integration (CI) in place
  • Don’t be afraid to ship fast with Continuous Deployment
  • Ship OTA (Over-the-Air) in an emergency
  • Know how to profile iOS
  • Know how to profile Android

The structure of each section looks like this:

Issue: The first part describes the main problem with React Native performance. 
Solution: The second part outlines how that problem may affect your business and what the best practices are to solve it.
Benefits: The third part focuses on the business benefits of our proposed solution.

process

How performance audits work in practice?

1. Define

We meet with you to learn & define your key performance-related challenges.

2. Measure

We jump into your codebase and product to measure your current performance.

3. Analyse

We analyze your tech stack, architecture, and currently used solution to find and outline room for improvement and propose solutions along with their possible impact.

Process

Deliverables

Our app has hundreds of features and before we switched to Re.Pack we were struggling to scale the performance. Re.Pack is built on webpack, so it allowed us to leverage existing tooling and approaches to scale more linearly. If the default tooling isn't working for your use case, I’d recommend giving Re.Pack a try!

Mike Duminy
Principal Engineer at Klarna
Klarna

trusted by

Stripe logo
Dream11 logo
Dream11 logo
Dream11 logo
Dream11 logo
Coinmine logoExpo logoMLS logoAdvantys logoOneHousing logo

deliverables

What are audit deliverables?

1. Audit report

Consisting of:

  • measurements of initial product performance
  • analysis of your performance bottleneck 
  • recommendations on possible solutions
  • possible impact of each of suggested solution
  • most impactful areas to take care of

2. Presentation

Presentation of the report to your team.

3. Q&A

Q&A session around diagnosed causes and possible improvements.

What tools do we use?

React Dev tools & profilers, Native profilers, JavaScript Profilers, Native debuggers, Dep Check

contact

Let's work together!

Need help with React or React Native? Let us know!

I hereby agree for sending me by Callstack.io Sp. z o.o. with seat in Wrocław, by means of electronic communication to the e-mail address indicated by me, commercial information, within the meaning of the Act of 18 July 2002 on the provision of electronic services. For details see our Privacy Policy.