React Native: Calling setState in FlatList much slower than setState in ScrollView

Question

I'm rendering a list of contacts, each of which has a clickable icon that triggers a set state. Here's the FlatList version:

<FlatList
  data={this.state.contacts}
  renderItem={({item, index}) => <Contact
    contact={item}
    image={this.getImage(item)}
    active={item.id in this.state.active}
    toggleActive={this.toggleActive} />}
  keyExtractor={(item, idx) => idx.toString()}
  refreshing={false} />

And here's the ScrollView version:

<ScrollView style={styles.scroll}>
  {this.state.contacts.map(c => (
    <Contact key={c.id}
      contact={c}
      image={this.getImage(c)}
      active={c.id in this.state.active}
      toggleActive={this.toggleActive} />
  ))}
</ScrollView>

The Contact component and all else remains constant between these two, only the type of scroll container (FlatList vs ScrollView) changes. However, the ScrollView maintains a snappy 60 FPS, while the FlatList drops to ~10 FPS on the JS thread after setState is called. Is this expected behavior, or am I missing something / doing something wrong?

Take a look here - https://stackoverflow.com/questions/55256221/flatlist-vs-scrollview — Jono, Nov 22 '19 at 13:42
You can use a package named react-native-optimized-flatlist , it says that it improves the performance — Ajith, Nov 22 '19 at 13:53
I guess I'm confused because all the discussion on FlatList v ScrollView analyzes render performance. I'm looking instead at the difference in event triggering performance. It's not immediately clear to me why ScrollView would call setState events more swiftly than FlatList. It's possible the expo logging system (which I'm using to evaluate when the event is triggered) is delaying the console logs, and the actual drop in FPS in the JS thread is due to the increased overhead of *rendering* the FlatList children components... — duhaime, Nov 22 '19 at 14:12

score 0 · Answer 1 · answered Nov 22 '19 at 13:39

The ScrollView renders the data after it's all loaded, while the flatList loads as you scroll; it loads only what the screen can render thats why you can see blank space if you scroll quickly. it says in the docs of RN:

In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.

React Native: Calling setState in FlatList much slower than setState in ScrollView

1 Answers1