diff --git a/lib/shared/reaction-utils.js b/lib/shared/reaction-utils.js
--- a/lib/shared/reaction-utils.js
+++ b/lib/shared/reaction-utils.js
@@ -11,6 +11,7 @@
 import { useSelector } from '../utils/redux-utils';
 import { relationshipBlockedInEitherDirection } from './relationship-utils';
 import { threadHasPermission } from './thread-utils';
+import { stringForUserExplicit } from './user-utils';
 
 function stringForReactionList(
   reactions: $ReadOnlyMap<string, MessageReactionInfo>,
@@ -32,6 +33,54 @@
   return reactionText.join(' ');
 }
 
+type MessageReactionListInfo = {
+  +id: string,
+  +isViewer: boolean,
+  +reaction: string,
+  +username: string,
+};
+
+function createMessageReactionsList(
+  reactions: $ReadOnlyMap<string, MessageReactionInfo>,
+): $ReadOnlyArray<MessageReactionListInfo> {
+  const result = [];
+
+  for (const [reaction, reactionInfo] of reactions) {
+    reactionInfo.users.forEach(user => {
+      result.push({
+        ...user,
+        username: stringForUserExplicit(user),
+        reaction,
+      });
+    });
+  }
+
+  result.sort((a, b) => {
+    const numOfReactionsA = reactions.get(a.reaction)?.users.length;
+    const numOfReactionsB = reactions.get(b.reaction)?.users.length;
+
+    if (!numOfReactionsA || !numOfReactionsB) {
+      return 0;
+    }
+
+    if (numOfReactionsA < numOfReactionsB) {
+      return 1;
+    } else if (numOfReactionsA > numOfReactionsB) {
+      return -1;
+    }
+
+    if (a.username < b.username) {
+      return -1;
+    } else if (a.username > b.username) {
+      return 1;
+    }
+
+    return 0;
+  });
+
+  return result;
+}
+
 function useCanCreateReactionFromMessage(
   threadInfo: ThreadInfo,
   targetMessageInfo: ComposableMessageInfo | RobotextMessageInfo,
@@ -61,4 +110,8 @@
   return hasPermission && !creatorRelationshipHasBlock;
 }
 
-export { stringForReactionList, useCanCreateReactionFromMessage };
+export {
+  stringForReactionList,
+  createMessageReactionsList,
+  useCanCreateReactionFromMessage,
+};
diff --git a/web/modals/chat/message-reactions-modal.react.js b/web/modals/chat/message-reactions-modal.react.js
--- a/web/modals/chat/message-reactions-modal.react.js
+++ b/web/modals/chat/message-reactions-modal.react.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 
 import type { MessageReactionInfo } from 'lib/selectors/chat-selectors';
-import { stringForUserExplicit } from 'lib/shared/user-utils';
+import { createMessageReactionsList } from 'lib/shared/reaction-utils';
 
 import Modal from '../modal.react';
 import css from './message-reactions-modal.css';
@@ -17,42 +17,9 @@
   const { onClose, reactions } = props;
 
   const reactionsList = React.useMemo(() => {
-    const result = [];
+    const messageReactionsList = createMessageReactionsList(reactions);
 
-    for (const [reaction, reactionInfo] of reactions) {
-      reactionInfo.users.forEach(user => {
-        result.push({
-          ...user,
-          username: stringForUserExplicit(user),
-          reaction,
-        });
-      });
-    }
-
-    result.sort((a, b) => {
-      const numOfReactionsA = reactions.get(a.reaction)?.users.length;
-      const numOfReactionsB = reactions.get(b.reaction)?.users.length;
-
-      if (!numOfReactionsA || !numOfReactionsB) {
-        return 0;
-      }
-
-      if (numOfReactionsA < numOfReactionsB) {
-        return 1;
-      } else if (numOfReactionsA > numOfReactionsB) {
-        return -1;
-      }
-
-      if (a.username < b.username) {
-        return -1;
-      } else if (a.username > b.username) {
-        return 1;
-      }
-
-      return 0;
-    });
-
-    return result.map(messageReactionUser => (
+    return messageReactionsList.map(messageReactionUser => (
       <div key={messageReactionUser.id} className={css.userRowContainer}>
         <div>{messageReactionUser.username}</div>
         <div>{messageReactionUser.reaction}</div>