diff --git a/web/chat/chat-message-list-container.react.js b/web/chat/chat-message-list-container.react.js
--- a/web/chat/chat-message-list-container.react.js
+++ b/web/chat/chat-message-list-container.react.js
@@ -28,10 +28,12 @@
 import ChatThreadComposer from './chat-thread-composer.react';
 import ThreadTopBar from './thread-top-bar.react';
 
-function ChatMessageListContainer(): React.Node {
-  const activeChatThreadID = useSelector(
-    state => state.navInfo.activeChatThreadID,
-  );
+type Props = {
+  +activeChatThreadID: string,
+};
+
+function ChatMessageListContainer(props: Props): React.Node {
+  const { activeChatThreadID } = props;
   const isChatCreation =
     useSelector(state => state.navInfo.chatMode) === 'create';
 
diff --git a/web/chat/chat.react.js b/web/chat/chat.react.js
--- a/web/chat/chat.react.js
+++ b/web/chat/chat.react.js
@@ -2,17 +2,34 @@
 
 import * as React from 'react';
 
+import { useSelector } from '../redux/redux-utils';
 import ChatMessageListContainer from './chat-message-list-container.react';
 import ChatTabs from './chat-tabs.react';
 import { ThreadListProvider } from './thread-list-provider';
 
 function Chat(): React.Node {
-  return (
-    <>
+  const activeChatThreadID = useSelector(
+    state => state.navInfo.activeChatThreadID,
+  );
+  const chatList = React.useMemo(
+    () => (
       <ThreadListProvider>
         <ChatTabs />
       </ThreadListProvider>
-      <ChatMessageListContainer />
+    ),
+    [],
+  );
+  const messageList = React.useMemo(() => {
+    if (!activeChatThreadID) {
+      return null;
+    }
+    return <ChatMessageListContainer activeChatThreadID={activeChatThreadID} />;
+  }, [activeChatThreadID]);
+
+  return (
+    <>
+      {chatList}
+      {messageList}
     </>
   );
 }