Fix moment avatar rerender issue

1 files changed, 21 insertions, 18 deletions

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index f5a256d6..319542f9 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -1,5 +1,5 @@
 import {useNavigation} from '@react-navigation/native';
-import React, {useContext, useEffect, useRef, useState} from 'react';
+import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {
   Image,
   KeyboardAvoidingView,
@@ -173,22 +173,25 @@ const MomentPost: React.FC<MomentPostProps> = ({
     }
   }, [currentVisibleMomentId]);
 
-  const MomentPosterPreview = () => (
-    <View style={styles.momentPosterContainer}>
-      <TouchableOpacity
-        onPress={() =>
-          navigateToProfile(state, dispatch, navigation, screenType, user)
-        }
-        style={styles.header}>
-        <TaggAvatar
-          style={styles.avatar}
-          userXId={userXId}
-          screenType={screenType}
-          editable={false}
-        />
-        <Text style={styles.headerText}>{user.username}</Text>
-      </TouchableOpacity>
-    </View>
+  const momentPosterPreview = useMemo(
+    () => (
+      <View style={styles.momentPosterContainer}>
+        <TouchableOpacity
+          onPress={() =>
+            navigateToProfile(state, dispatch, navigation, screenType, user)
+          }
+          style={styles.header}>
+          <TaggAvatar
+            style={styles.avatar}
+            userXId={userXId}
+            screenType={screenType}
+            editable={false}
+          />
+          <Text style={styles.headerText}>{user.username}</Text>
+        </TouchableOpacity>
+      </View>
+    ),
+    [user.username],
   );
 
   return (
@@ -284,7 +287,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
                     screenType={screenType}
                   />
                 </View>
-                <MomentPosterPreview />
+                {momentPosterPreview}
                 {!hideText && (
                   <>
                     {moment.caption !== '' &&