I have implemented a code that listen my DB documents and when a new one is added the app renders it as an item on my FlatList.

The problem I have is that everytime I update the data of the FlatList, the already rendered items re-renders again and again...

As my original code is plex, I have build a Snack: /@victoriomolina/flatlist-re-renders-all-ponents

I think the problem is that I update the state using a shallow copy of the existing array, but I do it just to re-render the FlatList when new items are added (I don't want to re-render the already rendered items).

Thank you, I will really appreciate your help.

Pd: In my original code the ponents of the FlatList extends React.PureComponent

My Real Code

The fething part

  const [posts, setPosts] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const { firebase } = props;

    let postsArray = [];

    // Realtime database listener
    const unsuscribe = firebase
      .getDatabase()
      .collection("posts")
      .doc(firebase.getCurrentUser().uid)
      .collection("userPosts")
      .orderBy("date") // Sorted by upload date
      .onSnapshot((snapshot) => {
        let changes = snapshot.docChanges();

        changes.forEach((change) => {
          if (change.type === "added") {
            // Get the new post
            const newPost = change.doc.data();

            // Add the new post to the posts list
            postsArray.unshift(newPost);
          }
        });

        // Reversed order so that the last post is at the top of the list
        setPosts([...postsArray]); // Shallow copy of the existing array -> Re-render when new posts added
        setIsLoading(false);
      });

    /* Pd: At the first time, this function will get all the user's posts */

    return () => {
      // Detach the listening agent
      unsuscribe();
    };
  }, []);

The FlatList

     <FlatList
          data={data}
          keyExtractor={keyExtractor}
          legacyImplementation={false}
          numColumns={1}
          renderItem={this.renderItem}
          getItemLayout={this.getItemLayout}
          initialNumToRender={12}
          windowSize={40}
          maxToRenderPerBatch={15}
          updateCellsBatchingPeriod={50}
          removeClippedSubviews
          ListFooterComponent={this.renderFooter()}
        />

The render item method

renderItem = ({ item, index }) => {
    const {
      images,
      dimensions,
      description,
      location,
      likes,
      ments,
      date,
    } = item;

    return (
      <View
        key={index}
        onLayout={({ nativeEvent }) => {
          this.itemHeights[index] = nativeEvent.layout.height;
        }}
      >
        <Card { /* Extends React.PureComponent */ }
          images={images}
          postDimensions={dimensions}
          description={description}
          location={location}
          likes={likes}
          ments={ments}
          date={date}
        />
      </View>
    );
  };

I have implemented a code that listen my DB documents and when a new one is added the app renders it as an item on my FlatList.

The problem I have is that everytime I update the data of the FlatList, the already rendered items re-renders again and again...

As my original code is plex, I have build a Snack: https://snack.expo.io/@victoriomolina/flatlist-re-renders-all-ponents

I think the problem is that I update the state using a shallow copy of the existing array, but I do it just to re-render the FlatList when new items are added (I don't want to re-render the already rendered items).

Thank you, I will really appreciate your help.

Pd: In my original code the ponents of the FlatList extends React.PureComponent

My Real Code

The fething part

  const [posts, setPosts] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const { firebase } = props;

    let postsArray = [];

    // Realtime database listener
    const unsuscribe = firebase
      .getDatabase()
      .collection("posts")
      .doc(firebase.getCurrentUser().uid)
      .collection("userPosts")
      .orderBy("date") // Sorted by upload date
      .onSnapshot((snapshot) => {
        let changes = snapshot.docChanges();

        changes.forEach((change) => {
          if (change.type === "added") {
            // Get the new post
            const newPost = change.doc.data();

            // Add the new post to the posts list
            postsArray.unshift(newPost);
          }
        });

        // Reversed order so that the last post is at the top of the list
        setPosts([...postsArray]); // Shallow copy of the existing array -> Re-render when new posts added
        setIsLoading(false);
      });

    /* Pd: At the first time, this function will get all the user's posts */

    return () => {
      // Detach the listening agent
      unsuscribe();
    };
  }, []);

The FlatList

     <FlatList
          data={data}
          keyExtractor={keyExtractor}
          legacyImplementation={false}
          numColumns={1}
          renderItem={this.renderItem}
          getItemLayout={this.getItemLayout}
          initialNumToRender={12}
          windowSize={40}
          maxToRenderPerBatch={15}
          updateCellsBatchingPeriod={50}
          removeClippedSubviews
          ListFooterComponent={this.renderFooter()}
        />

The render item method

renderItem = ({ item, index }) => {
    const {
      images,
      dimensions,
      description,
      location,
      likes,
      ments,
      date,
    } = item;

    return (
      <View
        key={index}
        onLayout={({ nativeEvent }) => {
          this.itemHeights[index] = nativeEvent.layout.height;
        }}
      >
        <Card { /* Extends React.PureComponent */ }
          images={images}
          postDimensions={dimensions}
          description={description}
          location={location}
          likes={likes}
          ments={ments}
          date={date}
        />
      </View>
    );
  };

• javascript
• reactjs
• react-native
• expo

3 Answers 3

The solution that has worked for me:

1. In render item I was passing the index as a key to the item. I have read that this can produce strange behaviour, so I decided to pass item.id (which is an UUID) instead.

2. Change the PureComponent to a Standard Component and reimplement the ponentShouldUpdate life-cycle method. If you have a PureComponent it will be:

    // From the RN documentation
    shouldComponentUpdate(nextProps, nextState) {
        return nextProps !== this.props && nextState !== this.state;
    }
   

So, I have decided to change my Item to a normal Component and do:

shouldComponentUpdate(nextProps, nextState) {
   // My ponent is just a card with an author row and a progressive image (thumbnail + image) with a Skeleton absolutely positioned
   return nextState.avatarIsLoaded && nextState.thumbailIsLoaded; // && nextState.imageIsLoaded is unnecesary by the way I have implemented my ponent
}

Pd: Also it is better to do as I did because if I add the * && nextState.imageIsLoaded * I will have to wait a long time until the full image (which size is bigger than the thumbnail's one) is loaded.

Now my items render twice, firstly when the Skeleton is showed, and secondly when the progressive image is ready to being displayed.

When your data updates, ponent re-renders. To prevent that, you need to this this line before calling fetchData()

useEffect(() => {
    if (data) return;
    fetchData();
}, [data]);

*edit: add data to the dependencies array

What will happen is that the useEffect will run when the ponent loads, and will call fetchData function which updates your state therefore ponent re-renders, so the next render data will have any value so the if statement will prevent the 2nd call to fetchData.

I also suggest to initial data with null

const [data, setData] = useState(null);

I removed this:

onEndReached={fetchData}

and it worked fine (see it online). The problem is that react-native calls onEndReached when it ends rendering. so you'll get the initial datas again on each render, and it causes infinit rendering issue. (more)