FlatList performance slow for large changes to list

[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.

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?

[arussellk]

The same performance problem occurs on Android.

[andrew-wagner89]

+1 I'm encountering the same issue trying to edit large lists mimicking iOS messaging app's edit functionality

[pisangGoreng]

• 1.. im face the same problem here

[joonhocho]

I had this problem and decided to ditch FlatList/SectionList after trying out every optimization solution available. Instead, I bridged native table view and it's super fast.
I don't think FlatList/SectionList performance problem is going to be resolved in near future.

[arussellk]

@joonhocho Thank you for your suggestion. I see that you are a contributor - should I consider your comment official and close this issue?

[joonhocho]

@arussellk No, I am just another user. I once committed a small change and got the badge.

[andrew-wagner89]

@joonhocho I've looked into a native iOS implementation, but don't have any objC experience. Do you have an example of how you did it?

[joonhocho]

@andrew-wagner89 I will probably open source it in the future, but unfortunately not for a while. I don't have time for cleaning (refactoring) it up and making it open source yet.
To get started, take a look at https://facebook.github.io/react-native/docs/native-modules-ios.html
When I started bridging native modules, I had almost zero knowledge of objc, even though, I had written an app in Swift, so that helped.
If you know Swift, you can write native code in Swift. You just need to write bridging part in objc, which is not that hard.
I know writing native codes defeats the purpose of using React Native in the first place, but sometimes there is no community solution available yet and you'd have to write your own.
It's difficult at first, but it gets better once you learn it and try few times.
I really wish FlatList/SectionList can get better in the future, but so far after many attempts, I am not very hopeful.
Depends on your requirements, you may want to checkout https://github.com/aksonov/react-native-tableview as well. It's much faster than FlatList, but unfortunately it was not 'true native' fast, so I had to bridge natively as my app requires buttery smooth table for large set of data.
You may still want to try it out and see if it's good enough for your use case. It's pretty decent, tbh.

[wellyshen]

I have the same issue, the performance of FlatList is terrible... bad...

[osaario]

Had the same issue. Fixed after a long testing session by removing React installation from Podfile which I needed for react-native-mapbox-gl and installed the map library manually.

[xempie]

I have the same issue. I'm using a 2 columns FlatList list with about 120 items (including images). It doesn't render the items properly after about 40-50 rows!

[bolan9999]

mybe you can try this:
https://github.com/bolan9999/react-native-largelist

if it is useful for you ,star me ,please

[joaom182]

Same issue here, on Android is slow and iOS is fast.
@joonhocho just for clarify, Tableview component only works for iOS, right?

[vovkasm]

@joonhocho In your bridged native table view. Does you show RCTView's in cells, or cells also entirely native?

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[filipemerker]

@arussellk have you managed to solve this yet? You could take a look at this article gathering info about all techniques I could find around the internet that should enhance a FlatList, so that you can still benefit from virtualization, once you work with such big lists.

[arussellk]

@filipemerker I was not able to improve the performance of FlatList and ended up writing a native app instead.

[halzahrani79]

I have similar issue , I wanted to change the background of all the selected items , that gave me hell , beside I had nested structure for my list , and that make it even worse.

[naytun]

You might find the technique used in this article helpful, at least for me.
Making FlatList 5x faster