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
@@ -34,7 +34,7 @@
   }, [reactions]);
 }
 
-type MessageReactionListInfo = {
+export type MessageReactionListInfo = {
   +id: string,
   +isViewer: boolean,
   +reaction: string,
diff --git a/web/modals/chat/message-reactions-list-item.react.js b/web/modals/chat/message-reactions-list-item.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/chat/message-reactions-list-item.react.js
@@ -0,0 +1,37 @@
+// @flow
+
+import * as React from 'react';
+
+import { type MessageReactionListInfo } from 'lib/shared/reaction-utils.js';
+
+import css from './message-reactions-modal.css';
+import UserAvatar from '../../avatars/user-avatar.react.js';
+
+type Props = {
+  +messageReactionUser: MessageReactionListInfo,
+};
+
+function MessageReactionsListItem(props: Props): React.Node {
+  const { messageReactionUser } = props;
+
+  const messageReactionsListItem = React.useMemo(
+    () => (
+      <div className={css.userRowContainer}>
+        <div className={css.userInfoContainer}>
+          <UserAvatar size="S" userID={messageReactionUser.id} />
+          <div className={css.username}>{messageReactionUser.username}</div>
+        </div>
+        <div>{messageReactionUser.reaction}</div>
+      </div>
+    ),
+    [
+      messageReactionUser.id,
+      messageReactionUser.reaction,
+      messageReactionUser.username,
+    ],
+  );
+
+  return messageReactionsListItem;
+}
+
+export default MessageReactionsListItem;
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
@@ -5,8 +5,8 @@
 import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';
 import { useMessageReactionsList } from 'lib/shared/reaction-utils.js';
 
+import MessageReactionsListItem from './message-reactions-list-item.react.js';
 import css from './message-reactions-modal.css';
-import UserAvatar from '../../avatars/user-avatar.react.js';
 import Modal from '../modal.react.js';
 
 type Props = {
@@ -22,13 +22,10 @@
   const reactionsList = React.useMemo(
     () =>
       messageReactionsList.map(messageReactionUser => (
-        <div key={messageReactionUser.id} className={css.userRowContainer}>
-          <div className={css.userInfoContainer}>
-            <UserAvatar size="S" userID={messageReactionUser.id} />
-            <div className={css.username}>{messageReactionUser.username}</div>
-          </div>
-          <div>{messageReactionUser.reaction}</div>
-        </div>
+        <MessageReactionsListItem
+          key={messageReactionUser.id}
+          messageReactionUser={messageReactionUser}
+        />
       )),
     [messageReactionsList],
   );