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?