Good performace is very critical to mobile apps and websites. With emerging technologies, it is of paramount importance to ship highly performant applications. Users don’t care what technologies are used to build the products they use, they just want things to work smoothly.
Often while building apps with React Native, you will run into performance issues here and there. The key thing to note here is that React Native is not the solution of every problem. While it works out of the box for a range of use-cases, you should know that if your mobile app requires too much hardware interaction, you’d be better off writing native solutions (i.e. Java, Objective C or Swift) for the intensive parts of your application. For most cases, you will readily find open-source solutions.
A good starting guide to understand and improving performance in your app is the official react native docs, which goes in details about profiling, measuring and improving performance in React Native apps.
For starters, let’s go over the architecture briefly:
We have three things:
- Native - where native modules and APIs reside
In this guide, we will discuss some tips that you can follow to improve the performance of your app:
1. The ultimate goal
For everything to work smoothly, you need to make sure that your application display is being rendered at 60 frames per second, i.e. you have 16.67ms to do all of the work needed to generate the static image (frame) that the user will see on the screen at any particular interval.
2. Profile everything
3. Spy MessageQueue
Get logs from the JS bridge by enabling SPY mode from MessageQueue module:
MessageQueue.spy(true). Refer this article for details.
4. Find the culprit and move it to native
Use remote debugger and chrome profiler to find the tasks that are taking too long and hindering performance in your app, and see if they can be fixed. If not, offload them to native and compute via Native modules.
5. Production builds
Always test on real devices befor you publish to production. Sometimes, toggling the
development mode also helps.