Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
What shall be done for performance optimization?
2.1.
Provide Appropriate Navigation Strategies
2.2.
Make use of Hermes
2.3.
Scale and Resize Images
2.4.
Use Firebase Performance Monitoring
3.
What to avoid for performance optimization?
3.1.
Avoid Passing Inline Functions as Props
3.2.
Avoid Rendering Overhead and Unnecessary Renders
3.3.
Avoid Arrow Functions
3.4.
Avoid Anonymous Functions While Rendering
4.
Frequently Asked Questions
4.1.
What are frames in a React Native App?
4.2.
What are the two types of frame rates being observed in an app?
4.3.
What are the common sources of performance problems? 
5.
Conclusion
Last Updated: Mar 27, 2024
Medium

React Native App Performance

Author Lucifer go
0 upvote
Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

Introduction

The developers use React Native to develop their apps not just because it gives a native look and feels to the apps but also because it can provide high-performance levels by working at 60 frames a second, much faster than web view-based tools. 

React Native helps the developer focus on the right things other than app optimization. However, sometimes it cannot determine the best way to optimize, so manual intervention is required. 

The manual intervention ensures that the optimization best suits the app developer and provides a smooth battery UI experience.

What shall be done for performance optimization?

Provide Appropriate Navigation Strategies

There have been particular problems related to navigation that the react-native team has been trying to solve to provide a seamless UI experience in most of the apps. If the navigation between screens is complex, the users will resist using the app.

The four types of navigation strategies are shown here:- 

Make use of Hermes

Hermes is a JavaScript Engine that is optimized especially for mobile applications. It is open-source and is available for both android and IOS versions of React Native. Hermes helps to lower the memory consumption, memory footprint, and the download size of an APK and the time needed for the app to become interactive, which is denoted by TTI (Time To Interact).

Scale and Resize Images

Optimization of images is required, especially in the case where there are a large number of graphical images, to improve the performance of React Native’s App. Rendering many images leads to high memory usage if the images are not correctly optimized in size and resolution. This, in turn, causes the app to crash or memory to overload. This can be done by: -

  • Using PNG instead of JPG format.
  • Using images of smaller resolution.
  • Using the WEBP format for images can reduce the image’s binary size.

Use Firebase Performance Monitoring

The performance characteristics of the app can be determined by using Firebase Performance Monitoring, which is a service provided by Google. Hence, the performance statistics and data can be collected via  Firebase Performance Monitoring SDK for React Native for further reviewing at the firebase console.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

What to avoid for performance optimization?

Avoid Passing Inline Functions as Props

Whenever passing the function as property to a component, avoid giving the function inline because the function is created again and again whenever the parent re-renders. Therefore, the child component re-renders even if the properties have not changed. The function should be declared as a class method or function inside working components so that the references do not allow re-renders.

Avoid Rendering Overhead and Unnecessary Renders

One of the optimization techniques common to both react native, and react.js is to avoid unnecessary renders on the main thread. In the functional components, this is achieved by the function React.memo().

The React.memo() function is used for memoization; if any component has the same set of properties as the previous one, the previously cached properties will be used again, thus rendering the JSX view returned by the functional component only once, saving rendering overhead.

Avoid Arrow Functions

Arrow functions cause a lot of re-renders. Arrow functions shouldn't be used as callbacks to render views. Each render generates a new instance of a function with arrow functions. React Native compares a change or a difference when reconciliation happens and cannot use the old reference as the function reference doesn't match.

Avoid Anonymous Functions While Rendering

Using render() to create functions is a bad practice as it can cause significant performance concerns. A new callback is established each time a component re-renders. This may not be a problem for essential and smaller components. Still, it is a significant problem for PureComponents and React.memo() and when the function is supplied as a prop to a child component, causing wasteful re-renders.

Check out this problem - Count Ways To Reach The Nth Stair 

Frequently Asked Questions

What are frames in a React Native App?

The static images quickly changing at a constant speed to convey new information are known as frames. The number of frames per second affects how smoothly the user interface works. Typically iOS devices display 60 frames a second, which translates to about 16.17 ms of time given to do all the work needed to generate the static image that the user will see for that interval.

What are the two types of frame rates being observed in an app?

There are two main types of frame rates one can observe within an app. These are: -

  • JS frame rate: The business logic of any react app runs on a JavaScript thread as this is where touch events are processed, and API calls are made. The JS frame rate can drop, especially during navigation, as the JavaScript thread renders all the components necessary for the scene to send the proper commands to the native side to create the backing views.
  • UI frame rate:  The performance of navigatoriOS is better than the navigator because the animations for these transitions are done entirely on the main thread, and thus they are not intercepted by the frame drop of the JavaScript thread.

What are the common sources of performance problems? 

Some of the common and avoidable sources are: -

  • Running in development mode
  • Using consol.log statements
  • Doing a lot of work on the JavaScript thread at the same time.
  • ListView initial rendering can be very slow hence scroll performance is bad for large lists.

Conclusion

This article extensively discussed React Native App Performance and the dos and don'ts to improvise the performance.

We hope that this blog has helped you enhance your React Native App Performance knowledge. You can check out more blogs on React Native PositioningReact Native ListView, and React Native Flat list.

If you would like to learn more, check out our articles on Code studio. Do upvote our blog to help other ninjas grow.

“Happy Coding!”

Live masterclass