React Native FlatList vs ListView

Question

"Use the new FlatList or SectionList component instead. Besides simplifying the API, the new list components also have significant performance enhancements, the main one being nearly constant memory usage for any number of rows."

This is stated on React Native's official docs. However, no matter how hard I try, FlatList memory uses just keeps sky rocketing when scrolling down. Compared to ListView component which uses way less memory.

Answer 1

TLDR

Create a PureComponent to use in renderItem: class ListItem extends React.PureComponent

Then you need to be sure you implement shouldComponentUpdate

Also I seem to have performance issues when I have a FlatList inside of a ScrollView

So I have been messing this this all day trying to figure out why the FlatList was blowing out my RAM usage and sucking my battery dry with my list of several thousand. What I was seeing was renderItem was called for each item multiple times. If I had a 100 items, renderItem would be called once for items 1-10, then again for items 1-10 and once for items 10-20, then again for items 1-20 and once for items 20-30 and so on. This baffled me as to why this was happening. But what I realized was that without any optimization that meant that it was reconstructing every item in that list and growing exponentially. To solve this problem here is what you need to do:

Create a PureComponent like they suggest in the docs for optimizations: class ListItem extends React.PureComponent

Then you need to be sure you implement shouldComponentUpdate

Once I did those two things my JS FPS and RAM usage remain level until I scroll where there is a little dip and spike respectively but the important part was they came back to a nice level. This is compared to before where I was seeing 1 FPS from JS and over a gig of RAM usage.

It seems like FlatList renders as many items as it can and the further away it gets from the items that are visible the lower the priority it gives rendering of the items. It keeps the items that are not on the screen stored virtually so that they can be pushed to the screen right away when the user scrolls. This can lead to runaway memory usage with large lists if you do not optimize the component rendering method.