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.

Credit: Github

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.

Credit:Simform.com

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

Medium

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 viewyou have to load all the elements upfront. And it’s not a good solution to achieve a smooth performance.

List Viewseems 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.

codeburst稿源:codeburst (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 移动开发 » A visual guide to React Native Performance: Issues and resolving Insights

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录