FlatList renders items way too often, resulting in poor performance #29946
Comments
|
I built this locally and seem to get different behavior. I'm not sure rendering every single cell is correct either. FlatList documentation also does not seem 100% clear on what it is supposed to do or what it is trying to achieve, clarification around that is necessary as well to manage expectations
Unfortunately lists are hard, I doubt there can be an implementation that works for all use cases without your own optimizations. React Native even logs |
|
@safaiyeh I'm so sorry.. I forgot to push my latest commit that I produced the results of my report with. My failure. I just pushed it, commit 3811b0617011e253f48b355640277ed4453b3b0e, "Simplify example for bugreport". The commit you had was with the workaround using I agree lists are hard. And yes, I agree that clarification of docs would be good too. Nevertheless, I see lot of inefficient behaviour, in certain cases thousands of unnecessary re-renders (or shallow equal comparisons if you apply shouldComponentUpdate / React.memo / PureComponent). These are still a waste. If I'm scrolling down (swipe up), I never expect re-renders of the first X items. I cannot think of a usecase that that would be necessary. If I run for first time, I never expect duplicate renders. If you checkout commit dbd926d1363e4e050660fc214d799d770b26aff0, this is what just happend (on my machine), on first run, without having done any interaction: => 2756 renders on first run, see attached file for complete log. Ran on iPhone 11 simulator, DEV mode. I think it would be good to dig into FlatList / VirtualizedList to solve these issues. |
|
I think you measure to peformance wrong way. Because you just printing index but there is https://reactnative.dev/docs/flatlist#initialnumtorender. I think you should measure performance with renderItem prop. Can you observe to how many times renderItem runs? I agree you, there is some bugs in Flatlist but maybe its not a bug |
Not sure why you ask this question, as I'm doing exactly that. Each time In simple example (https://github.com/dirkpostma/react-native-flatlist-demo/commit/3811b0617011e253f48b355640277ed4453b3b0e): In example with many (unnecessary) renders (https://github.com/dirkpostma/react-native-flatlist-demo/commit/a5c03ffc37b4b611da9801bd9e19173a58e19a6b): If I misunderstand you, can you clarify what you mean? |
|
same issue |
|
same issue |
|
https://stackoverflow.com/questions/45610547/reactnative-flatlist-render-all-items-at-once I think the link above solves my problem. I copied the key word in case of the link expires: |
|
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. |
github-actions
bot
added
the
Stale
|
This issue was closed because it has been stalled for 7 days with no activity. |
Uh oh!
There was an error while loading. Please reload this page.
Description
<FlatList>should enhance the performance of rendering lists with lots of items. Unfortunately, there (still) exists a bug that leads to way too many re-renders of list items, resulting in poor performance.Code snippet:
This is on first mount, without having done any scrolling.
Related to:
Workaround
There is a workaround to solve performance issue: wrap the ListItems in
React.memo(or usePureComponentor implementcomponentShouldUpdate). However, this is just a workaround and not the way it should work.React Native version:
Steps To Reproduce
Provide a detailed list of steps that reproduce the issue.
Expected Results
On first mount, I would expect that all items would only be rendered at most once.
Snack, code example, screenshot, or link to a repository:
https://github.com/dirkpostma/react-native-flatlist-demo
The text was updated successfully, but these errors were encountered: