What am I doing ?
Trying to render a FlatList based on some items stored in state.data
. A button is present which upon press appends a new item in state.data
.
What is the problem ?
Upon pressing the button, I'm expecting that the renderItem to be called only state.data.length
number of times whereas it's being called 2*state.data.length
number of times. Also, this 2x behaviour is not always consistent and changes as state.data.length
increases.
Ex: when state.data.length=3
, then on initial render, number of times renderItem is called exactly 3 times which is same as the number of items in state.data
and upon pressing button which appends a new item to state.data
and now state.data.length=4
and renderItem is called 8 times i.e. 2*state.data.length
times.
But, when state.data.length=11
, then on initial render, renderItem is called exactly 21 times and upon pressing button which appends a new item to state.data
and now state.data.length=12
and renderItem is called 23 times times which deviates from 2*state.data.length
behaviour.
What am I expecting ?
renderItem to be called only state.data.length
number of times on initial and subsequent renderings.
What I've tried ?
state.data
does bring down the number of times renderItem is called but it's still not that great decrease.The real issue I'm facing is when I'm trying to render chat messages (fetching through API call and setting it inside the state) inside a FlatList. Right now there are about ~200 messages for which the renderItem is being called in a range of 800-1200 times which is taking a hit on the performance.
Is this behaviour which is deviating from my expectation expected ? If yes, then what's the logic behind this. If no, then what am I doing wrong here ?
renderItem({ item, index, separators }); Takes an item from data and renders it into the list.
The more complex your components are, the slower they will render. Try to avoid a lot of logic and nesting in your list items. If you are reusing this list item component a lot in your app, create a component only for your big lists and make them with as little logic and nesting as possible.
1. What are the three key props used in a FlatList? The Key props used in Flatlist are data, renderItem, and keyExtractor.
I went through your code and tried understanding your concern.
(renderItem ~ FlatList's prop ) Note :- when using flatlist your item of list should be pure component or should implement shouldComponentUpdate or else they will render a lot more time than expected
So the below points are keeping in mind that your flatlist item are implemented as stated.
try pressing (Add Item Immutably text) in the project link shared you will understand better. Check This project.
Well even i am unaware of how things are implemented but as per what i read in docs i will just share few content that may help.
"In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate ands momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes."
and this is default value of few props which helps in controlling the tradeoff
maxToRenderPerBatch: 10,
onEndReachedThreshold: 2, // multiples of length
scrollEventThrottle: 50,
updateCellsBatchingPeriod: 50,
windowSize: 21, // multiples of length
for understanding more clearly , we need to understand how VirtualizedList is implemented. I will surely update this answer after digging more.
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