See how you will boost your react native app performance, improve start-up time, decrease bundle size & memory usage.
Key Points -
- Hermes
- Avoid re-rendering using useMemo
- Cache Images
- Use nativeDriver with Animated Library
- State Management With Redux/MobX/Apollo
- Remove Console Log
- Optimize Android App Size
1. Hermes
Hermes is an open-source JavaScript engine optimized for React Native. Hermes integration helps to improve start-up time, decreased memory usage, and smaller app size.
With Hermes your app will start at 2x speed, memory usage will decrease to 30%, android app bundle size decreased 30%, iOS Application performance will boost.
Let’s see how to integrate Hermes. Hermes supports iOS support after the 0.64 version. So make sure you upgrade your app using React Native Upgrade Helper.
Enabling Hermes -
Android -
Add following code line In android/app/build.gradle
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 following rules in proguard-rules.pro :
-keep class com.facebook.hermes.unicode.** { *; }
-keep class com.facebook.jni.** { *; }
Clean the build
cd android && ./gradlew clean
iOS -
Edit ios/Podfile file with below code lines -
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
That’s it, Now create your iOS & Android build and see application start-up speed, memory usage, and specially bundle size.
2. Avoid re-rendering using useMemo
useMemo hooks helps developers to avoid re-rendering of child components to improve the performance of react application. useMemo is used to handle memoization, meaning if any component receives the same props more than once, it will use previously cached props and render the JSX view and return component.
In the sample below I have taken FlatList and Button. First time Flatlist renders perfectly. Now when user pressed button new setCount will update state variable and whole component getting reloaded with FlatList even no values updated in Array. To avoid this I have wrapped FlatListItem (UseMemoListItem) with useMemo, so useMemo checks if any change in props then only it will render the JSX else it will return render & return the view previous props.
const technology = [
{ name: 'React Native' },
{ name: 'React.js' },
{ name: 'Next.js' },
];
const [arrTechnology, setArrTechnology] = useState(technology);
const [count, setCount] = useState(0);
function UseMemoListItem({item, onChange, arrTechnology}) {
return useMemo(() => {
return (
<View style={Styles.container}>
<Text>{item.name}</Text>
</View>
);
}, [item.status]);
}
return (
<View style={Styles.container}>
<Button title='Increment' onPress={() => setCount(count + 1)} />
<FlatList
data={arrTechnology}
keyExtractor={(item) => String(item.name)}
renderItem={({item, index}) => (
<UseMemoListItem
item={item}
/>
)}
ItemSeparatorComponent={() => <UseMemoListItemSeprator />}
showsVerticalScrollIndicator={false}
/>
</View>
);
3. Cache Images
React Native Image component allow developers to display Images in application, still there is few issues like -
- Rendering number of Image (Product List - ECommerce Application)
- Low performance in Caching Image Loading
- Image flickering
To solve this issue React Native support in-build caching for iOS by enabling following lines of code.
<Image
source={{
uri: 'https://example.com/image.png',
cache: 'only-if-cached'
}}
style={{ width: 400, height: 400 }}
/>
But, what to do for Android, there is a popular third-party library named - react-native-fast-image which will work perfect for iOS & Android. Using Fast Image you can give quick image rendering, caching mechanism and many more to application users.
import FastImage from 'react-native-fast-image'
const YourImage = () => (
<FastImage
style={{ width: 200, height: 200 }}
source={{
uri: 'https://yourimageurl.com/image.png',
headers: { Authorization: 'token' },
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.contain}
/>
)
4. Use nativeDriver with Animated Library
We are using animations in our Application, but sometimes it will not run smoothly as expected which impacts application render performance. To avoid flicker and run smooth animation, useNativeDriver which send animation to native bridge before animation start on component. This helps animations to be executed on separate javascript instance, which resulting in smoother animation.
It’s very simple to integration - useNativeDriver: true
Animated.timing(this.state.animatedValue, {
toValue: 1,
duration: 500,
useNativeDriver: true, // <-- Add this
}).start();
5. State Management With Redux/MobX/Apollo
Many times it is required to manage data locally means caching data which shows immediately to the user without interruption whenever the user comes back to the application. We are using AsyncStorage, Local Database Storage to store data and when the user comes back next time/ open application next time we are fetching data and keeping it in Global variables to access anywhere in the application.
To manage this in various screens and storing data into various arrays, object Prefer popular State Management Library like Redux, Redux Rematch, MobX and Apollo. These library will storage | mange | retrieve data for you and you can easily access throughout the app without any interruption.
6. Remove Console Log
All we are using console.log('Hello KPITENG!') to debug applications. While deploying an application if we keep console.log() then it will create performance issues due to javascript thread.
To remove console.log in Production, following simple installation and setup.
npm install babel-plugin-transform-remove-console
Now, modify the .babelrc file to remove the console statements, as shown below:
{
"env": {
"production": {
"plugins": ["transform-remove-console"]
}
}
}
7. Optimize Android App Size
React Native Android apps contain -
- Resources such as images, fonts, etc.
- Four different binaries compiled for different CPU architectures
- Javascript bundle with business logic
- Other in-built files
While you are building an app this will combine all these and create a binary for you. To optimize binary size Android build in React Native by adding below line
Update following line in android/app/build.gradle
def enableProguardInReleaseBuilds = true
If you want to extract four different binary according your CPU architecture then,
def enableSeparateBuildPerCPUArchitecture = true
Thanks for reading Blog!
KPITENG | DIGITAL TRANSFORMATION
www.kpiteng.com/blogs | hello@kpiteng.com
Connect | Follow Us On - Linkedin | Facebook | Instagram
Top comments (0)