FlatList rendering too much data, repeatedly

[mrspeaker]

My app was being extremely janky whenever the FlatList first loaded - and it seemed to be rendering too much at once. I stripped it back to a very minimal project (only rendering a FlatList) and it appears that this behaviour is there too: rendering multiple times, and too much data.

However, I might be mistaken on how the component works and the issue could be elsewhere in my code.

React Native version:

    iOS SDK:
      Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
  IDEs:
    Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6
    react-native: 0.60.4 => 0.60.0
  npmGlobalPackages:
    react-native-cli: 0.1.4
    react-native: 0.5.0

Steps To Reproduce

1. Create minimal app with code:

const data = [...Array(400)].map((_, i) => `a-${i}`);

const App = () => {
  return (
    <View style={{ height: 400 }}>
      <FlatList
        data={data}
        renderItem={({ item, index }) => {
          console.log(item, index);
          return (
            <Text>
              {item}:{index}
            </Text>
          );
        }}
        keyExtractor={(item, index) => item}
      />
    </View>
  );
};

2. Watch debug log. You can see the console.login action here: https://www.youtube.com/watch?v=kTXgZcm0cvg

The console.log should only be called one time for each initial chunk of items to be rendered. However it is logging many times. First it logs from index 0 to 9 (the first 10 elements of the array) then it immediately logs again from 0 to 30 (which is more than enough to fill the view), then immediately again from 0 to 180, and immediately again from 0 to 226.

Describe what you expected to happen:

I expected it only log for the initial rendered items. If I set disableVirtualization: true then the logs work "correctly" - only rendering the first chunk until you scroll down... but I don't think that is recommended!

It seems that each item is re-rendered multiple times, and 226 elements are all rendered on the first page load . Though perhaps internally this is just a "first pass" and rendering is somehow deferred? Or the act of console.logging causing the rerenders?

[xstable]

Maybe we talking about the same BUG?!
First I thought it's an issue of react-native-elements, so I've posted it there, but I''ve even tried it only with vanilla RN-Components, and same behavior...

So here is the detailed Bug-Description with Screenshot
https://github.com/react-native-training/react-native-elements/issues/2074

[tomoima525]

@mrspeaker Can be related to onEndReached multiple times is because you have not set initialNumToRender properly. Can you check this SO answer? properlyhttps://stackoverflow.com/questions/53408470/flatlist-onendreached-being-called-multiple-times/57681695#57681695

[xstable]

I figured out following.

BTW I suggest to improve the Documentation with a Note to watch (and set) these important Parameters to gain a good FlatList-Performance... and maybe reduce the default-value of windoSize to 5.

It's important to analyse how much entries appear at your Screen, and which behavior you wan't to have while scrolling.

In my example, first page has 8 ListItems (because a Searchfield is in the Header of the first Screen). Every additional Screen has 9 ListItems.

For this, you have to think about (and set) following Parameters.

windowSize={5}
initialListSize={8}
initialNumToRender={8}
maxToRenderPerBatch={9}
removeClippedSubviews  // optional

Very Important is:

• set Parameter windowSize,
• set Parameter maxToRenderPerBatch
• your "renderItem" must be a pureComponent or a function

If you not set windowSize, it's default is 21, means renders 10 Screen before and after your current Screen. For me this means 21 * 9 = 189 ListItems.

[ifsnow]

https://github.com/ifsnow/react-native-infinite-flatlist-patch

I made a patch library to help with this issue. I hope this helps.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[jdhorner]

Definitely not stale, and still happening.

[Valegox]

@ifsnow It doesn't work for me...

[ghost]

I figured out following.

BTW I suggest to improve the Documentation with a Note to watch (and set) these important Parameters to gain a good FlatList-Performance... and maybe reduce the default-value of windoSize to 5.

It's important to analyse how much entries appear at your Screen, and which behavior you wan't to have while scrolling.

In my example, first page has 8 ListItems (because a Searchfield is in the Header of the first Screen). Every additional Screen has 9 ListItems.

For this, you have to think about (and set) following Parameters.

windowSize={5}
initialListSize={8}
initialNumToRender={8}
maxToRenderPerBatch={9}
removeClippedSubviews  // optional

Very Important is:

• set Parameter windowSize,
• set Parameter maxToRenderPerBatch
• your "renderItem" must be a pureComponent or a function

If you not set windowSize, it's default is 21, means renders 10 Screen before and after your current Screen. For me this means 21 * 9 = 189 ListItems.

Thank you saved my day

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.