Menu
"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.
639
ListView - A core component designed for efficient display of vertically scrolling lists of changing data. FlatList - A performant interface for rendering simple, flat lists. It seems both are efficient.
SectionList s are like FlatList s, but they can have section headers to separate groups of rows. SectionList s render each item in their input sections using the renderSectionHeader and renderItem prop. Each item in sections should be an object with a unique id (the key), and an array data of row data.
In React Native, you can use the FlatList component to render a long list of data. It renders only the items shown on the screen in a scrolling list and not all the data at once. To render a scrollable list of items using FlatList , you need to pass the required data prop to the component.
As opposed to the ScrollView, the FlatList renders only those elements that are currently being displayed on the screen (default: 10 items). Thus, it does not have any impact on the performance of the application. So, it is preferable to use the FlatList Component to display a large list of data.
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.
127
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
