FlatList VirtualizedList: You have a large list that is slow to update

Viewed 362

Sorry if this is somewhat a duplicate of some other post. I tried to follow the suggested solutions I could find, but I keep getting this VirtualizedList: You have a large list that is slow to update... error.

I have a bottom sheet with a FlatList

const renderBottomSheetRestaurantList = () => (
  <View style={{ height: topSnapPoint }}>
    <FlatList
      ref={restaurantList}
      data={restaurants}
      keyExtractor={(item) => `row-${item.id}`}
      renderItem={renderRestaurantRows}
      onEndReached={() => {
        setLoadMore(true);
      }}
    />
  </View>
);

const [loadMore, setLoadMore] = useState(false);
  useEffect(() => {
    if (loadMore) {
      initSearch({ searchQuery, region, filterOptions, priceOptions, loadMore });
    }
    return () => {
      setLoadMore(false);
    };
  }, [filterOptions, initSearch, loadMore, priceOptions, region, searchQuery]);

It renders this

const renderRestaurantRows = ({ item }: { item: Restaurant }) => {
    return <RestaurantListRow {...item} navigation={navigation} route={route} />;
  };

RestaurantListRow uses React.memo in hope to avoid re-renders as suggested in many places:

const RestaurantListRow: React.FC<Restaurant & RestaurantNavigationProps> = React.memo(
  (item) => {
    const {
      id,
      name,
      rating,
      reviews,
      meals,
      location,
      coordinates,
      open_now,
      opening_hours,
    } = item;

    return (
      <View>
        <RestaurantDetails
          id={id}
          name={name}
          rating={rating}
          reviews={reviews}
          meals={meals}
          location={location}
          coordinates={coordinates}
          open_now={open_now}
          opening_hours={opening_hours}
          containerStyles={styles.something}
        />
        <Divider />
      </View>
    );
  },
  () => true
);

export default RestaurantListRow;

onEndReached is hit three times and loads 60 records and I then get the error message:

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. Object {
  "contentLength": 5760.33349609375,
  "dt": 2381,
  "prevDt": 1025,
}

This by all means NOT a long list.

I must be doing something wrong, but what?

0 Answers
Related