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",
Edit____________
One problem is that : I'm 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
So 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 ?