Performance is a topic with major ramifications for using a framework like React Native in real-world mobile applications. Simply put, React Native is fast by default. While working on a React Native app, however, you might experience performance issues.
Do not assume these issues can be fixed by testing components. In this post, we’ll offer a list of suggestions for optimizing performance while building a React Native app.
DO: Use an Image Caching Solution
React Native offers an Image component as part of its core set of components. This component is used to display an image, but, out of the box, it does not have a solution for issues like:
- rendering a lot of images on one screen
- low performance in general
- low-performance loading from cache
- flickering
The Image component in React Native handles caching images like web browsers, which is sometimes the cause of the above issues. They are easily resolved by using a third-party library called react-native-fast-image. It is available for both iOS and Android and is efficient at caching images.
DO: Use appropriate image size
Optimizing an image is important for a React Native app’s performance if the app relies on using a huge amount of images. Rendering lots of images could lead to high memory usage on a device if the images are not appropriately optimized in terms of size. This may cause the app to crash.
Some things that can be done to optimize images in a React Native app include:
- Use PNG format instead of JPG
- Use smaller-sized images
- Use WEBP format for images. It can help reduce the binary size on iOS and Android by 29%.
DO: Avoid unnecessary renders
React Native is based on the React library and handles rendering components in a similar way to React.js. Therefore, the optimization techniques that are valid with React also apply to React Native applications. One optimization technique is to avoid unnecessary renders, and in functional components, this can be done by using React.memo().
React.memo() is used to handle memoization. The concept of memoization is described as follows: if a component receives the same set of props more than once, it will use previously cached props and render the JSX returned by the functional component only once.
For example, consider the following parent and a child component. The Parent component has a state variable called count that is updated when the button is pressed.
Whenever the button is pressed, the Child component also gets re-rendered even though its prop text does not change on each render. It is not doing anything special to its parent component and is just displaying some text. This can be optimized by wrapping the contents of the Child component with React.memo().