CODEWITHSUNDEEP
javascriptreact-native
user8026867
user8026867

Reputation: 2059

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>}
/>

Upvotes: 43

Views: 67220

Answers (6)

Ayush Kumar
Ayush Kumar

Reputation: 532

One of the simple ways to optimize your flatlist is by using React.memo. In technical words, it basically does a shallow comparison of your data and check whether they needs to be re-rendered or not.

Make a file such as ListComponent.js and add the renderItem JSX to it, and and it to the renderItem.

// ListComponent.js
import React, { memo } from "react";
import { StyleSheet, Text, View } from "react-native";

const ListComponent = ({ item }) => {
  return  <View ></View>
};

export default memo(ListComponent);

Here is your FlatList

<FlatList
        data={data}
        removeClippedSubviews={true}
        maxToRenderPerBatch={8}
        windowSize={11}
        initialNumToRender={8}
        keyExtractor={keyExtractor}
        renderItem={({ item }) => (
               <ListComponent item={item} />
          )}
      />

Upvotes: 10

Navid Hosseini
Navid Hosseini

Reputation: 144

I used 'react-native-optimized-flatlist' and my problem was solved, the only thing to be careful about is that when you use this package, it removes keyExtractor and extraData

Upvotes: 0

I Putu Yoga Permana
I Putu Yoga Permana

Reputation: 4220

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}
  />
);

Upvotes: 102

Khalid Rahman
Khalid Rahman

Reputation: 125

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/>

Upvotes: -2

Vivek_Neel
Vivek_Neel

Reputation: 1353

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

Upvotes: 0

naqvitalha
naqvitalha

Reputation: 793

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

Upvotes: 7

Related Questions