This content originally appeared on DEV Community and was authored by Raaj
A great user experience should be the core objective of any app development. Although React Native tries to provide everything you need to develop a performant application, there are occasions where you have to manually optimize your app. To do this, developers need to have a performance optimization mindset from the start of their projects.
Ways to Optimize the React Native App
1. Use FlatList
2. Remove all console statements
3. Memoize expensive computations
4. Use Relevant sized images
5. Remove unnecessary libraries and features
6. Use Hermes
1. Use FlatList to render large lists in React Native
If you have a large list, rendering all the items at once can cause a performance issue, but lazy loading with FlatList will improve performance
import React from 'react'
import {FlatList} from 'react-native'
const data = [
{
id: 1,
text: 'First'
},
{
id: 2,
text: 'Second'
},
...
]
const App = () =>{
const renderItem = ({item}) =>(
<View>
<Text>{item.text}</Text>
</View>
)
return (
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
)
}
2. Remove all console statements
While you could install some plugins such as babel-plugin-transform-remove-console to remove these statements from production
3. Memoize expensive computations
React introduced the memo HOC (Higher Order Component) for preventing unnecessary re-rendering and the useMemo hook for optimizing expensive computations.
4. Adjust (resize and scale down) image sizes
Images can contribute significantly to performance issues in React Native applications. So use relevant sized Images to increase the loading performance of your App
5. Remove unnecessary libraries and features
Each library in a React or React Native application leaves some footprint on the application. This is why you should only add libraries and features you need in your app and remove irrelevant dependencies and libraries. Animations, navigations, tabs, and other features can contribute to the screen load time and so the more they are on the screen, the worse the performance.
6. Use Hermes
Hermes is a JavaScript Engine developed by Facebook in 2019. It is one of the must-have features for improving app performance, reducing memory usage, decreasing app size, and improving the app start-up time.
Hermes is not currently enabled by default in React Native but you can easily enable it in your app.
To enable Hermes on Android, edit your android/app/build.gradle file and add the following rules.
project.ext.react = [
entryFile: "index.js",
enableHermes: true
]
This content originally appeared on DEV Community and was authored by Raaj
Raaj | Sciencx (2021-05-06T07:16:48+00:00) How to optimize React Native App. Retrieved from https://www.scien.cx/2021/05/06/how-to-optimize-react-native-app/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.