# Channel

Each channel is a singleton, with its reactive data on `channel.state`.

## Initialization

`client.channel()` returns the existing instance or creates it, and `channel.watch()` loads its state.

```js label="JavaScript"
const channel = client.channel("messaging", channelId);
await channel.watch();
```

To load several channels at once, use `client.queryChannelsAndHydrate()`. It watches the returned channels and loads their state, the same as `channel.watch()`.

```js label="JavaScript"
const channels = await client.queryChannelsAndHydrate({
  filter_conditions: { type: "messaging", members: { $in: [userId] } },
  sort: [{ field: "last_message_at", direction: -1 }],
  limit: 15,
});

// The same instances `client.channel()` returns
const [firstChannel] = channels;
```

## Reading

```js label="JavaScript"
// Channel data, members, my membership and permissions, typing, read state, mute
const {
  data,
  members,
  memberCount,
  membership,
  ownCapabilities,
  typing,
  read,
  muteStatus,
} = channel.state.getLatestValue();

// My unread count (derived from `read`)
const unreadCount = channel.state.unreadCount;

// Slow mode wait, in seconds
const { cooldownRemaining } = channel.cooldownTimer.state.getLatestValue();

// Channel config from the server
const config = channel.serverConfig;
```

Subscribe to render changes:

```js label="JavaScript"
const unsubscribe = channel.state.subscribeWithSelector(
  ({ read, members }) => ({ read, members }),
  ({ read, members }) => renderHeader(read, members),
);
```

## Read receipts

Pass the message id and its `created_at` timestamp. Subscribe to `snapshotStore` to re-render when receipts change.

```js label="JavaScript"
const readers = channel.messageReceiptsTracker.readersForMessage({
  msgId: message.id,
  timestamp: message.created_at,
});

const unsubscribeReceipts =
  channel.messageReceiptsTracker.snapshotStore.subscribe(() => {
    renderReceipts(
      channel.messageReceiptsTracker.readersForMessage({
        msgId: message.id,
        timestamp: message.created_at,
      }),
    );
  });
```

## Active channel

Only active channels are refreshed after a reconnect (unless you're using `ChannelPaginator` too):

```js label="JavaScript"
// While the channel is on screen
const release = channel.activate();

// When the channel leaves the screen
release();
```

---

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