ThreadList

ThreadList displays threads where the current user participates (started, replied, or mentioned). It handles pagination and virtualization with Virtuoso. Business logic lives in ThreadManager and Thread on the client, and data is available at client.threads.state.

Best Practices

• Render ThreadList inside ChatView.Threads when selection is required.
• Rely on virtualization defaults unless you have large thread counts.
• Use thread data from client.threads.state for advanced custom UI.
• Keep thread item rendering lightweight for smooth scrolling.
• Test pagination with long histories to validate loading states.

Basic Usage

ThreadList must be rendered under Chat, but it doesn’t require other context.

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

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

For selection support, render ThreadList inside ChatView.Threads. Items become selectable via ThreadViewContext, and the active thread is exposed there. See the ChatView docs.

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

const SelectedThread = () => {
  const { activeThread } = useThreadsViewContext();

  return null;
};

<Chat client={client}>
  <ChatView>
    <ChatView.Selector />
    {/*...*/}
    <ChatView.Threads>
      <ThreadList />
      <SelectedThread />
    </ChatView.Threads>
  </ChatView>
</Chat>;

Props

virtuosoProps

Props to be passed to the underlying react-virtuoso virtualized list dependency.