-
Notifications
You must be signed in to change notification settings - Fork 24.8k
Description
Is this a bug report?
Maybe. I think this is an extension of #13649
Have you read the Contributing Guidelines?
Yes.
Environment
Environment:
OS: macOS Sierra 10.12.6
Node: 7.10.1
Yarn: Not Found
npm: 4.2.0
Watchman: 4.7.0
Xcode: Xcode 9.0 Build version 9A235
Android Studio: 2.3 AI-162.4069837
Packages: (wanted => installed)
react: 16.0.0-alpha.12 => 16.0.0-alpha.12
react-native: ^0.48.4 => 0.48.4
Steps to Reproduce
I have a FlatList that contains many items (1000+). It represents a lengthy checklist. I have a "Select All" button which causes every item in the list to be selected. The performance of rendering this is noticeably bad.
- Open the Snack https://snack.expo.io/S1z6PMZnZ (preferably on a physical device since iOS simulator will likely have better performance than a physical device)
- Tap on an individual row to see a slight lag in performance
- Tap on "Select All" or "Deselect All" to change every item in the list and see a big delay in rendering the new state
Note that in the Snack, I am only recreating a single object of id->boolean key/value pairs when a change is made. This is my effort to isolate FlatList performance.
Expected Behavior
I expected FlatList to be able to handle a list this size since it does not have to render very many items at a time. However, I suspect that since FlatList uses PureComponents it has to virtually recreate the entire list when I tap "Select All" which causes the performance hit.
Actual Behavior
If you tap a single row, there is a small amount of rendering lag.
If you tap "Select All" or "Deselect All" (whichever changes all the items in a list), there is a large amount of rendering lag.
Reproducible Demo
https://snack.expo.io/S1z6PMZnZ
I suspect that FlatList cannot do what I want. If that is the case, is there a different component that I've missed in the docs that I should try?