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

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