diff --git a/lib/shared/message-utils.js b/lib/shared/message-utils.js
--- a/lib/shared/message-utils.js
+++ b/lib/shared/message-utils.js
@@ -504,23 +504,29 @@
   +message: MessagePreviewPart,
   +username: ?MessagePreviewPart,
 };
-function getMessagePreview(
-  originalMessageInfo: MessageInfo,
+function useMessagePreview(
+  originalMessageInfo: ?MessageInfo,
   threadInfo: ThreadInfo,
   markdownRules: ParserRules,
-): MessagePreviewResult {
-  const messageInfo:
-    | ComposableMessageInfo
-    | RobotextMessageInfo
-    | ReactionMessageInfo =
+): ?MessagePreviewResult {
+  let messageInfo;
+  if (
+    originalMessageInfo &&
     originalMessageInfo.type === messageTypes.SIDEBAR_SOURCE
-      ? originalMessageInfo.sourceMessage
-      : originalMessageInfo;
+  ) {
+    messageInfo = originalMessageInfo.sourceMessage;
+  } else {
+    messageInfo = originalMessageInfo;
+  }
 
   const hasUsername =
     threadIsGroupChat(threadInfo) ||
     threadInfo.name !== '' ||
-    messageInfo.creator.isViewer;
+    messageInfo?.creator.isViewer;
+
+  if (!messageInfo) {
+    return messageInfo;
+  }
 
   let username = null;
   if (messageInfo.type === messageTypes.TEXT && hasUsername) {
@@ -572,5 +578,5 @@
   getMessageTitle,
   removeCreatorAsViewer,
   mergeThreadMessageInfos,
-  getMessagePreview,
+  useMessagePreview,
 };
diff --git a/native/chat/message-preview.react.js b/native/chat/message-preview.react.js
--- a/native/chat/message-preview.react.js
+++ b/native/chat/message-preview.react.js
@@ -4,7 +4,7 @@
 import * as React from 'react';
 import { Text } from 'react-native';
 
-import { getMessagePreview } from 'lib/shared/message-utils';
+import { useMessagePreview } from 'lib/shared/message-utils';
 import { type MessageInfo } from 'lib/types/message-types';
 import { type ThreadInfo } from 'lib/types/thread-types';
 
@@ -18,11 +18,16 @@
 };
 function MessagePreview(props: Props): React.Node {
   const { messageInfo, threadInfo } = props;
-  const { message, username } = getMessagePreview(
+  const messagePreviewResult = useMessagePreview(
     messageInfo,
     threadInfo,
     getDefaultTextMessageRules().simpleMarkdownRules,
   );
+  invariant(
+    messagePreviewResult,
+    'useMessagePreview should only return falsey if pass null or undefined',
+  );
+  const { message, username } = messagePreviewResult;
 
   let messageStyle;
   const styles = useStyles(unboundStyles);
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
@@ -4,7 +4,7 @@
 import invariant from 'invariant';
 import * as React from 'react';
 
-import { getMessagePreview } from 'lib/shared/message-utils';
+import { useMessagePreview } from 'lib/shared/message-utils';
 import { type MessageInfo } from 'lib/types/message-types';
 import { type ThreadInfo } from 'lib/types/thread-types';
 
@@ -17,6 +17,11 @@
 };
 function MessagePreview(props: Props): React.Node {
   const { messageInfo, threadInfo } = props;
+  const messagePreviewResult = useMessagePreview(
+    messageInfo,
+    threadInfo,
+    getDefaultTextMessageRules().simpleMarkdownRules,
+  );
 
   if (!messageInfo) {
     return (
@@ -25,12 +30,11 @@
       </div>
     );
   }
-
-  const { message, username } = getMessagePreview(
-    messageInfo,
-    threadInfo,
-    getDefaultTextMessageRules().simpleMarkdownRules,
+  invariant(
+    messagePreviewResult,
+    'useMessagePreview should only return falsey if pass null or undefined',
   );
+  const { message, username } = messagePreviewResult;
 
   let usernameText = null;
   if (username) {
diff --git a/web/modals/threads/sidebars/sidebar.react.js b/web/modals/threads/sidebars/sidebar.react.js
--- a/web/modals/threads/sidebars/sidebar.react.js
+++ b/web/modals/threads/sidebars/sidebar.react.js
@@ -4,7 +4,7 @@
 
 import { useModalContext } from 'lib/components/modal-provider.react';
 import type { ChatThreadItem } from 'lib/selectors/chat-selectors';
-import { getMessagePreview } from 'lib/shared/message-utils';
+import { useMessagePreview } from 'lib/shared/message-utils';
 import { shortAbsoluteDate } from 'lib/utils/date-utils';
 
 import Button from '../../../components/button.react';
@@ -43,15 +43,17 @@
     lastUpdatedTime,
   ]);
 
+  const messagePreviewResult = useMessagePreview(
+    mostRecentMessageInfo,
+    threadInfo,
+    getDefaultTextMessageRules().simpleMarkdownRules,
+  );
+
   const lastMessage = React.useMemo(() => {
-    if (!mostRecentMessageInfo) {
+    if (!messagePreviewResult) {
       return <div className={css.noMessage}>No messages</div>;
     }
-    const { message, username } = getMessagePreview(
-      mostRecentMessageInfo,
-      threadInfo,
-      getDefaultTextMessageRules().simpleMarkdownRules,
-    );
+    const { message, username } = messagePreviewResult;
     const previewText = username
       ? `${username.text}: ${message.text}`
       : message.text;
@@ -61,7 +63,7 @@
         <div className={css.lastActivity}>{lastActivity}</div>
       </>
     );
-  }, [lastActivity, mostRecentMessageInfo, threadInfo]);
+  }, [lastActivity, messagePreviewResult]);
 
   return (
     <Button className={css.sidebarContainer} onClick={onClickThread}>
diff --git a/web/modals/threads/subchannels/subchannel.react.js b/web/modals/threads/subchannels/subchannel.react.js
--- a/web/modals/threads/subchannels/subchannel.react.js
+++ b/web/modals/threads/subchannels/subchannel.react.js
@@ -5,7 +5,7 @@
 
 import { useModalContext } from 'lib/components/modal-provider.react';
 import { type ChatThreadItem } from 'lib/selectors/chat-selectors';
-import { getMessagePreview } from 'lib/shared/message-utils';
+import { useMessagePreview } from 'lib/shared/message-utils';
 import { shortAbsoluteDate } from 'lib/utils/date-utils';
 
 import Button from '../../../components/button.react';
@@ -50,15 +50,17 @@
     [lastUpdatedTimeIncludingSidebars],
   );
 
+  const messagePreviewResult = useMessagePreview(
+    mostRecentMessageInfo,
+    threadInfo,
+    getDefaultTextMessageRules().simpleMarkdownRules,
+  );
+
   const lastMessage = React.useMemo(() => {
-    if (!mostRecentMessageInfo) {
+    if (!messagePreviewResult) {
       return <div className={css.noMessage}>No messages</div>;
     }
-    const { message, username } = getMessagePreview(
-      mostRecentMessageInfo,
-      threadInfo,
-      getDefaultTextMessageRules().simpleMarkdownRules,
-    );
+    const { message, username } = messagePreviewResult;
     const previewText = username
       ? `${username.text}: ${message.text}`
       : message.text;
@@ -68,7 +70,7 @@
         <div className={css.lastActivity}>{lastActivity}</div>
       </>
     );
-  }, [lastActivity, mostRecentMessageInfo, threadInfo]);
+  }, [lastActivity, messagePreviewResult]);
 
   return (
     <Button className={css.subchannelContainer} onClick={onClickThread}>