DEV Community 👩‍💻👨‍💻

Cover image for Optimizing React Native Apps for Improved Performance (2022)
Santhosh Umapathi
Santhosh Umapathi

Posted on

Optimizing React Native Apps for Improved Performance (2022)

We have all heard or come across one of the common issues when working with React Native, Performance issues. As the project grows more and more, performance issues can grow a lot more. Luckily, we can do a few things to improve the performance and optimize our React Native apps. Today we are going to discuss those optimization techniques.

Images

One of the common performance issues can be due to large image files or a lot of images inside our app. We can optimize those images with the help of an awesome library -react-native-fast-image

React Native's Image component handles image caching like browsers for the most part. If the server is returning proper cache control headers for images you'll generally get the sort of built-in caching behavior you'd have in a browser. Even so many people have noticed:

  • Flickering.
  • Cache misses.
  • Low-performance loading from cache.
  • Low performance in general.

FastImage is an Image replacement that solves these issues. FastImage is a wrapper around SDWebImage (iOS) and Glide (Android). Its benefits are below:

  • Aggressively cache images.
  • Add authorization headers.
  • Prioritize images.
  • Preload images.
  • GIF support.
  • Border radius.

Other things to consider while using images,

1. Use smaller-sized images.

2. Use PNG as opposed to JPG.

3. Convert your images to WebP format.

Avoid Unnecessary Re-renders

Another common issue with React and React Native applications is excessive/unnecessary re-renders, which can hurt a lot of performance. To solve this issue, we can make use of a memo from React Native along with react-fast-compare. When these 2 combined together, you get the best performance and avoid re-renders if there are no changes to the component.

React Fast Compare provides the fastest deep equal comparison for React. Very quick general-purpose deep comparison, too. Great for React.memo and shouldComponentUpdate.

Example:

import React, { memo } from 'react';
import equals from 'react-fast-compare';

const ExpensiveComponent = () => <></>

export default memo(ExpensiveComponent, equals);

Memorize Callbacks

Another important optimization technique is to avoid inline functions and create callback functions with useCallback from React. When the functions are memorized, they will not get recreated if there are no changes to their dependencies. This technique improves the performance of the entire application when used correctly, but do not use excessively in the places it's not required.

Example:

import React, { useCallback } from 'react';

const App = () => {
//Only recreated if a or b changes.
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);


useEffect(() => {
memoizedCallback();
}, [memoizedCallback]);


return <></>;
};

export default App;

Flashlist

Fan of Flatlist from React Native? But had trouble optimizing it for large lists, where the performance dropped gradually.

Well, it's time to adapt to Flashlist, because it's built on top of Flatlist, with improved performance and other benefits.

Look at what their docs say:

Similar props.
Instant performance.
Even with similar props as the React Native FlatList, FlashList recycles components under the hood to maximize performance.

And to be honest, they kept their promise on what they said. It improved a ton of performance compared to using native Flatlist.

Improve Start-up Time

Hermes is an open-source JavaScript engine optimized for React Native. We can use Hermes to enhance the start-up time as enabling it will result in decreased memory usage and smaller app size. Always make sure to use the latest version of RN when using Hermes.

Remove all console statements

Console statements are necessary for debugging JavaScript codes, but they are meant for development purposes alone. These statements could cause serious performance issues in your React Native application if they are not removed before bundling.

Conclusion:

Optimizing React Native Apps is one of the crucial steps every developer needs to follow for production-grade applications. This guide should give you a better idea about optimizing your project.

Thank you for reading all the way through.

Hope this post was useful to improve your Developer Journey !!

Originally published on: https://blogs.appymango.com/blogs/62db7ccd1fb436d95d0149f8

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.