Some tips use Flatlist to improve performance in React Native

Tram Ho

If you have been or are currently coding with React Native then it is no stranger to the name Flatlist. A listview render component is provided with a lot of props in the React Native utility.

But do you really understand the Flatlist yet? Is scrolling with 100-200 items smooth?

Here I will try to create a complete document to help you and the user for the best experience when using Flatlist.

First, when using Flatlist, you may have encountered cases such as: app scrolling is not smooth, high memory consumption leads to app crash, the response of the app when the user interacts slowly, is scrolling but generates about blank because the content hasn’t been loaded yet, …

To solve these problems, let’s take a look at the useful props available from FlatList.

1. removeClippedSubviews

When using this props, the Flatlist can remove elements that are not in your view, meaning that items that are not in your scroll view have been removed.

The advantage: removeClippedSubviews is memory-friendly, because you’ll always have a small number of items displayed instead of the entire list.

Exchange? There may be an error if your content is missing.

2. maxToRenderPerBatch

maxToRenderPerBatch = {number}

This is a prop you can control the number of items shown per batch, the default is 10.

Advantage: If the number is bigger, it means that the blank areas are less intuitive when scrolling (better fill rate).

Exchange ? More entries per session means less javascript performance, and less responsive Responsiveness, if you want to use this props you should choose lists that have no interaction.

3. updateCellsBatchingPeriod

While maxToRenderPerBatch indicates the number of items displayed per batch, updateCellsBatchingPeriod = {number} will tell your VirtualizedList the delay, in milliseconds, between batch impressions. In other words, it determines how often your component will display. Default is 50.

Pros: Combined with maxToRenderPerBatch gives us a perfect there.

Exchange ? Batches less often can cause empty areas. Batches more often may cause reactions and loss of performance.

4. initialNumToRender

Definition is the initial number of items to be rendered. Default 10.

Pros and Trade, I think you can guess it 😄

5. windowSize

windowSize = {number}

Number here is a unit of measurement where 1 is equal to the height of your viewport. Default is 21, is 10 views above, 10 below and one in the middle.

Pros: If you worry primarily about performance, you can set a larger number so your list will run smoothly and have less free space. If you are primarily concerned about memory consumption you can set a lower number so your output list will be smaller.

Exchange ? For a larger number, you will have greater memory consumption. For lower window sizes, you will have lower performance and a chance to see larger blank areas.

6. legacyImplementation

Hmm, with this props you need to distinguish ListView and VirtualizedList.

VirtualizedList is the component behind FlatList and is an implementation of React Native’s ‘virtual list’ concept.

And here is the concept of ListView, this props will use ListView instead of VirtualizedList.

Pros: This will make your list certainly work better, as it eliminates virtualization and displays all your items at once.

Exchange ? Your memory consumption increases and …

And here are some personal tips I have accumulated

a. Use simple components

The more complex your components, the slower they will be. Try to avoid a lot of logic and nesting in your list items. If you are reusing this component a lot in your application, make a copy just for your large lists and make them as logical as possible and as few nested as possible.

b. Use light components

The heavier your components are, the slower they are. Avoid heavy images. Talk to your design team, using as few effects and interactivity and information as possible on your list.

c. Use cached optimized images

I personally use react-native-fast-image . Each image on your list is a new Image () instance. The faster the access to the hook is loaded, the faster your JavaScript string will be again.

d. Use getItemLayout

If all components of your list are the same height (or width, for a horizontal list), using this prop will eliminate the need for your FlatList to automatically calculate it each time. This is a highly desirable optimization technique, and if your components are dynamically sized and you really need performance, consider asking your design team if they can think of redesigning to make it true. show better. Your method should look like this, for items with a height of about 70:

e. Use keyExtractor

This prop is used to cache and make a key to track the reordering order. For example, if you are using your id as a key:

f. Use shouldComponentUpdate

If you still use the component class, you should not ignore it.

Above are some tips that I have learned when working with React Native, hope to help your app be more awesome!

Share the news now

Source : Viblo