02 Apr React Native Performance: Do’s and Don’ts
React Native is a popular programming framework built by Facebook. It is used for developing mobile apps across cross-platforms like iOS and Android. This significant framework saves both resources and time. Many giant popular apps such as Airbnb, UberEats, Walmart, Skype, etc. have implemented this framework.
There are impeccable advantages of React Native including, Reusable Codes, Cost-effectiveness, Hot reloading support, Provides stable apps, Handy libraries & solutions, Optimal performance, Big community, Modular architecture, Manageable user interface, and Support of third-party plugins.
To make the most of React Native apps, the followings list of Do’s and Don’ts must be taken care of.
This is a list of attributes that the developers must implement while working on React Native apps.
1.DO USE A SOLUTION FOR CACHING IMAGE
React Native offers an Image Component Library that is inbuilt and does a spectacular job showcasing images, in case there is a constant frequency of the images to be displayed on the screen. Here, the react-native-fast-image can be used to enhance the performance of the app.
2.DO DEVELOP FOR CROSS-PLATFORMS
iOS dependency modules are less as compared to the Android platform and at some moments auto-linking (RN >/0.60) is just not sufficient. Thereby, before looking for any module, do a proper check whether the module has both iOS and Android-based installation procedures, the issues Tab, and when was the last update done. This helps in evaluating the status of the module.
3.DO USE HERMES
Hermes is an open-source JS engine that is optimized for running React Native. This makes the performance better by decreasing download size, reducing memory utilization, and minimizing the time taken by the app to become TTI (Time to interactive) or usable. Hermes engine can be enabled for both iOS as well as Android applications.
4.DO PREVENT USELESS RENDERS
5.DO DEBUG PROBLEMS WITH FLIPPER
Flipper is a new debugging tool launched by React Native Version 0.62.0 for Android, iOS, and all React Native Apps. It amalgamates straight away with the native code and this is empowered out of the box. With Flippers in use, remote debugging is no longer required. Only a locally connected instance of Metro is required to communicate with the React Native app. It has plugins for crash reports, checking the local database of the app, inspecting network requests, cached images, etc.
The task is not finished by only discussing the Doable attributes of React Native. The Don’ts are equally important and shouldn’t be ignored.
1.DON’T USE ARROW FUNCTIONS
The major reason behind wasteful re-renders is Arrow functions. They should not be used as callbacks in the functions to provide views. Due to the arrow function, every render produces a new instance of that specific function, so whenever the reunion occurs, React Native compares a difference and as there is no match found for function referent, it is not capable of using old references again.
2.DO NOT USE BULK REDUCERS
In case you are writing reducers yourself at some point or you are not using ‘rematch’ or ‘normalizer’ then you must be careful in transforming only those objects that are required. References and stores need to be updated only when the need arrives. Because updating references may build impractical renders that will further generate the same components time and again.
3.DO NO USE HIGHER-ORDER COMPONENTS
No doubt, using higher-order components is a good practice, but seldom it is arguable as it raises indirection and code complexity. Hence, instancing higher-order components must be carefully done, especially during a render method. Because new components are created on their own by this pattern.
4.DON’T USE VAGUE FUNCTIONS DURING RENDERING
Building functions in render ( ) is not a good practice as it results in some serious performance problems. A unique callback is built, each time when a component re-renders. This may no be a big problem for smaller and simple components, but considering React. memo ( ) and PureComponents that could be a major issue. Also when this program is carried forward as a prop to a child component, that may lead to purposeless re-renders.
5.DETACH CONSOLE STATEMENTS
React Native is a high-performance framework that offers a flawless experience for developing functionalities and interfaces at scale as long as you create software with performance as a top priority from the beginning. The above guidelines should be kept in mind while working on a React Native project.