---
id: thread-list
title: ThreadList
---

`ThreadList` is a component that displays a list of threads where the current user is a participant (this user either started a thread, replied to a thread or was tagged in a thread). It handles pagination and virtualization through the help of the [virtualized list component](https://virtuoso.dev). The rest of the business logic (data manipulation) lives within [`ThreadManager`](https://github.com/GetStream/stream-chat-js/blob/master/src/thread.ts) and [`Thread`](https://github.com/GetStream/stream-chat-js/blob/master/src/thread_manager.ts) classes. Data represented through `ThreadList` are accessible from client instance (`client.threads.state`).

## Basic Usage

The `ThreadList` component requires to be rendered within `Chat` component but apart from that does not require any other context to work.

```tsx
import { Chat, ThreadList } from 'stream-chat-react';

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

For extended "out of the box" functionality `ThreadList` can be rendered within [`ChatView.Threads`](../utility-components/chat-view.mdx) component where individual items within the list become "selectable" through the `ThreadViewContext`. Selected/active thread can be then accessed from this context as well. See [`ChatView` documentation](../utility-components/chat-view.mdx) for extended functionality.

```tsx
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](https://virtuoso.dev/virtuoso-api/interfaces/VirtuosoProps).

| Type   |
| ------ |
| object |
