diff --git a/packages/mgt-chat/src/components/ChatList/ChatList.tsx b/packages/mgt-chat/src/components/ChatList/ChatList.tsx
index 026bf2375f..4e149888cc 100644
--- a/packages/mgt-chat/src/components/ChatList/ChatList.tsx
+++ b/packages/mgt-chat/src/components/ChatList/ChatList.tsx
@@ -115,11 +115,62 @@ export const ChatList = ({
   const [chatListState, setChatListState] = useState<GraphChatListClient | undefined>();
 
   useEffect(() => {
-    chatListClient.onStateChange(setChatListState);
+    const handleStateChange = (newState: GraphChatListClient | undefined) => {
+      setChatListState(newState);
+
+      if (!newState) {
+        return;
+      }
+
+      // handle state changes
+      if (newState.status === 'chat message received' && onMessageReceived && newState.chatMessage) {
+        onMessageReceived(newState.chatMessage);
+      }
+
+      if (newState.status === 'chat selected' && onSelected && newState.internalSelectedChat) {
+        onSelected(newState.internalSelectedChat);
+      }
+
+      if (newState.status === 'chat unselected' && onUnselected && newState.internalPrevSelectedChat) {
+        onUnselected(newState.internalPrevSelectedChat);
+      }
+
+      if (newState.status === 'chats read' && onAllMessagesRead && newState.chatThreads) {
+        onAllMessagesRead(newState.chatThreads.map(c => c.id!));
+      }
+
+      if (newState.status === 'chats loaded' && onLoaded) {
+        onLoaded(newState?.chatThreads ?? []);
+      }
+
+      if (
+        newState.status === 'chats loaded' &&
+        newState.fireOnSelected &&
+        onSelected &&
+        newState.internalSelectedChat
+      ) {
+        onSelected(newState.internalSelectedChat);
+      }
+
+      if (newState.status === 'no chats' && onLoaded) {
+        onLoaded([]);
+      }
+
+      if (newState.status === 'server connection established' && onConnectionChanged) {
+        onConnectionChanged(true);
+        void chatListClient.tryLoadChatThreads().catch(e => chatListClient.raiseFatalError(e as Error));
+      }
+
+      if (newState.status === 'server connection lost' && onConnectionChanged) {
+        onConnectionChanged(false);
+      }
+    };
+
+    chatListClient.onStateChange(handleStateChange);
     return () => {
-      chatListClient.offStateChange(setChatListState);
+      chatListClient.offStateChange(handleStateChange);
     };
-  }, [chatListClient]);
+  }, [chatListClient, onLoaded, onMessageReceived, onSelected, onUnselected, onAllMessagesRead, onConnectionChanged]);
 
   useEffect(() => {
     if (chatThreadsPerPage < 1) {
@@ -167,64 +218,6 @@ export const ChatList = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [chatListClient, lastReadTimeInterval]); // initialLastReadTimeInterval is used to ensure we only set interval once.
 
-  useEffect(() => {
-    if (!chatListState) {
-      return;
-    }
-
-    // handle state changes
-    if (chatListState.status === 'chat message received' && onMessageReceived && chatListState.chatMessage) {
-      onMessageReceived(chatListState.chatMessage);
-    }
-
-    if (chatListState.status === 'chat selected' && onSelected && chatListState.internalSelectedChat) {
-      onSelected(chatListState.internalSelectedChat);
-    }
-
-    if (chatListState.status === 'chat unselected' && onUnselected && chatListState.internalPrevSelectedChat) {
-      onUnselected(chatListState.internalPrevSelectedChat);
-    }
-
-    if (chatListState.status === 'chats read' && onAllMessagesRead && chatListState.chatThreads) {
-      onAllMessagesRead(chatListState.chatThreads.map(c => c.id!));
-    }
-
-    if (chatListState.status === 'chats loaded' && onLoaded) {
-      onLoaded(chatListState?.chatThreads ?? []);
-    }
-
-    if (
-      chatListState.status === 'chats loaded' &&
-      chatListState.fireOnSelected &&
-      onSelected &&
-      chatListState.internalSelectedChat
-    ) {
-      onSelected(chatListState.internalSelectedChat);
-    }
-
-    if (chatListState.status === 'no chats' && onLoaded) {
-      onLoaded([]);
-    }
-
-    if (chatListState.status === 'server connection established' && onConnectionChanged) {
-      onConnectionChanged(true);
-      void chatListClient.tryLoadChatThreads().catch(e => chatListClient.raiseFatalError(e as Error));
-    }
-
-    if (chatListState.status === 'server connection lost' && onConnectionChanged) {
-      onConnectionChanged(false);
-    }
-  }, [
-    chatListClient,
-    chatListState,
-    onLoaded,
-    onMessageReceived,
-    onSelected,
-    onUnselected,
-    onAllMessagesRead,
-    onConnectionChanged
-  ]);
-
   // this only runs once when the component is unmounted
   useEffect(() => {
     // tear down
diff --git a/packages/mgt-chat/src/statefulClient/StatefulGraphChatListClient.ts b/packages/mgt-chat/src/statefulClient/StatefulGraphChatListClient.ts
index 27cee7f1dd..8c73d755f2 100644
--- a/packages/mgt-chat/src/statefulClient/StatefulGraphChatListClient.ts
+++ b/packages/mgt-chat/src/statefulClient/StatefulGraphChatListClient.ts
@@ -184,7 +184,7 @@ class StatefulGraphChatListClient implements StatefulClient<GraphChatListClient>
   private readonly _eventEmitter: ThreadEventEmitter;
   private readonly _cache: LastReadCache;
   private readonly _graph: IGraph;
-  private _stateSubscribers: ((state: GraphChatListClient) => void)[] = [];
+  private readonly _stateSubscribers: ((state: GraphChatListClient) => void)[] = [];
   private _initialSelectedChatId: string | undefined;
   private _loadPromise: Promise<void> | undefined;
   private _loadMorePromise: Promise<void> | undefined;
@@ -521,7 +521,7 @@ class StatefulGraphChatListClient implements StatefulClient<GraphChatListClient>
   public offStateChange(handler: (state: GraphChatListClient) => void): void {
     const index = this._stateSubscribers.indexOf(handler);
     if (index !== -1) {
-      this._stateSubscribers = this._stateSubscribers.splice(index, 1);
+      this._stateSubscribers.splice(index, 1);
     }
   }