# ChatContext

`ChatContext` is provided by the [`Chat`](/chat/docs/sdk/react/v13/components/core-components/chat/) component. All SDK components under `Chat` can access it via the `useChatContext` hook.

## Best Practices

- Access context only inside children of `Chat` to avoid null/undefined values.
- Prefer `setActiveChannel` over manual prop wiring when switching channels.
- Use `channelsQueryState` to drive loading and error UI consistently.
- Keep context consumers narrow to avoid unnecessary re-renders.
- Treat `customClasses` and `theme` as read-only configuration in context consumers.

## Basic Usage

Pull values from `ChatContext` with our custom hook:

```tsx
const { client, setActiveChannel } = useChatContext();
```

## Values

### client

The value is forwarded to the context from the `Chat` component [prop `client`](/chat/docs/sdk/react/v13/components/core-components/chat#client/).

| Type         |
| ------------ |
| `StreamChat` |

### channel

The currently active channel, which powers the [`Channel`](/chat/docs/sdk/react/v13/components/core-components/channel/) component.

| Type    |
| ------- |
| Channel |

### channelsQueryState

Exposes API that:

- indicates which channel query is in progress in [`ChannelList`](/chat/docs/sdk/react/v13/components/core-components/channel_list/) via `queryInProgress`
- allows updates via `setQueryInProgress`
- tracks query errors via `error`
- allows updates via `setError`

`queryInProgress` values:

- `uninitialized` - before the first query
- `reload` - initial page load in progress
- `load-more` - loading the next page
- `null` - no query in progress after at least one page loaded

| Type                 |
| -------------------- |
| `ChannelsQueryState` |

### closeMobileNav

Closes the mobile navigation.

| Type         |
| ------------ |
| `() => void` |

### customClasses

Forwarded from the `Chat` [prop `customClasses`](/chat/docs/sdk/react/v13/components/core-components/chat#customclasses/).

| Type            |
| --------------- |
| `CustomClasses` |

### getAppSettings

Callback to fetch app settings (includes image and file upload config).

| Type                                    |
| --------------------------------------- |
| `() => Promise<AppSettingsAPIResponse>` |

### latestMessageDatesByChannel

Map of channel IDs to the date of the user’s latest message. Used to determine slow mode countdown.

| Type                      |
| ------------------------- |
| `{ [key: string]: Date }` |

### mutes

Users muted by the connected user.

| Type   |
| ------ |
| Mute[] |

### navOpen

Whether the mobile nav is open at mobile breakpoints.

| Type    | Default |
| ------- | ------- |
| boolean | true    |

### openMobileNav

Opens the mobile navigation.

| Type         |
| ------------ |
| `() => void` |

### setActiveChannel

Sets the active channel. Used by `ChannelList` to switch channels, and can be overridden via context.

| Type                                                                             |
| -------------------------------------------------------------------------------- |
| `(newChannel?: Channel, watchers?: { limit?: number; offset?: number }) => void` |

### theme

Forwarded from the `Chat` [prop `theme`](/chat/docs/sdk/react/v13/components/core-components/chat#theme/).

| Type   |
| ------ |
| string |

### useImageFlagEmojisOnWindow

Forwarded from the `Chat` [prop `useImageFlagEmojisOnWindows`](/chat/docs/sdk/react/v13/components/core-components/chat#useimageflagemojisonwindows/).

| Type    | Default |
| ------- | ------- |
| boolean | false   |


---

This page was last updated at 2026-04-21T09:53:40.356Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v13/components/contexts/chat_context/](https://getstream.io/chat/docs/sdk/react/v13/components/contexts/chat_context/).