1

I need to render about 1000 rows with Flatlist. Unfortunately, after rendering a few ones without problems, my app begins to be very slow and freezing so that it become totally impossible to manipulate. I'm looking for a solution to use instead of Flatlist which showed its limit. I need a module that can handle hundreds of rows without any problem.

Can someone provide me some advices ?

   <FlatList

   data={this.state.data}
    onEndReached={this.props.onEndReached}
    initialNumToRender={5}
    keyExtractor={(item, index) => item.objectID}
    renderItem={this._renderItem}
  />
John doe
  • 3,680
  • 7
  • 31
  • 65
  • Does the application render the 1000 rows instantly to view, or for example 50 at beginning and when scrolling to bottom of page it renders another 50 etc...? – SGhaleb Jul 31 '18 at 11:53
  • I want to be able to do both. In fact, even when i load the items progressively, the flatlist slow down my app in any case. – John doe Jul 31 '18 at 11:58
  • can you show code of the Flatlist – SGhaleb Jul 31 '18 at 12:00
  • yes of course.. – John doe Jul 31 '18 at 12:02
  • 1
    whats your threshold? Also, please do not load 1k rows altogether. This is a bridged version of the table, so there will be performance overheads. I suggest making a native version of it then using it. People claim it to be a lot faster – Aseem Upadhyay Jul 31 '18 at 12:04
  • Although programmatically you can do, in mobile development render about 1000 rows is not a good practice, the view can become saturated specially in mobiles that doesn't have so much RAM. In case to do that, try to render them bit a bit fo example, 50 per 50, this should make the app go faster. – SmoggeR_js Jul 31 '18 at 12:27
  • (even though it isnt ideal) I tried rendering 5000 items with reasonable speed/performance (they still loading, but the performance is okay). Can you show the whole class component please. – SGhaleb Jul 31 '18 at 12:28
  • **render about 1000 rows with Flatlist, really?** Never do that in any case, no one need that and make app slow, jus 20 rows is good, and load more when user scrolldown. – Hoàng Vũ Anh Aug 01 '18 at 07:53
  • Possible duplicate of [react native 100+ items flatlist very slow performance](https://stackoverflow.com/questions/44384773/react-native-100-items-flatlist-very-slow-performance) – I Putu Yoga Permana Jun 07 '19 at 23:34

1 Answers1

0
  • Implement shouldComponentUpdate or use the PureComponent to reduce unnecessary re-rendering.
  • Make sure FlatList is not a child of ScrollView.

OR

You can try other third party plugins:

Aung Myat Hein
  • 4,018
  • 1
  • 36
  • 42