Adopted the world over by massively successful companies like Facebook, Shopify, Coinbase, Tesla, and Discord, React Native offers a promising solution for those seeking a viable framework on which to develop cross-platform applications. Why are some of the world's largest companies making the switch to React Native?
- It offers more concise and easier-to-understand code that can be shared across multiple platforms.
- It offers fast iteration without a compile cycle.
- You can ship faster and focus on details that really matter, making your app look and feel fantastic.
To reach the true performance potential of your React Native app though, optimization is a crucial step. In this article, we break down some optimizations that can make your React Native Best app developers sydney twice as fast and way more efficient.
Improve Start-up Time
App start-up time means the time from app launch to draw content from the app. Decreasing bundle size and memory usage will help to improve the start-up time. We can enhance app performance by improving start-up time.
Hermes
Hermes is an open-source JavaScript engine optimized for RN. We can use Hermes to enhance the start-up time as enabling it will result in decreased memory usage and a smaller app size. Always make sure to use the latest version of RN when using Herms.
Enabling Hermes for Android
For Android applications, add following lines to android/app/build.gradle to enable Herms for Android.
project.ext.react = [
entryFile : "index.js",
- enableHermes: false // clean and rebuild if changing
+ enableHermes: true // clean and rebuild if changing
]
If you're using ProGuard, add these rules in proguard-rules.pro:
-keep class com.facebook.hermes.unicode.** { *; }
-keep class com.facebook.jni.** { *; }
Next, clean the build:
cd android && ./gradlew clean
Deploy the app
npm react-native run-android
Enabling Hermes for iOS
For iOS applications, add the following code block to ios/Podfile file to enable Herms for iOS.
use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` and then install pods
- :hermes_enabled => false
+ :hermes_enabled => true
)
Install the Hermes pod
cd ios && pod install
Deploy the app
npm react-native run-ios
useMemo
We can use useMemo hooks to avoid re-rendering, and it helps to prevent re-rendering of child components by returning memorized values of a function. If any component receives the same props more than once, useMemo will use previously cached props and render the JSX view and return the component. Thus, useMemo helps to improve the performance of RN applications. However, it should be used only when performing expensive calculations, as we can memorize the computations to recalculate the results if only the values are changed.
We have used FlatList and Button in the below example. At the first time, FlatList will render perfectly, and when the user clicks the button count, it will increase by one. Then the state is updated, and the whole component will re-render without any change in the array. As in code, we avoid this by wrapping FlatListItem (UseMemoFlatListItem) with useMemo. It will check whether there are any changes in props and render the JSX only if there are changes. Otherwise, it will return the previous props and render the previous view.
No comments yet