'React Component ReRenders, my question is why and is Memoizing the solution here?

Im a Junior Dev and im struggling to understand what causes my component to rerender as there is no state present here. Code to focus on is Flatlist as this is React Native but this is about React and not specifically RN. As you can see inside Flatlist I render renderPost. I know that renderPost, aka reusable component PostListItem rerenders because this console.log you can see inside flatlist gives me repeated keys, and even console logging postsSortedByDate shows me that they render few times. Because of this, I even have a warning child list keys must be unique while I definetly gave flatlist unique ids from my array, that warning is because of these rerendering. I guesss I need to use Memo somewhere?:

const FeedScreen: React.FC<FeedScreenProps> = ({ navigation }) => {
  const { postsSortedByDate } = checkPostsContext();
  const navigateToCreatePostScreen = async () => {
    navigation.navigate("CreatePostScreen");
  };

  const renderPost: ListRenderItem<IPost> = ({ item }) => (
    <PostListItem post={item} key={item.uniquePostID} />
  );

  return (
    <ScreenContainer>
      <SafeAreaView>
        <Header
          containerStyle={styles.containerStyleHeader}
          headerTitle="Factory X Feed"
          rightIcon="add-photo-alternate"
          onPressRightIcon={navigateToCreatePostScreen}
        />
      </SafeAreaView>
      {postsSortedByDate.length === 0 ? (
        <View style={styles.noPostsContainer}>
          <Text>
            No posts exist at the moment, please create one by tapping on the
            image icon in the header. In the meantime, as indicated by the
            spinner below, we will continue to try to fetch posts in case some
            do exist but are just loading slowly.
          </Text>
          <ActivityIndicator size="large" color="#0000ff" />
        </View>
      ) : (
        <FlatList
          data={postsSortedByDate}
          renderItem={renderPost}
          keyExtractor={(item, index) => {
            console.log("IDS:", item.uniquePostID.toString());
           //HERE IS THE ISSUE as here I see same keys rendering //multiple times, and I checked and I did not save posts in a wrong way //for few of them to have the same key somehow. Its now about that. //Even logging posts themselves(here) shows me they re render.
            return item.uniquePostID.toString();
          }}
        />
      )}
    </ScreenContainer>
  );
};

My PostListItem component:

const PostListItem: React.FC<PostItemProps> = ({ post }) => {
  return (
    <View style={styles.container}>
      {post.postImage ? (
        <Lightbox
          renderContent={() => {
            return (
              <Image
                source={{ uri: post.postImage }}
                resizeMode="cover"
                style={[
                  styles.imageInLightbox,
                  {
                    width: width,
                    height: height,
                  },
                ]}
              />
            );
          }}
        >
          <Image
            source={{ uri: post.postImage }}
            resizeMode="contain"
            style={styles.image}
          />
        </Lightbox>
      ) : null}
      <React.Fragment>
        {post.postDescription ? (
          <Text style={styles.textStyle}>
            {hashtagFormatter(post.postDescription)}
          </Text>
        ) : (
          <Text style={styles.textStyle}>{defaultPostDescription}</Text>
        )}
      </React.Fragment>
    </View>
  );

So why is PostListItem, I mean renderPost rerendering and how to fix it?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source