react native 100+ items flatlist very slow performance

Question

I have a list just simple text that rendering into flatlist on react native but I am experiencing very very slow performance which makes app unusable.

How can I solv

Answer 1

check this link

https://github.com/filipemerker/flatlist-performance-tips

Example

FlatList
    containerContentStyle={styles.container}
    data={countries}
    renderItem={({ item }) => (
      <View style={styles.results}>
        <Results 
          {...this.props} 
          country={item} 
          handleUpdate={this.handleUpdate}
          pendingCountry={pendingCountry}
        />
      </View>
    )}
    keyExtractor={item => item.alpha2code}
    ListHeaderComponent={() => this.renderHeader()}

    // Performance settings
    removeClippedSubviews={true} // Unmount components when outside of window 
    initialNumToRender={2} // Reduce initial render amount
    maxToRenderPerBatch={1} // Reduce number in each render batch
    maxToRenderPerBatch={100} // Increase time between renders
    windowSize={7} // Reduce the window size
  />

Answer 2

Another optimization would be to provide a key using keyExtractor prop. It's very important.

Answer 3

Here is my suggestions:

A. Avoid anonymous arrow function on renderItem props.

Move out the renderItem function to the outside of render function, so it won't recreate itself each time render function called.

B. Try add initialNumToRender prop on your FlatList

It will define how many items will be rendered for the first time, it could save some resources with lot of data.

C. Define the key prop on your Item Component

Simply it will avoid re-render on dynamically added/removed items with defined key on each item. Make sure it is unique, don't use index as the key! You can also using keyExtractor as an alternative.

D. Optional optimization

Try use getItemLayout to skip measurement of dynamic content. Also there is some prop called maxToRenderPerBatch, windowSize that you can use to limit how many items you will rendered. Refer to the official doc to VirtualizedList or FlatList.

E. Talk is Cheap, show me the code!

// render item function, outside from class's `render()`
const renderItem = ({ item }) => (<Text key={item.key}>{item.key}</Text>);

// we set the height of item is fixed
const getItemLayout = (data, index) => (
  {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
);

const items = [{ key: 'a' }, { key: 'b'}, ...+400];

function render () => (
  <FlatList
    data={items}
    renderItem={renderItem}
    getItemLayout={getItemLayout}
    initialNumToRender={5}
    maxToRenderPerBatch={10}
    windowSize={10}
  />
);

Answer 4

Try out this listview https://github.com/Flipkart/ReactEssentials, it renders far fewer items than FlatList and then recycles them. Should be much faster.

npm install --save recyclerlistview

Answer 5

You can use react-native-optimized-flatlist. It is the optimized version of Flatlist.

1) Add this package by :

npm i -S react-native-optimized-flatlist

OR

yarn add react-native-optimized-flatlist

2) Replace <FlatList/> by <OptimizedFlatlist/>