Skip to content

FlatList performance slow for large changes to list #16186

@arussellk

Description

@arussellk

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.

  1. 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)
  2. Tap on an individual row to see a slight lag in performance
  3. 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.

flatlist-perf-demo

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Ran CommandsOne of our bots successfully processed a command.Resolution: LockedThis issue was locked by the bot.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions