Description
Is this a bug report?
Yes. A reopening of #16186, as it is reproducible on 0.53.3
Have you read the Contributing Guidelines?
Yes.
Environment
Environment:
OS: macOS Sierra 10.12.6
Node: 9.4.0
Yarn: 1.3.2
npm: 4.6.1
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 2.3 AI-162.4069837
Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.53.3 => 0.53.3
Target Platform: iOS and Android (various OS versions, up to and including latest on each).
Steps to Reproduce
(Copied from the previous issue, as it still applies).
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
Since a FlatList doesn't render offscreen components, it should not synchronously update any offscreen elements, but instead asynchronously update those elements as it does for its initial load. This will result in a quick and responsive update of onscreen elements without blocking the ui for too long.
Actual Behavior
If you tap "Select All" or "Deselect All" (whichever changes all the items in a list), there is a large amount of rendering lag.
If you profile it on a device with Chrome Debugging tools, you'll notice that it spends a lot of time updating every single row, even though most of the rows are offscreen.