fix: add memoization in ReactionList to update MessageOverlay in Real time (#1737)

Author: khushal87

examples/TypeScriptMessaging/App.tsx

@@ -84,19 +84,17 @@ const ChannelListScreen: React.FC<ChannelListScreenProps> = ({ navigation }) =>
   const memoizedFilters = useMemo(() => filters, []);
 
   return (
-    <Chat client={chatClient} i18nInstance={streami18n}>
-      <View style={{ height: '100%' }}>
-        <ChannelList<StreamChatGenerics>
-          filters={memoizedFilters}
-          onSelect={(channel) => {
-            setChannel(channel);
-            navigation.navigate('Channel');
-          }}
-          options={options}
-          sort={sort}
-        />
-      </View>
-    </Chat>
+    <View style={{ height: '100%' }}>
+      <ChannelList<StreamChatGenerics>
+        filters={memoizedFilters}
+        onSelect={(channel) => {
+          setChannel(channel);
+          navigation.navigate('Channel');
+        }}
+        options={options}
+        sort={sort}
+      />
+    </View>
   );
 };
 
@@ -126,21 +124,19 @@ const ChannelScreen: React.FC<ChannelScreenProps> = ({ navigation }) => {
 
   return (
     <SafeAreaView>
-      <Chat client={chatClient} i18nInstance={streami18n}>
-        <Channel channel={channel} keyboardVerticalOffset={headerHeight} thread={thread}>
-          <View style={{ flex: 1 }}>
-            <MessageList<StreamChatGenerics>
-              onThreadSelect={(thread) => {
-                setThread(thread);
-                if (channel?.id) {
-                  navigation.navigate('Thread');
-                }
-              }}
-            />
-            <MessageInput />
-          </View>
-        </Channel>
-      </Chat>
+      <Channel channel={channel} keyboardVerticalOffset={headerHeight} thread={thread}>
+        <View style={{ flex: 1 }}>
+          <MessageList<StreamChatGenerics>
+            onThreadSelect={(thread) => {
+              setThread(thread);
+              if (channel?.id) {
+                navigation.navigate('Thread');
+              }
+            }}
+          />
+          <MessageInput />
+        </View>
+      </Channel>
     </SafeAreaView>
   );
 };
@@ -163,18 +159,16 @@ const ThreadScreen: React.FC<ThreadScreenProps> = ({ navigation }) => {
 
   return (
     <SafeAreaView>
-      <Chat client={chatClient} i18nInstance={streami18n}>
-        <Channel channel={channel} keyboardVerticalOffset={headerHeight} thread={thread} threadList>
-          <View
-            style={{
-              flex: 1,
-              justifyContent: 'flex-start',
-            }}
-          >
-            <Thread<StreamChatGenerics> onThreadDismount={() => setThread(null)} />
-          </View>
-        </Channel>
-      </Chat>
+      <Channel channel={channel} keyboardVerticalOffset={headerHeight} thread={thread} threadList>
+        <View
+          style={{
+            flex: 1,
+            justifyContent: 'flex-start',
+          }}
+        >
+          <Thread<StreamChatGenerics> onThreadDismount={() => setThread(null)} />
+        </View>
+      </Channel>
     </SafeAreaView>
   );
 };
