Increase React Native App Performance

React Native apps have numerous benefits like they are fast, cost-efficient, and offer a nearly native look. But, when it is not done properly, it can lead to performance issues.
So, while making you react to native applications, developers need to be aware of the most common performance issues and their effective solutions. All the points are listed below:

• Use of console.log statements in React Native:

  The use of console.log statements is one of the most common methods to debug the apps. But, when you run a bundled app, these statements cause a big bottleneck in the performance.
  One possible solution is to use a third-party package called “babel-plugin-transform-remove-console” that automatically removes all console.* calls in the release versions of your project. To install this package, just run the below command in a terminal:
  npm install babel-plugin-transform-remove-console
  After that, edit the .babelrc file in your root folder like:
  {
"env": {
"production": {
"plugins": ["transform-remove-console"] }
}
}

• Don’t use Scrollview to render a large list of data

  ScrollView renders all children at once and it is good when you have a small list to render. Dealing with a large amount of data can directly affect the performance of the app. In flatlist, the items are lazy loaded so the app does not consume an inconsistent amount of memory. If your FlatList is rendering slow, be sure that you’ve implemented “getItemLayout” to optimize rendering speed.

• Use an Image Caching Solution

  The efficiency at caching images in react native is to use a third-party package called “react-native-fast-image”. React Native itself offers an “Image” component that caches images like web browsers, which is sometimes the cause of some issues like rendering a lot of images on one screen, low performance in general, low-performance loading from cache. “FastImage” is an “Image” component replacement that solves these issues.

• Avoid unnecessary renders in React Native App

  React.memo() is the one optimization technique to avoid unnecessary renders. React.memo() is used to handle memoization which means if a component receives the same set of props more than once, it will use previously cached props and skip the next rendering.

  For example:
  // Main.js
const Main= () => {
const [count, setCount] = useState(0);
return (
<View>
<Button title=”Increase Count” onPress={() => setCount(count + 1)} />
<Child text=’Some text' />
</View>
);
};
//Child.js
const Child = React.Memo(({ text }) => {
return <Text>{text}</Text>;
});