A visual guide to React Native Performance: Issues and resolving Insights
For anyone who is coming from Cordava/Ionic development background, React Native would blow your mind with its easy code sharing, UI advantages, and faster time to market.
React Native not only decreases the burden of engineering(as Java/Objective is hard to master), but, also decrease the time from concept to deployment.
Despite all good deeds, still there are some performance limitations that most of the developers complain about.
To better illustrate theses issues, we ran some tests on 20+ applications built with React Native, and handpicked some common performance issues that you must know:
Heavy CPU usage on the Javascript Side
React Native applications run on interconneted threads. Native modules run on Native realm, and javascript components run on the JavaScript side.
In comparison to Native Realm, the JavaScript Realm usually had the maximum number of elements and libraries running on it. You can also clearly see the heavy load in the above picture.
CPU drainage is a major cause for slow app performance, and Here’s how you can reduce the workload and boost the performance.
Memory leakage
This is a typical issue in Andriod apps that even experienced developers often face difficulties with. It is no surprise that Garbage collector does it job, but, due to a bridge between the Native and React Native realm, most components go unnoticed.
Even simpler utility applications such as a hybrid camera app we tested was found to be leaking huge memory.
Memory leaks are usually common with hybrid applications, and optimizing those running services is a tedious task. Keep reading further to find how you can solve these issues.
Application size
While Ionic isn’t clearly a match for React native’s capabilities. But, when it comes to application size — Ionic often wins. In the screenshot above, you can see that the app size was increased 4x times when it was built using React native.
Note: Both of them had exactly the same features, still app size was 4x more in React native.
App size drastically impacts — how an application renders its UI components, and allocate the resources.
Large applications with defined architecture performs slow, and here is how you can optimise it:
- Follow the basics like using tools like Progaurd to efficiently bundle your application.
- Build different app files for different device architecture.
- Compress images and other graphic elements.
- Avoid storing raw JSON Data.
- Optimize the bindings on Native libraries.
Slow Navigations in React Native
While binding different screens together and implementing React-Navigation, there are 7 out 10 applications which freezes when you quickly move between different UIs.
For Instance, see this example for a subtle difference in the Navigation.
For Navigation, developers have multiple options that can be used and optimized further to achieve a true Native performance.
For Instance:
- Navigator: Pure JS component. Airbnb had started with this. Not entirely impressive, but good enough. You can’t expect a Native like performance.
- NavigatoriOS: It’s close to ios native performance, but only supports iOS platform.
- NavigationExperiment: It’s dificult to implement, and manage. Good for simple utility applications.
- ReactNavigation: Works well if you’re using React Native with Redux.
There are even more navigational options available for React native. Read here to see app navigation performance issues with react native and how you can improve them.
Infinite scrolling in React Native
Literally! there are tons of iterations involved in tuning the smoothness of scrolling in React Native.
When you implement scrolling in your application, either it can be with a scroll view or a list view.
With scroll view you have to load all the elements upfront. And it’s not a good solution to achieve a smooth performance.
List View seems to work better for many applications with large lists. With best practices, and some lesser known optimisation techniques, you can improve the performance.
Aside from what we discussed above, there are so many other performance bottlenecks that you must know before deploying your application.
If I had to list few other common issues, they would be:
- Animating images for different UI view
- Lack of multithreading support
- Slow app launch time
- App lags while changing the orientation of devices
- Issues with image placeholders
- Integrating Maps in React Native
- API JSON data optimisation
- Frozen UI
- Heavy Animations
React Native is truly a silver bullet for mobile app development, and If you truly want to reap the benefits from React Native, you need to know how to work with its limitations, and performance bottlenecks.
If you wish to read the comprehensive version of this article, where I have discussed all the issues and have insights to resolve them. Here is the link — React Native Performance: Major issues and insights on improving it.
Moreover, feel free to share your thoughts, or just say hello.
