react-native-web: FlatList performance: Scrolling is buggy and not smooth when virtualization is enabled

PureComponent, keyExtractor

Thanks but I use that already.

getItemLayout

Just tried, unfortunately didn’t help. Used getItemLayout to fix the height in 100. When scrolling, it still makes small jumps when the virtualization adds new items. The only thing that worked so far was disableVirtualization.

Only add disableVirtualization and worked for me.

@brunolemos have you given this a look? https://github.com/Flipkart/recyclerlistview

I solved this in my app by remaking my renderItem component from scratch. It went from terrible, glitchy performance to butter. I was originally passing entire data objects to each list item. Then, in each component, I was checking my SWR cache to get more data about them.

For context, I was displaying an infinite scroll search list of artists (think Netflix search.) I wanted to show users if they’ve liked the artist before or not, etc. I was originally looping through a list, passing each list item down to my component, and then grabbing metadata about my list item from within each component. Why not? After all, each component could just access the global state, right? Turns out, this was very expensive.

I changed this by turning each card into a fully “dumb” component, with very little code. It only receives primitive props (hasLiked: boolean, starRating: number) and memoized functions (onPress(id: string)). This helped dramatically.

Oddly, adding getItemLayout caused it to flicker a lot on native. This is pretty surprising, given that I am using deterministic sizes. 🤷‍♂️

I highly recommend making your list item nimble. Don’t pass the entire list object down to it – only the data it needs. Keep any functions at the top level of the list component, and memoize them before passing them down to each item. And, as people have mentioned here, memoize each list item if they re-render too often and you’re seeing issues.

In case it’s useful, these are the props I ended up with. I memoized every function I passed to FlatList (this might be overkill, but it worked for me.)

<FlatList
  data={hits}
  removeClippedSubviews={Platform.OS !== 'web'}
  renderItem={renderItemFast} 
  ListEmptyComponent={ListEmptyComponent} // memoized function
  numColumns={itemsPerRow}
  // force re-render when items per row changes, since this can't be changed on the fly
  key={`list-${itemsPerRow}`} 
  initialNumToRender={10}
  keyExtractor={keyExtractor}
  onEndReached={fetchMore}
  keyboardDismissMode="on-drag"
  keyboardShouldPersistTaps="handled"
  style={style.container} 
/>

FlatList wasn’t built to support the web, where the solution would probably have to involve juggling a bunch of web APIs to try to find extra performance from somewhere. I don’t think supporting the web is a priority at the moment (cc @sahrens), but FB might eventually have a cross-platform solution and Google is working on a built-in virtualizer that might be something we can use one day.

I noticed on iPhone 6s and Samsung Galaxy S8 (using Android 8) scrolling with flatlist is very smooth, but I tried two phones using Android 9 (Samsung Galaxy S10, Essential Phone) and scrolling was very choppy. I switched over to RecycleListView and now all phones scroll very smooth without jank.