[FlatList] FlatList and VirtualizedList Scroll performance is laggy after 30+ rows .

[PARAGJYOTI]

Description

Flatlist or VirtualizedList Scroll lags horribly after 30-40 rows . I am fetching the same data on onEndReached . Upto 30 rows its looks fine , but after that scrolling drops several frames . When I disable virtualization , scroll becomes normal but but responsiveness goes away . I tried disabling virtualizing on scrolling velocity this way .

  isVirtualizationTrue(e){
  var dOffset=(e.nativeEvent.contentOffset.y- this.state.lastOffset)
  var dt=(e.timeStamp-this.state.lastTimeStamp) 
  var velocity = dOffset/dt
  
  var isInstant=velocity-this.state.lastVelocity>.01
  

  if(velocity<1 && !isInstant){
     
      return false
  }
  if(velocity>1){
      return true
  }
  if(velocity <.25){
      return  true
  }

}
But again , there's problem for the unmounted Component that are removed from the views , which takes long time to show up again .

Is there any way to improve the scroll performance ?

Here's my sample code

  <FlatList
    
    shouldItemUpdate={(props,nextProps)=>
       { 
         return props.item!==nextProps.item
           
}  }

 

   onEndReached={this.onRefresh.bind(this)}
   onEndReachedThreshold={200}
   

    onRefresh={this.onRefresh.bind(this)}
    refreshing={this.props.Feed.isFetching }
    data={this.state.items} 
    renderItem={this.renderItem.bind(this)}  />

My data is sort of large and nested object by the way .
And data contains High quality Images . Per row there's two Items . But I implemented it without using numColums for testing with Virtualizedlist instead of Flatlist , but same result . Is it due to the High quality Image or I am doing something wrong ?

Additional Information

• React Native version: 0.43.2
• Platform: Android
• Development Operating System: Windows 10

[jpshelley]

Its most likely due to the nested components as you mentioned (nothing to do with HQ images).
I've had a similar issue, right now I am not providing a shouldItemUpdate method, and instead deailing with shouldComponentUpdate for each of my nested components in the list. Its more work but its helped with the responsiveness. Its still not perfect though so I'd like to hear what others say as well.
When I switched to that pattern I also ended up getting the dreaded:

VirtualizedList: You have a large list that is slow to update - make sure shouldItemUpdate is implemented effectively and consider getItemLayout, PureComponent, etc. 

statement again, but when shouldItemUpdate is provided I don't see that message even though the list is less responsive.

[PARAGJYOTI]

@jpshelley hey man , Thanks for the idea . Actually you saved me , but in an another way . I only upgraded to 0.43 just for VirtualizedList thinking it would have great performance . But it turned out it's not mature enough and lots of bugs to be fixed yet . Scrolling was quicker (i mean it fetches data before the onEndReach) but laggy (i mean shaky) . Implenting shouldComponentUpdate makes the scroll performance more horrible (but responsiveness got fixed) .
I thought Listview had horrible performance as I didn't implented the shouldComponentUpdate in rederRow. But today I again tried ListView with shouldComponentUpdate and it was great . I am going for ListView again . 0.43 has lots of issues , navigator performance is not good as 0.41 .
Anyway waiting for the WindowedList which is as experimental. Hope it fixes all problems.

[SunburtReynolds]

I'll add one more piece of information that might be relevant for a fix:

When I was investigating the issue mentioned above, I spent a lot of time pulling out pieces of code that could cause unnecessary updates. Additionally, I implemented shouldItemUpdate so that I could understand what was causing the FlatList to re-render its items so often. That's when I noticed something peculiar. Once you get past about the first 30 items, shouldItemUpdate gets called a ridiculous number of times event though there is no diff between new and old item props for either the items or the FlatList. In my case, I was seeing a print statement embedded in shouldItemUpdate (no, the print wasn't causing the lag) written to console nearly 1000 times for a single slow scroll.

The only way to prevent the jumpy scrolling behavior was to set disableVirtualization to false.

[PARAGJYOTI]

@SunburtReynolds Hey , you are absolutely right . And there's also an another issue with the new the updated version of Flatlist , which have separated the Fillrate function . The Fillrate logic was not performing good and it causes shakiness during scroll as is preassumed height was not equal to the height after rendering . Lots of bugs has to be fixed . So I downgraded to listview again . You can achieve a similer kind of smooth scroll in listview using dynamic onEndReachedThreshold . Suppose for a datasource of length N , you can set the threshold as n*N where n is a constant floating point and N is dynamic length.

[SunburtReynolds]

We need to be able to control the viewabilityThreshold offered by the FlatList. Otherwise we would most likely revert to ListView as well.

[st0ffern]

I have the same issue, but got it solved 😃
Just made a fix for it. I solved it by clearing all items that are not in the viewport to free memory and CPU usage.

see more of the fix here:
https://github.com/stoffern/react-native-optimized-flatlist
😉

[gp3gp3gp3]

@Stoffern I'm already replicating this behavior with my code base using FlatList, as I'm rendering lots of images / videos. But unfortunately with Android FlatList behaves entirely differently and keeping the viewableItems in state doesn't work. The initial rendering renders all the items in the list. Have you run into this with your library?

[st0ffern]

@gp3gp3gp3 try my library and see if it works.
I had the issue you describe and it works fine for me after i use the OptimizedFlatList

I dont keep them in the state as that would cause the FlatList to do a full re-render everytime a item changed. Look at my code and see if that makes more sense 😉

Tried different ways and methods with Flatlist; spent 2 days experimenting with it, but its not prime time if you are looking to render pics and videos in a list. ListView still works smoothly.

[ShahidAli786]

Add the following props in your Flatlist its work
onEndReachedThreshold={1200}

[raarts]

Doesn't that basically turn the FlatList into a ListView though?

[SunburtReynolds]

FWIW, version 0.45.1 seems to have fixed the jumpy scrolling issue!

[atpunk]

Wrapping the whole Flatlist in a ScrollView worked for me.

[dzpt]

@Stoffern have tried your lib and it doesn't help.
I have to switch back to ListView after all.