FlatList big data renderItem is called for every elements

[tosuccesspractice]

Description

I have a list of data with 36000 elements i have already implemented shouldComponentUpdate on the item so the item render is only called once

but my problem is that renderItem is called several times

for example when i scroll to 20000 element, renderItem is called for the first 19999 elements and the flat list takes time to load new element

and when i'm on the 20000 element for example and i do a setState all the 19999 are loaded again

how can i resolve this big problem of FlatList please ?

        <FlatList
    showsVerticalScrollIndicator={false}
    inverted
    data={this.props.dataSourcePr}
    ref={ref => {
      this.state.flatListTimeLine = ref;
    }}
    renderItem={this.renderItem}
    onViewableItemsChanged={this.onViewableItemsChanged}
    keyExtractor={(item, index) => index.toString()}
    onScroll={this._onScroll}
    disableVirtualization = {true}
    initialScrollIndex={this.state.lastIndex > 13 ?  this.state.lastIndex - 13 : 0 }
    initialNumToRender={100} // Reduce initial render amount
    maxToRenderPerBatch={50} // Reduce number in each render batch

    windowSize={3} // Reduce the window size //Bloque le scroll si trop rapide, le temps du chargement
    removeClippedSubviews={false} // Unmount wcomponents when outside of window   
  />  

I use disableVirtualization = {true} because with false i'm getting blank space

"react": "16.13.1", and "react-native": "0.63.3",

Version

0.63.3

Output of npx react-native info

System:
OS: macOS 12.3.1
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 1012.89 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 12.14.0 - /usr/local/bin/node
Yarn: Not Found
npm: 8.1.4 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.2 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 15.0, DriverKit 20.4, macOS 11.3, tvOS 15.0, watchOS 8.0
Android SDK: Not Found
IDEs:
Android Studio: 4.1 AI-201.8743.12.41.6953283
Xcode: 13.0/13A233 - /usr/bin/xcodebuild
Languages:
Java: 15.0.1 - /usr/bin/javac
Python: 3.9.0 - /usr/local/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.3 => 0.63.3
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

.

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

.

[luutruong]

I think the problem is you are using index as keyExtract while it is not recommend. Try something with unique ID in item object.

For more optimize options: https://reactnative.dev/docs/optimizing-flatlist-configuration#use-keyextractor-or-key

[tosuccesspractice]

Thank you for you solution now the flastlist is better but with disableVirtualization = {true} i can't scroll directly to an element who is outside the screen (client need) and when i enable Virtualisation i'm getting white space on the flastlist when i scroll fast

Have you a solution for this problem please ?

[cortinico]

As you're on a really old version of RN, could you test this against RN 0.68?

[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.