Chats: memoize ChatMessageList messages for performance

app/soapbox/features/chats/components/chat_message_list.js

@@ -14,6 +14,7 @@ import { MediaGallery } from 'soapbox/features/ui/util/async-components';
 import Bundle from 'soapbox/features/ui/components/bundle';
 import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
 import { initReportById } from 'soapbox/actions/reports';
+import { createSelector } from 'reselect';
 
 const messages = defineMessages({
   today: { id: 'chats.dividers.today', defaultMessage: 'Today' },
@@ -38,15 +39,34 @@ const makeEmojiMap = record => record.get('emojis', ImmutableList()).reduce((map
   return map.set(`:${emoji.get('shortcode')}:`, emoji);
 }, ImmutableMap());
 
-const mapStateToProps = (state, { chatMessageIds }) => ({
+const makeGetChatMessages = () => {
-  me: state.get('me'),
+  return createSelector(
-  chatMessages: chatMessageIds.reduce((acc, curr) => {
+    [(chatMessages, chatMessageIds) => (
-    const chatMessage = state.getIn(['chat_messages', curr]);
+      chatMessageIds.reduce((acc, curr) => {
-    return chatMessage ? acc.push(chatMessage) : acc;
+        const chatMessage = chatMessages.get(curr);
-  }, ImmutableList()),
+        return chatMessage ? acc.push(chatMessage) : acc;
-});
+      }, ImmutableList())
+    )],
+    chatMessages => chatMessages,
+  );
+};
 
-export default @connect(mapStateToProps)
+const makeMapStateToProps = () => {
+  const getChatMessages = makeGetChatMessages();
+
+  const mapStateToProps = (state, { chatMessageIds }) => {
+    const chatMessages = state.get('chat_messages');
+
+    return {
+      me: state.get('me'),
+      chatMessages: getChatMessages(chatMessages, chatMessageIds),
+    };
+  };
+
+  return mapStateToProps;
+};
+
+export default @connect(makeMapStateToProps)
 @injectIntl
 class ChatMessageList extends ImmutablePureComponent {