ThreadList

ThreadList renders the current user's threads and keeps them in sync with client.threads.state.

Best Practices

• Render ThreadList inside ChatView.Threads when your app needs thread selection.
• Keep custom thread rows lightweight because the list is virtualized with react-virtuoso.
• Use ThreadListItem and ThreadListItemUI instead of rebuilding thread item state by hand.
• Let the SDK manage thread activation and deactivation through ChatView.ThreadAdapter or useActiveThread.
• Test the list on smaller screens where sidebar open/close behavior matters.

Basic Usage

ThreadList must be rendered under Chat, but it does not require Channel.

import { Chat, ThreadList } from "stream-chat-react";

<Chat client={client}>
  <ThreadList />
</Chat>;

The default list includes:

• ThreadListHeader
• ThreadListUnseenThreadsBanner
• a virtualized list of ThreadListItem
• ThreadListLoadingIndicator and ThreadListEmptyPlaceholder

Selection With ChatView

When you render ThreadList inside ChatView.Threads, the list can use ThreadsViewContext for selection. Pair it with ChatView.ThreadAdapter to render the selected thread:

import { Chat, ChatView, Thread, ThreadList } from "stream-chat-react";

const App = () => (
  <Chat client={client}>
    <ChatView>
      <ChatView.Selector iconOnly={false} />
      <ChatView.Threads>
        <ThreadList />
        <ChatView.ThreadAdapter>
          <Thread />
        </ChatView.ThreadAdapter>
      </ChatView.Threads>
    </ChatView>
  </Chat>
);

ChatView.ThreadAdapter now renders an empty-state placeholder once the thread manager is ready and no thread is selected, instead of staying blank. If you want to keep the older blank panel behavior, provide EmptyStateIndicator={() => null} through WithComponents or manage ThreadProvider yourself with useThreadsViewContext().

Props