New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FlatList performance slow for large changes to list #16186

Closed
arussellk opened this Issue Oct 3, 2017 · 18 comments

Comments

Projects
None yet
@arussellk
Copy link

arussellk commented Oct 3, 2017

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?

@arussellk

This comment has been minimized.

Copy link

arussellk commented Oct 3, 2017

The same performance problem occurs on Android.

@andrew-wagner89

This comment has been minimized.

Copy link

andrew-wagner89 commented Oct 3, 2017

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

@pisangGoreng

This comment has been minimized.

Copy link

pisangGoreng commented Oct 4, 2017

  • 1.. im face the same problem here
@joonhocho

This comment has been minimized.

Copy link
Contributor

joonhocho commented Oct 4, 2017

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

This comment has been minimized.

Copy link

arussellk commented Oct 5, 2017

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

@joonhocho

This comment has been minimized.

Copy link
Contributor

joonhocho commented Oct 5, 2017

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

@andrew-wagner89

This comment has been minimized.

Copy link

andrew-wagner89 commented Oct 6, 2017

@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

This comment has been minimized.

Copy link
Contributor

joonhocho commented Oct 8, 2017

@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

This comment has been minimized.

Copy link

wellyshen commented Nov 18, 2017

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

@osaario

This comment has been minimized.

Copy link

osaario commented Dec 5, 2017

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

This comment has been minimized.

Copy link

xempie commented Dec 15, 2017

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

This comment has been minimized.

Copy link

bolan9999 commented Dec 19, 2017

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

if it is useful for you ,star me ,please

@joaom182

This comment has been minimized.

Copy link

joaom182 commented Jan 16, 2018

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

@vovkasm

This comment has been minimized.

Copy link
Contributor

vovkasm commented Feb 16, 2018

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

@react-native-bot

This comment has been minimized.

Copy link
Collaborator

react-native-bot commented Feb 24, 2018

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 ContributeWhat to Expect from Maintainers

@filipemerker

This comment has been minimized.

Copy link

filipemerker commented May 26, 2018

@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

This comment has been minimized.

Copy link

arussellk commented May 27, 2018

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

@halzahrani79

This comment has been minimized.

Copy link

halzahrani79 commented Aug 3, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment