React Native Performance Optimisation

React Native Performance Optimisation

React Native performance optimisation tips and tricks

Hey there,

In the cross-platform mobile application world, React Native is more popular along with other frameworks.

As your app grows in complexity, you may encounter performance issues, which must be optimised,

Today, we will explore various techniques and best practices to optimize the performance of your React Native app. By implementing these optimisation strategies, you can ensure that your app delivers a smooth and responsive user experience.

Optimise Assets

• As images and icons are the core requirements of the UI, we must optimise it.

Use the SVG icons as much as possible, nowadays mostly devs and designers uses Figma for the UI design, so we can easily export any icons as SVG.

• We also must have to optimise images for better performance for the render UI smoothly

Must use resizeMethod props in images for the quality of images

UseMemo()

• Generally, we do complex calculations and assigns it to any variable and using directly into JSX, here unnecessary rendering happens

We must use useMemo() to overcome it, useMemo() renders only when it gets an update, it reduces unnecessary rendering

Memo

• Memo is Higher Order Component. Memo is used with functional components. For class components we have to use PureComponent

Using memo we can reduce unnecessary component rendering, it will only render when it gets updated

Redundant code

Remove duplicate function, components and codes from the project

Instead, create common components, write common functions in helper files and keep code clean

Consoles

Remove consoles from the entire source code or comment it out to

FlashList

FlashList is a “Fast and performant React Native list” component that is a drop-in replacement for React Native’s <FlatList> component. It “recycles components under the hood to maximize performance.”

Inline functions and styles

Do not use inline functions and styles in the JSX, use it separately

Wrong way❌

import React from “react”; 
import { View } from “react-native”;

const { color } from “@theme”;

const App = () => {
 
   return (
     <View style={{flex: 1, backgroundColor: color.primary}}>
        {…}
     </View>
   ) 
}

export default App;

Right way✅

import React from “react”; 
import { View, StyleSheet } from “react-native”;

const { color } from “@theme”;

const App = () => {
 
   return (
     <View style={styles.container}>
        { … }
     </View>
   ) 
}

export default App;

const styles = StyleSheet.create({
   container:{
     flex:1,
     backgroundColor: color.primary
   }
)}

Happy coding 😊