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
@@ -1,6 +1,7 @@
 // @flow
 
 import invariant from 'invariant';
+import _sortBy from 'lodash/fp/sortBy';
 
 import type { MessageReactionInfo } from '../selectors/chat-selectors';
 import type {
@@ -11,6 +12,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 +34,43 @@
   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,
+      });
+    });
+  }
+
+  return _sortBy(
+    ([
+      (reactionInfo: MessageReactionListInfo) => {
+        const numOfReactions = reactions.get(reactionInfo.reaction)?.users
+          .length;
+
+        return numOfReactions ? -numOfReactions : 0;
+      },
+      'username',
+    ]: $ReadOnlyArray<
+      ((reactionInfo: MessageReactionListInfo) => mixed) | string,
+    >),
+  )(result);
+}
+
 function useCanCreateReactionFromMessage(
   threadInfo: ThreadInfo,
   targetMessageInfo: ComposableMessageInfo | RobotextMessageInfo,
@@ -61,4 +100,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
@@ -1,21 +1,13 @@
 // @flow
 
-import _sortBy from 'lodash/fp/sortBy';
 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';
 
-type MessageReactionListInfo = {
-  +id: string,
-  +isViewer: boolean,
-  +reaction: string,
-  +username: string,
-};
-
 type Props = {
   +onClose: () => void,
   +reactions: $ReadOnlyMap<string, MessageReactionInfo>,
@@ -25,33 +17,9 @@
   const { onClose, reactions } = props;
 
   const reactionsList = React.useMemo(() => {
-    const result = [];
-
-    for (const [reaction, reactionInfo] of reactions) {
-      reactionInfo.users.forEach(user => {
-        result.push({
-          ...user,
-          username: stringForUserExplicit(user),
-          reaction,
-        });
-      });
-    }
-
-    const sortedResult = _sortBy(
-      ([
-        (reactionInfo: MessageReactionListInfo) => {
-          const numOfReactions = reactions.get(reactionInfo.reaction)?.users
-            .length;
-
-          return numOfReactions ? -numOfReactions : 0;
-        },
-        'username',
-      ]: $ReadOnlyArray<
-        ((reactionInfo: MessageReactionListInfo) => mixed) | string,
-      >),
-    )(result);
+    const messageReactionsList = createMessageReactionsList(reactions);
 
-    return sortedResult.map(messageReactionUser => (
+    return messageReactionsList.map(messageReactionUser => (
       <div key={messageReactionUser.id} className={css.userRowContainer}>
         <div>{messageReactionUser.username}</div>
         <div>{messageReactionUser.reaction}</div>