Preserve memoization of message list (#10434)

src/components/dms/MessageItem.tsx

@@ -20,6 +20,7 @@ import Animated, {
 } from 'react-native-reanimated'
 import {
   AppBskyEmbedRecord,
+  type ChatBskyActorDefs,
   ChatBskyConvoDefs,
   RichText as RichTextAPI,
 } from '@atproto/api'
@@ -87,9 +88,21 @@ function isWithinClusterBoundary({
 let MessageItem = ({
   item,
   isGroupChat = false,
+  prevMessage,
+  nextMessage,
+  relatedProfiles,
 }: {
   item: ConvoItem & {type: 'message' | 'pending-message'}
   isGroupChat?: boolean
+  prevMessage:
+    | ChatBskyConvoDefs.MessageView
+    | ChatBskyConvoDefs.DeletedMessageView
+    | null
+  nextMessage:
+    | ChatBskyConvoDefs.MessageView
+    | ChatBskyConvoDefs.DeletedMessageView
+    | null
+  relatedProfiles: Map<string, ChatBskyActorDefs.ProfileViewBasic>
 }): React.ReactNode => {
   const t = useTheme()
   const {currentAccount} = useSession()
@@ -97,11 +110,11 @@ let MessageItem = ({
   const moderationOpts = useModerationOpts()
   const queryClient = useQueryClient()
 
-  const profile = item.relatedProfiles.get(item.message.sender.did)
+  const {message} = item
+  const profile = relatedProfiles.get(message.sender.did)
 
   const reactionsControl = useDialogControl()
 
-  const {message, nextMessage, prevMessage} = item
   const isPending = item.type === 'pending-message'
 
   const displayName = profile ? createSanitizedDisplayName(profile) : null
@@ -268,7 +281,7 @@ let MessageItem = ({
         return l`You reacted ${reaction.value}`
       } else {
         const senderDid = reaction.sender.did
-        const memberSender = item.relatedProfiles.get(senderDid)
+        const memberSender = relatedProfiles.get(senderDid)
         if (memberSender) {
           return l`${createSanitizedDisplayName(memberSender)} reacted ${reaction.value}`
         }
@@ -279,13 +292,7 @@ let MessageItem = ({
       one: '# person',
       other: '# people',
     })} reacted – ${groupedReactions.map(g => g.value).join(' ')}`
-  }, [
-    reactions,
-    groupedReactions,
-    currentAccount?.did,
-    item.relatedProfiles,
-    l,
-  ])
+  }, [reactions, groupedReactions, currentAccount?.did, relatedProfiles, l])
 
   const appliedReactions = (
     <LayoutAnimationConfig skipEntering skipExiting>
@@ -368,7 +375,7 @@ let MessageItem = ({
       ) : null}
       <ReactionsDialog
         control={reactionsControl}
-        relatedProfiles={item.relatedProfiles}
+        relatedProfiles={relatedProfiles}
         message={message}
         reactions={message.reactions}
         groupedReactions={groupedReactions}

src/components/dms/SystemMessageItem.tsx

@@ -1,4 +1,5 @@
 import {View} from 'react-native'
+import {type ChatBskyActorDefs} from '@atproto/api'
 import {useLingui} from '@lingui/react/macro'
 
 import {type ConvoItem} from '#/state/messages/convo/types'
@@ -8,13 +9,15 @@ import {Text} from '#/components/Typography'
 
 export function SystemMessageItem({
   item,
+  relatedProfiles,
 }: {
   item: ConvoItem & {type: 'system-message'}
+  relatedProfiles: Map<string, ChatBskyActorDefs.ProfileViewBasic>
 }) {
   const t = useTheme()
   const {i18n} = useLingui()
 
-  const info = getSystemMessageInfo(item.message.data, item.relatedProfiles)
+  const info = getSystemMessageInfo(item.message.data, relatedProfiles)
   if (!info) return null
 
   const {Icon, message} = info