React Native is based on JavaScript, the native part interacts with native thread through a bridge. We have three threads running the React Native framework namely: UI thread, Shadow Tree thread, and the JavaScript thread.

Its architecture has two sections; the native part built on Java, Swift or Objective-C and React native part built on JavaScript. you can take a sneak peek on e-commerce app I built using React Native.

In this article, I will explore some of the common best practices you should consider to improve React Native performance.

1. Memory use

Native apps have a lot of unnecessary processes running in the background. Find these with the help of Xcode. The Xcode finds leaks which you should fix to improve performance. In Android Studio, there is an Android device monitor used to monitor leaks in apps. Using scrolling lists like,FlatListSectionList or isVirtualList a sure way to increase performance. Use the following code to monitor performance and to fix memory leaks.

Import PerfMonitor from ‘react-native/libraries/Performance/RCTRenderingPerf’;
perfMonitor.toggle();
PerfMonitor.start();
SetTimeout ( () => {
perfMonitor.stop();
}; 2000);
}; 5000);

2. Reduce Image Size and Image Caching

Images have high memory usage in react-native apps. Using large images in react-native apps have a negative impact on memory optimization. To get optimum results when dealing with images, ensure the use of small-sized images as much as possible. You may also use PNG formats as opposed to JPG image format. Finally, convert your images to web-P format whenever possible because of the following reasons:

• WebP images speed up image loading time by 28%
• Reduced codePush bundle size by 66%
• Helps reduce iOS and Android binary size by 25%
• Faster React-native JS thread
• Smooth navigator transitions

Cache images locally to reduce the time taken to load images. As of now, React-native support caching on iOS only. See how in the following code:

< image source={ { uri: 'https://facebook.github.io/react/logo-og.png' , cache: 'only-i- cached' , } }, style={ { width: 400, height: 400 } } />

Now, image caching is an important step for improving the performance of your React Native app. It is also a known fact that React-Native supports image caching only for iOS platforms. Image caching can help in swifter loading of the images. App owners may also face the issue of failure of libraries when the preloaded images are not brought in when app is refreshed. This is called cache miss. Performance draining may also occur when cache logic operates towards the JS side.

#react native #react native performance #javascript #react