@@ -234,34 +228,36 @@ const App = () => {
               i18nInstance={streami18n}
               value={{ style: theme }}
             >
-              {clientReady && (
-                <Stack.Navigator
-                  initialRouteName='ChannelList'
-                  screenOptions={{
-                    headerTitleStyle: { alignSelf: 'center', fontWeight: 'bold' },
-                  }}
-                >
-                  <Stack.Screen
-                    component={ChannelScreen}
-                    name='Channel'
-                    options={() => ({
-                      headerBackTitle: 'Back',
-                      headerRight: () => <></>,
-                      headerTitle: channel?.data?.name,
-                    })}
-                  />
-                  <Stack.Screen
-                    component={ChannelListScreen}
-                    name='ChannelList'
-                    options={{ headerTitle: 'Channel List' }}
-                  />
-                  <Stack.Screen
-                    component={ThreadScreen}
-                    name='Thread'
-                    options={() => ({ headerLeft: () => <></> })}
-                  />
-                </Stack.Navigator>
-              )}
+              <Chat client={chatClient} i18nInstance={streami18n}>
+                {clientReady && (
+                  <Stack.Navigator
+                    initialRouteName='ChannelList'
+                    screenOptions={{
+                      headerTitleStyle: { alignSelf: 'center', fontWeight: 'bold' },
+                    }}
+                  >
+                    <Stack.Screen
+                      component={ChannelScreen}
+                      name='Channel'
+                      options={() => ({
+                        headerBackTitle: 'Back',
+                        headerRight: () => <></>,
+                        headerTitle: channel?.data?.name,
+                      })}
+                    />
+                    <Stack.Screen
+                      component={ChannelListScreen}
+                      name='ChannelList'
+                      options={{ headerTitle: 'Channel List' }}
+                    />
+                    <Stack.Screen
+                      component={ThreadScreen}
+                      name='Thread'
+                      options={() => ({ headerLeft: () => <></> })}
+                    />
+                  </Stack.Navigator>
+                )}
+              </Chat>
             </OverlayProvider>
           </GestureHandlerRootView>
         </AppContext.Provider>

package/src/components/Message/MessageSimple/ReactionList.tsx

@@ -283,13 +283,11 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const {
     message: prevMessage,
     messageContentWidth: prevMessageContentWidth,
-    reactions: prevReactions,
     targetedMessage: prevTargetedMessage,
   } = prevProps;
   const {
     message: nextMessage,
     messageContentWidth: nextMessageContentWidth,
-    reactions: nextReactions,
     targetedMessage: nextTargetedMessage,
   } = nextProps;
 
@@ -304,14 +302,14 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
 
   if (!targetedMessageEqual) return false;
 
-  const reactionsEqual =
-    prevReactions.length === nextReactions.length &&
-    prevReactions.every(
-      (latestReaction, index) =>
-        nextReactions[index].own === latestReaction.own &&
-        nextReactions[index].type === latestReaction.type,
-    );
-  if (!reactionsEqual) return false;
+  const latestReactionsEqual =
+    Array.isArray(prevMessage.latest_reactions) && Array.isArray(nextMessage.latest_reactions)
+      ? prevMessage.latest_reactions.length === nextMessage.latest_reactions.length &&
+        prevMessage.latest_reactions.every(
+          ({ type }, index) => type === nextMessage.latest_reactions?.[index].type,
+        )
+      : prevMessage.latest_reactions === nextMessage.latest_reactions;
+  if (!latestReactionsEqual) return false;
 
   return true;
 };

package/src/components/Message/hooks/useCreateMessageContext.ts

@@ -48,11 +48,11 @@ export const useCreateMessageContext = <
   const reactionsValue = reactions.map(({ own, type }) => `${own}${type}`).join();
   const latestReactions = message.latest_reactions ? message.latest_reactions : undefined;
   const readBy = isMessageWithStylesReadByAndDateSeparator(message) && message.readBy;
-  const messageValue = `${latestReactions ? latestReactions.map(({ type }) => type).join() : ''}${
-    message.updated_at
-  }${message.deleted_at}${readBy}${message.status}${message.type}${message.text}${
-    message.reply_count
-  }`;
+  const messageValue = `${
+    latestReactions ? latestReactions.map(({ type, user }) => `${type}${user?.id}`).join() : ''
+  }${message.updated_at}${message.deleted_at}${readBy}${message.status}${message.type}${
+    message.text
+  }${message.reply_count}`;
   const membersValue = JSON.stringify(members);
 
   const quotedMessageDeletedValue = message.quoted_message?.deleted_at;