Improving the performance of React Native apps

Day 274 / 366

A few days ago I wrote about how React Native apps are bad performance-wise as compared to natively written Android or iOS apps. But there are still ways you can improve the performance of your React Native apps. Here are some tips to follow.

Simplify the UI

The more complicated your UI is, the longer it will take to render. Try to keep the implementation of the UI as simple as possible. Avoid too many unnecessary nested components.

Optimize Re-rendering

React renders the UI again every time the state changes. This is why you need to be mindful of using state-setting functions.

Use FlatList instead of forEach loops

When you want to render a list of components instead of simply writing a for loop, use a FlatList instead. The reason is that a FlatList would smartly render only the components that are there in the viewport.

Working with images

Images are a big part of any app, and they are the most resource-consuming as well. There are several ways you can load images more efficiently.

• You can cache the images so that if they are loaded once, they won’t need to loaded again and again.
• You can also use lazy loading to defer the loading of an image until necessary.

Using these techniques, you will be able to make your React Native app much more efficient and smoother.