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

[nickkapoor]

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.

[sitompul]

is there a fix yet?

[stokesbga]

I remember when I started this project at 0.29... feels like Ive been chasing the magic dragon updating every minor version. +1 for listview

[sitompul]

I changed my render item component into PureComponent and it works fine

[bduyng]

+1

[naqvitalha]

We've had lot of problems with react native listview as well so, we built one ourselves, just open sourced it. We've tested it with 5000 items works like a charm. The reason it's so fast is that it uses a quick staggered grid algorithm and recycles views (based on types) instead of destroying them once they're out of view port. Please try it out and give us feedback https://www.npmjs.com/package/recyclerlistview

[PARAGJYOTI]

Hei @naqvitalha , Its really good to know that you have created an recyclerview library . I was always looking for that . However ,it was for an another reason , I needed a component to build snapped scrollviews like google-play-store apps scroll . React-native currently lacks that library . I wonder why nobody has created one yet . Please let me know if you can add that functionality with snaphelper , I believe it's possible only using recyclerview . Here re some links you can have a look .

https://rubensousa.github.io/2016/08/recyclerviewsnap

https://blog.mindorks.com/using-snaphelper-in-recyclerview-fc616b6833e8

[naqvitalha]

@PARAGJYOTI The listview that I talked about is not based on native recycler view, it's written from scratch purely in JS, making it cross platform (also web :) ). You can open an issue. We can certainly add this in the future.

[PARAGJYOTI]

@naqvitalha Owh , I thought it was native . Anyway , is flipkart also using react-native for mobile ?

[naqvitalha]

@PARAGJYOTI Yes we are.

[blackmiaool]

I don't know why, but try legacyImplementation, it does the trick

[dsvgit]

+1 have the same performance problem

[rahmatkruniawan]

So am I 😢

[naqvitalha]

Then why don't you guys give RecyclerListView a chance? https://www.npmjs.com/package/recyclerlistview

[rahmatkruniawan]

@naqvitalha In recyclerlistView why need ViewTypes , I not really got it

[naqvitalha]

ViewTypes are needed to efficiently recycle cells. So that similar looking cells are recycled. You can just return one type in layout provider in case you don't need it.

[halaei]

I am working on a PR related to FlatList performance. Please take a look to see if it fixes this issue: #31327

[NavidHosseini]

I used 'react-native-optimized-flatlist'
and my problem was solved, the only thing to be careful about is that when you use this package, it removes keyExtractor and extraData

Good luck.

[hamzasumbal]

I set the height of the Flatlist to the height of the screen. It worked for me.
If the height was set to "auto", the scrolling was very laggy.

[Arlien]

@halaei Were you able to merge that PR ?

[halaei]

@Arlien No i wasn't. I don't know what is the next step.

[Arlien]

@halaei yeah, this issue is very important but none of the fixes I've found on here has helped on my case. It's time for this to get patched...

[brunofariasd]

same here

[Chandra-Panta-Chhetri]

Yeah same here...I keep getting "You have a large list that is slow to update".

[Glaubenio]

Same here, i've switched to the v8 runtime and solved the performance problem on Android, but it doesn't work on iOS (because apple do not allow standalone executables). Any news on dealing with this?

[osvaldokalvaitir]

Same here, i've switched to the v8 runtime and solved the performance problem on Android, but it doesn't work on iOS (because apple do not allow standalone executables). Any news on dealing with this?

could you explain me better how to configure this v8 runtime?

[Glaubenio]

Same here, i've switched to the v8 runtime and solved the performance problem on Android, but it doesn't work on iOS (because apple do not allow standalone executables). Any news on dealing with this?

could you explain me better how to configure this v8 runtime?

@osvaldokalvaitir i've used this npm package

https://github.com/Kudo/react-native-v8

Just follow their tutorial

[jeppester]

I'm migrating my Android app (Hours) from Cordova to React Native to get better performance and a more modern stack.

Much to my surprise the infinite scroll view I implemented for cordova is way more performant than React Native's VirtualizedList, also after I've done the usual optimizations tricks (no arrow functions, data with keys, etc.). After a lot of experimenting it's getting obvious that the performance simply won't be good enough.

My old solution is fast because it recycles the rows, whereas VirtualizedList sort-of bruteforces the issue by rendering items ahead of when they are going to be visible. It's a workable solution if the users are scrolling slowly and the row components are all different and expensive to render. Unfortunately it's a very wasteful and slow solution when the rows are the same, and scroll needs to be very fast.

I honestly can't believe that React Native doesn't come with a good solution for this. With the use of component recycling it really should be possible to fill the screen with a complete set of new rows every frame - thus eliminating the need to render ahead.

I'll take a stab at implementing a useful solution, but this limitation has honestly drained me of motivation. I wonder if the other multi platform frameworks are equally bad at solving this problem.

[Sine99]

@jeppester u can try v8 engine. I have a social media app, rendering around 180 items consisting of autoplay videos, stories, carousels, photos just as we have in facebook app etc. These all without any lag. Facebook shows around 275 items. Here is the link of the app. U can check the type of items.
https://play.google.com/store/apps/details?id=com.swagitapps.swagit.social_media

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

[iasreact1]

@naqvitalha i have flatlist similar issues that contain image or video (react-native-video) and there is infinite list but i have faced similar problem can recyclerlist view solve my problem i used evrything but not get proper solution.Please help Sir...

[Harikarthyk]

When opening the chat screen, I had some delay and laggy issues. I added a delay of 1 ms, and for that 1 ms, show some loader. This helps in opening the screen faster even though it has more items to render. Also,  I have been using a flash list from Shopify. (https://github.com/Shopify/flash-list/tree/main)

[lucaswitch]

FlatList and VirtualizedList performance is not all good, for me the solution is make a Infinite Scroll kind of functionality that loads just the amount of necessary data to fill the mobile screen, 20 items should be enough for most of the devices.

With this solution we went from near 30fps on first load of list to 90~80fps.

[fabOnReact]

• PR #31327 was opened to fix this issue, but not merged (the main reason was that It's not safe to memoize a React Element. It could be using some state in the component which VirtualizedList doesn't know about, which will skip re-rendering even when it should re-render.)
• react-native-optimized-flatlist is not maintained since many years
• There is a new library FlashList with 4.5k stars.

So what do you think? Should I work on fixing this in react-native or it is just better using FlashList?
I believe our best alternative is trying to use FlashList and if there is need, we can try to improve that component.

[jeppester]

So what do you think? Should I work on fixing this in react-native or it is just better using FlashList?
I believe our best alternative is trying to use FlashList and if there is need, we can try to improve that component.

In my case FlashList was a very good drop-in-replacement. I'm not sure that FlatList needs to be replaced with FlashList, but FlashList adds something that React Native lacks out of the box.

I think the easiest solution for now would be to just add a reference to FlashList in the documentation, so that anyone facing performance issues will be directed towards something more performant.

I must say that I never got very far with FlashList for my project. It performed very well, but I need much tighter control over the scroll momentum. Something I believe is currently impossible with either FlatList nor FlashList.
Scrolling through thousands of items is not a good experience without tweaking the momentum. That is however an issue unrelated to this thread.

[react-native-bot]

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.

[react-native-bot]

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

[ugar0ff]

+1

[nateshmbhat]

+1

[shuo-hiwintech]

+1