diff --git a/lib/hooks/message-preview.js b/lib/hooks/message-preview.js
new file mode 100644
--- /dev/null
+++ b/lib/hooks/message-preview.js
@@ -0,0 +1,49 @@
+// @flow
+
+import type { ParserRules } from '../shared/markdown';
+import { getMessageTitle } from '../shared/message-utils';
+import { threadIsGroupChat } from '../shared/thread-utils';
+import { stringForUser } from '../shared/user-utils';
+import type {
+  ComposableMessageInfo,
+  MessageInfo,
+  RobotextMessageInfo,
+} from '../types/message-types';
+import { messageTypes } from '../types/message-types';
+import type { ThreadInfo } from '../types/thread-types';
+
+type UseMessagePreviewResult = {
+  +message: string,
+  +username: ?string,
+};
+
+function useMessagePreview(
+  originalMessageInfo: ?MessageInfo,
+  threadInfo: ThreadInfo,
+  markdownRules: ParserRules,
+): UseMessagePreviewResult {
+  if (!originalMessageInfo) {
+    return { message: '', username: null };
+  }
+
+  const messageInfo: ComposableMessageInfo | RobotextMessageInfo =
+    originalMessageInfo.type === messageTypes.SIDEBAR_SOURCE
+      ? originalMessageInfo.sourceMessage
+      : originalMessageInfo;
+
+  const messageTitle = getMessageTitle(messageInfo, threadInfo, markdownRules);
+
+  const hasUsername =
+    threadIsGroupChat(threadInfo) ||
+    threadInfo.name !== '' ||
+    messageInfo.creator.isViewer;
+
+  let userString = null;
+  if (messageInfo.type === messageTypes.TEXT && hasUsername) {
+    userString = stringForUser(messageInfo.creator);
+  }
+
+  return { message: messageTitle, username: userString };
+}
+
+export { useMessagePreview };
diff --git a/web/chat/message-preview.react.js b/web/chat/message-preview.react.js
--- a/web/chat/message-preview.react.js
+++ b/web/chat/message-preview.react.js
@@ -3,15 +3,8 @@
 import classNames from 'classnames';
 import * as React from 'react';
 
-import { getMessageTitle } from 'lib/shared/message-utils';
-import { threadIsGroupChat } from 'lib/shared/thread-utils';
-import { stringForUser } from 'lib/shared/user-utils';
-import {
-  type MessageInfo,
-  messageTypes,
-  type ComposableMessageInfo,
-  type RobotextMessageInfo,
-} from 'lib/types/message-types';
+import { useMessagePreview } from 'lib/hooks/message-preview';
+import { type MessageInfo } from 'lib/types/message-types';
 import { type ThreadInfo } from 'lib/types/thread-types';
 
 import { getDefaultTextMessageRules } from '../markdown/rules.react';
@@ -30,6 +23,12 @@
     },
   } = props;
 
+  const { message: messageTitle, username } = useMessagePreview(
+    originalMessageInfo,
+    threadInfo,
+    getDefaultTextMessageRules().simpleMarkdownRules,
+  );
+
   const colorStyle = unread ? css.unread : css.read;
   if (!originalMessageInfo) {
     return (
@@ -38,26 +37,10 @@
       </div>
     );
   }
-  const messageInfo: ComposableMessageInfo | RobotextMessageInfo =
-    originalMessageInfo.type === messageTypes.SIDEBAR_SOURCE
-      ? originalMessageInfo.sourceMessage
-      : originalMessageInfo;
-
-  const messageTitle = getMessageTitle(
-    messageInfo,
-    threadInfo,
-    getDefaultTextMessageRules().simpleMarkdownRules,
-  );
-
-  const hasUsername =
-    threadIsGroupChat(threadInfo) ||
-    threadInfo.name !== '' ||
-    messageInfo.creator.isViewer;
 
   let usernameText = null;
-  if (messageInfo.type === messageTypes.TEXT && hasUsername) {
-    const userString = stringForUser(messageInfo.creator);
-    usernameText = <span className={colorStyle}>{`${userString}: `}</span>;
+  if (username) {
+    usernameText = <span className={colorStyle}>{`${username}: `}</span>;
   }
 
   return (