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

Question

I use FlatList with large number of items. I get following alert from Expo XDE.

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. {"dt":13861,"prevDt":1498372326027,"contentLength":6624}

I used some optimization approaches to my FlatList for example PureComponent, but I still get this alert. Before I will describe my optimizations, could you tell me if this alert appears always even though FlatList is optimized? Or maybe it indicated actual issues with performance? I ask because performance of my FlatList is good.

Answer 1

I was previously seeing this error. After optimizing my code, I no longer see it. I figured out the problem by adding console.log() statement to the render() function of the Component that creates the FlatList, and the function that renders each item in the List. I noticed that my code was previously re-rendering the entire FlatList and all its items whenever there's a state change to any component on that page (even a component that's not related to the FlatList). I fixed this by converting various components to PureComponents. Here's what my FlatList declaration looks like:

<FlatList     ref={(ref) => { this.flatListRef = ref; }}     data={allPosts}     initialNumToRender={7}     renderItem={({ item }) =>       <Post postJson={item} isGroupAdmin={isGroupAdmin} user={user} />     }   /> 

Notice that I'm returning <Post /> which is a pure component:

import React, { PureComponent } from 'react'; class Post extends PureComponent {    render() { ... } } 

This ensures that the FlatList re-renders a only if the post changes. When I was previously passing a normal function to renderItem i.e., a function that does something like this:

return (   <View>   ...   </View> ); 

I noticed that the FlatList was re-rendering all items whenever any item changed. Now, by using a PureComponent, the FlatList only renders the new item added to the list (if the list is already being displayed).

It still takes relative long to render the entire list the first time. However, initialNumToRender ensures that the screen is filled up pretty much instantaneously (while the remain items get rendered in the background). And more importantly, after that initial rendering, the FlatList only ever has to render one item at a time (the item that changes).

I found this post very helpful).

I've just realized this is also explained here

Answer 2

I noticed that the answer to this question dosen't proffer solution for those using functional component and hooks. I encountered this problem and i was able to get rid of it by using the hook "useMemo()"

<FlatList                 keyExtractor={keyExtractor}                 data={productsState.products}                 renderItem={renderItem}             /> const renderItem = ({ item }) => (             <ListItem                 title={item.ProductName}                 subtitle={(item.ProductQuantity) + " " + (item.QuantityType !==                  null ? item.QuantityType : " ") }                 bottomDivider                 topDivider                 chevron                 checkmark={checkMark}                 onLongPress={() => setCheckMark(!checkMark)}                 rightSubtitle={(item.Currency !== null ? item.Currency: " " ) +                  " " + (item.productCost !== null ? item.productCost: " " )}                 rightSubtitleStyle={{ marginTop: -20 }}                 badge={{ value: item.sellingPrice, textStyle: { color: 'orange' }, containerStyle: { marginTop: -20 } }}             />         ) 

The renderItem function is an expensive computation, because it a long list to render. Instead I memoize it as follows

            const memoizedValue = useMemo(() => renderItem, [productsState.product]);  <FlatList                 keyExtractor={keyExtractor}                 data={productsState.products}                 renderItem={memoizedValue}             /> const renderItem = ({ item }) => (         <ListItem             title={item.ProductName}             subtitle={(item.ProductQuantity) + " " + (item.QuantityType !==              null ? item.QuantityType : " ") }             bottomDivider             topDivider             chevron             checkmark={checkMark}             onLongPress={() => setCheckMark(!checkMark)}             rightSubtitle={(item.Currency !== null ? item.Currency: " " ) +              " " + (item.productCost !== null ? item.productCost: " " )}             rightSubtitleStyle={{ marginTop: -20 }}             badge={{ value: item.sellingPrice, textStyle: { color: 'orange' }, containerStyle: { marginTop: -20 } }}         />     ) 

Don't forget to import useMemo from react, inorder to make this work.

Good Luck!