# ChatContext

`ChatContext` is provided by the [`Chat`](/chat/docs/sdk/react/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

| Value                          | Description                                                                                                                                                                                        | Type                                                                             |
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
| `channel`                      | The currently active channel, which powers the [`Channel`](/chat/docs/sdk/react/components/core-components/channel/) component.                                                                    | `Channel`                                                                        |
| `channelsQueryState`           | Exposes channel-list query state and setters through `queryInProgress`, `setQueryInProgress`, `error`, and `setError`. `queryInProgress` can be `uninitialized`, `reload`, `load-more`, or `null`. | `ChannelsQueryState`                                                             |
| `client`                       | Forwarded from the `Chat` component [prop `client`](/chat/docs/sdk/react/components/core-components/chat#client/).                                                                                 | `StreamChat`                                                                     |
| `customClasses`                | Forwarded from the `Chat` [prop `customClasses`](/chat/docs/sdk/react/components/core-components/chat#customclasses/).                                                                             | `CustomClasses`                                                                  |
| `getAppSettings`               | Callback to fetch app settings, including image and file upload config.                                                                                                                            | `() => Promise<AppSettingsAPIResponse>`                                          |
| `latestMessageDatesByChannels` | Map of channel IDs to the date of the user’s latest message. Used to determine slow mode countdown.                                                                                                | `{ [key: string]: Date }`                                                        |
| `mutes`                        | Users muted by the connected user.                                                                                                                                                                 | `Mute[]`                                                                         |
| `searchController`             | Shared `SearchController` instance used by the SDK search surfaces.                                                                                                                                | `SearchController`                                                               |
| `setActiveChannel`             | Sets the active channel. Used by `ChannelList` to switch channels, and can be overridden via context.                                                                                              | `(newChannel?: Channel, watchers?: { limit?: number; offset?: number }) => void` |
| `theme`                        | Forwarded from the `Chat` [prop `theme`](/chat/docs/sdk/react/components/core-components/chat#theme/).                                                                                             | `string`                                                                         |
| `useImageFlagEmojisOnWindows`  | Forwarded from the `Chat` [prop `useImageFlagEmojisOnWindows`](/chat/docs/sdk/react/components/core-components/chat#useimageflagemojisonwindows/). Defaults to `false`.                            | `boolean`                                                                        |


---

This page was last updated at 2026-05-22T16:32:13.370Z.

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