Re-rendering issue in horizontal flatlist

[Ahmedhamed77]

Description

The issue is FlatList component gets rendered many times if the data. length is greater than 15

  const renderItem = () => {
    console.log('renderItem');
    return (
      <View
        style={{
          width: 200,
          height: 100,
          backgroundColor: 'red',
          margin: 20,
        }}
      />
    );
  };

<FlatList
        horizontal
        renderItem={renderItem}
        data={[1, 2, 3, 4, 5, 6, 7, 8, 9,10,12,13,14,15]}
        keyExtractor={item => item.toString()}
      />

this flatList rendered 25 times, even the data.length is just 15

Version

^0.67.4

Output of npx react-native info

OS: macOS 12.5.1 CPU: (8) arm64 Apple M1 Memory: 117.08 MB / 8.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 18.9.0 - /opt/homebrew/bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 8.19.1 - /opt/homebrew/bin/npm Watchman: 2022.09.05.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0 Android SDK: Not Found IDEs: Android Studio: 2020.3 AI-203.7717.56.2031.7678000 Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild Languages: Java: 18.0.1.1 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: ^0.67.4 => 0.67.4 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

just write this flatList in your app.js

Snack, code example, screenshot, or link to a repository

[KarthikMAM]

That is expected. Flat list renders the list in batches until the windowSize has been fully rendered

initialNumtoRender is 10. https://reactnative.dev/docs/optimizing-flatlist-configuration#initialnumtorender

So, it will first add 10 items and then add x more items to the list based on https://reactnative.dev/docs/optimizing-flatlist-configuration#maxtorenderperbatch

When the new batch is added... the list is looped and renderItem is called for all the items in the list.

I think even during the scroll... renderItem will get called for all the items, when additional items outside of the window come into the window.

So, I would say this is expected and you have to a memoized item in the result of renderItem.

[Ahmedhamed77]

So, I would say this is expected and you have to a memoized item in the result of renderItem.

could you give an example of what you are saying because I don't see the logic of what you are saying? so could you show how to memorize item in the result of renderItem.?

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.