From 319af71327256faf06b61cbacd6b3c990b4a50d2 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 1 Jul 2021 18:14:40 -0500
Subject: [PATCH] Chats: memoize sorted chat IDs list

---
 .../features/chats/components/chat_list.js    | 28 +++++++++++++------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat_list.js b/app/soapbox/features/chats/components/chat_list.js
index 2624a6e2f..f89115363 100644
--- a/app/soapbox/features/chats/components/chat_list.js
+++ b/app/soapbox/features/chats/components/chat_list.js
@@ -5,6 +5,14 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Chat from './chat';
+import { createSelector } from 'reselect';
+
+const getSortedChatIds = chats => (
+  chats
+    .toList()
+    .sort(chatDateComparator)
+    .map(chat => chat.get('id'))
+);
 
 const chatDateComparator = (chatA, chatB) => {
   // Sort most recently updated chats at the top
@@ -17,18 +25,20 @@ const chatDateComparator = (chatA, chatB) => {
   return 0;
 };
 
-const mapStateToProps = state => {
-  const chatIds = state.get('chats')
-    .toList()
-    .sort(chatDateComparator)
-    .map(chat => chat.get('id'));
+const makeMapStateToProps = () => {
+  const sortedChatIdsSelector = createSelector(
+    [getSortedChatIds],
+    chats => chats,
+  );
 
-  return {
-    chatIds,
-  };
+  const mapStateToProps = state => ({
+    chatIds: sortedChatIdsSelector(state.get('chats')),
+  });
+
+  return mapStateToProps;
 };
 
-export default @connect(mapStateToProps)
+export default @connect(makeMapStateToProps)
 @injectIntl
 class ChatList extends ImmutablePureComponent {