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]

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]

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