Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

react native 100+ items flatlist very slow performance

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 solve this? My code is:

<FlatList
  data={[{key: 'a'}, {key: 'b'} ... +400]}
  renderItem={({item}) => <Text>{item.key}</Text>}
/>
like image 551
user8026867 Avatar asked Jun 06 '17 08:06

user8026867


People also ask

How do you increase performance of FlatList in React Native?

Use light components​ The heavier your components are, the slower they render. Avoid heavy images (use a cropped version or thumbnail for list items, as small as possible). Talk to your design team, use as little effects and interactions and information as possible in your list. Show them in your item's detail.

Is FlatList lazy loading?

The FlatList component in React Native is the lazy loader we use.

Why we use keyExtractor in FlatList React Native?

keyExtractor ​ Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering.


2 Answers

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}   /> );
like image 180
I Putu Yoga Permana Avatar answered Sep 26 '22 01:09

I Putu Yoga Permana


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
like image 22
naqvitalha Avatar answered Sep 26 '22 01:09

naqvitalha