How to improve the performance of a React Native App?
See how you will boost your react native app performance, improve start-up time, decrease bundle size & memory usage.
Key Points -
- 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
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.
Enabling Hermes -
Add following code line In android/app/build.gradle
If you’re using ProGuard, add following rules in proguard-rules.pro :
Clean the build
Edit ios/Podfile file with below code lines -
Install the Hermes pod
That’s it, Now create your iOS & Android build and see application start-up speed, memory usage, and specially bundle size.
Related Article — React Clean Architecture
React Clean Architecture | React | Tech Article | Tech Talk
Hello Developers! Many of us use various design patterns with React Development to make React Apps more clean, clearly…
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.
Related Article — React Hooks Step By Step Integration
Step By Step Integration Of React Hooks — useState, useEffect, useRef, useMemo, useCallback
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.
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.
4. Use nativeDriver with Animated Library
It’s very simple to integration — useNativeDriver: true
Storybook | UI Component Explorer React Native | React JS | Vue JS | Angular JS | Tech Article |…
Discover Storybook an open source tool for developing UI components in isolation for React, Vue, Angular, and more
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.
Related Article — MobX State Tree State - Management Library
React Native Apollo GraphQL
Discover Apollo Client | State Management Library Local & Remote Data With GraphQL | Fetch, Cache, Update Data | Step…
6. Remove Console Log
To remove console.log in Production, following simple installation and setup.
Now, modify the .babelrc file to remove the console statements, as shown below:
7. Optimize Android App Size
React Native Android apps contain -
- Resources such as images, fonts, etc.
- Four different binaries compiled for different CPU architectures
- 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
If you want to extract four different binary according your CPU architecture then,
Thanks for reading Blog!