# Thread List

The thread list contains the user's most recent threads.

## Initialization

Call `registerSubscriptions()` once, so the list and its threads get their events. Call `activate()` when the list is on screen and `deactivate()` when it leaves.

```js label="JavaScript"
client.threads.registerSubscriptions();

// When the list is on screen
client.threads.activate();

// When the list leaves the screen
client.threads.deactivate();
```

## Reading

```js label="JavaScript"
// The thread list
const { items: threads, isLoading } =
  client.threads.paginator.state.getLatestValue();

// Unread threads
const { unreadThreadCount } = client.threads.state.getLatestValue();
```

Subscribe to render changes:

```js label="JavaScript"
const unsubscribe = client.threads.paginator.state.subscribeWithSelector(
  ({ items }) => ({ items }),
  ({ items }) => renderThreadList(items),
);
```

## Loading more threads

`toTail()` loads the next page into `items`. `hasMoreTail` tells you whether there are more to load. A page is 25 threads, and `toTail()` does nothing until `activate()` has loaded the first one.

```js label="JavaScript"
const { hasMoreTail } = client.threads.paginator.state.getLatestValue();

if (hasMoreTail) {
  await client.threads.paginator.toTail();
}
```

## Configure the query

The thread list always holds the user's threads in the server's order: unread threads first, then by latest reply. Each thread comes with up to 10 participants and its 10 latest replies. You can change the page size, 25 threads by default. Set it before `activate()` loads the first page.

```js label="JavaScript"
client.threads.paginator.updateConfig({ pageSize: 10 });
```

## WebSocket events

Threads in the list update from WebSocket events: new replies, reactions, read state and thread updates. `unreadThreadCount` updates too.

The list itself doesn't reorder or grow on its own. A reply to a listed thread sets `isThreadOrderStale`, and a reply to a thread that isn't in the list adds it to `unseenThreadIds`. Show a prompt, and call `reload()` to apply the changes:

```js label="JavaScript"
const unsubscribeBanner = client.threads.state.subscribeWithSelector(
  ({ isThreadOrderStale, unseenThreadIds }) => ({
    isThreadOrderStale,
    unseenThreadIds,
  }),
  ({ isThreadOrderStale, unseenThreadIds }) =>
    renderReloadPrompt(isThreadOrderStale || unseenThreadIds.length > 0),
);

// When the user taps the prompt
await client.threads.reload();
```

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/javascript/state-thread-list/](https://getstream.io/chat/docs/javascript/state-thread-list/).