FlatList big data renderItem is called for every elements

279 Views Asked by At

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 ?

0

There are 0 best solutions below