React Native FlatList re-renders the already rendered items when adding new data

user_13855549 0
Viewed 4595

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 complex, I have build a Snack: https://snack.expo.io/@victoriomolina/flatlist-re-renders-all-components

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 components 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,
      comments,
      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}
          comments={comments}
          date={date}
        />
      </View>
    );
  };
expo react-native reactjs javascript
3 Answers

When your data updates, component 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 component loads, and will call fetchData function which updates your state therefore component 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);
user_133858340

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)

user_47184340

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 componentShouldUpdate 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 component 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 component
}

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.

user_138555490
Related