# ChannelActionContext

`ChannelActionContext` is provided by [`Channel`](/chat/docs/sdk/react/components/core-components/channel/) and exposes action handlers for the active channel. Access it with `useChannelActionContext`.

## Best Practices

- Use context actions instead of calling client APIs directly to keep UI state in sync.
- Wrap action calls in user-initiated events to avoid accidental side effects.
- Prefer `jumpToFirstUnreadMessage`/`jumpToLatestMessage` for navigation to keep list state consistent.
- Treat `markRead` as the single source of read-state updates to avoid double-counting.
- Debounce or throttle custom action triggers to prevent rapid re-queries.

## Basic Usage

Pull values from `ChannelActionContext` with our custom hook:

```tsx
const { closeThread, loadMoreThread } = useChannelActionContext();
```

## Values

| Value                      | Description                                                                                                                                                              | Type                                                                                                |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- |
| `addNotification`          | Adds a temporary notification to `MessageList`, removed after about five seconds.                                                                                        | `(text: string, type: 'success' \| 'error') => void`                                                |
| `closeThread`              | Closes the currently open `Thread`.                                                                                                                                      | `(event?: React.BaseSyntheticEvent) => void`                                                        |
| `deleteMessage`            | Triggers the delete-message request.                                                                                                                                     | `(message: LocalMessage, options?: DeleteMessageOptions) => Promise<void>`                          |
| `dispatch`                 | Dispatch function for the [`ChannelStateReducer`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Channel/channelState.ts).                    | `ChannelStateReducerAction`                                                                         |
| `editMessage`              | Starts editing a message and returns a promise.                                                                                                                          | `(message: UpdatedMessage) => Promise<UpdateMessageAPIResponse>`                                    |
| `jumpToFirstUnreadMessage` | Jumps to the first unread message. If not found locally, it can query around that message using `queryMessageLimit`. Falls back to the last read message when available. | `(queryMessageLimit?: number) => Promise<void>`                                                     |
| `jumpToLatestMessage`      | Restores the list to the most recent messages after `jumpToMessage`.                                                                                                     | `() => Promise<void>`                                                                               |
| `jumpToMessage`            | Scrolls to the message with the given `messageId`.                                                                                                                       | `(messageId: string) => Promise<void>`                                                              |
| `loadMore`                 | Loads the next page of messages.                                                                                                                                         | `(limit?: number) => Promise<number>`                                                               |
| `loadMoreNewer`            | Loads newer messages.                                                                                                                                                    | `(limit?: number) => Promise<number>`                                                               |
| `loadMoreThread`           | Loads the next page of thread messages.                                                                                                                                  | `(limit?: number) => Promise<number>`                                                               |
| `markRead`                 | Throttled function that marks the channel read and updates local state. Accepts optional `MarkReadWrapperOptions`; `updateChannelUiUnreadState` defaults to `true`.      | `(options?: MarkReadWrapperOptions) => void`                                                        |
| `onMentionsClick`          | Runs when an `@mention` is clicked and receives the DOM event plus the mentioned users.                                                                                  | `(event: React.BaseSyntheticEvent, user: UserResponse[]) => void`                                   |
| `onMentionsHover`          | Runs when an `@mention` is hovered and receives the DOM event plus the mentioned users.                                                                                  | `(event: React.BaseSyntheticEvent, user: UserResponse[]) => void`                                   |
| `openThread`               | Opens a thread for the parent message, optionally with the click event.                                                                                                  | `(message: LocalMessage, event?: React.BaseSyntheticEvent) => void`                                 |
| `removeMessage`            | Removes a message from `MessageList`.                                                                                                                                    | `(message: LocalMessage) => void`                                                                   |
| `retrySendMessage`         | Resends a message.                                                                                                                                                       | `(message: LocalMessage) => Promise<void>`                                                          |
| `sendMessage`              | Sends a message on `Channel`. Takes the message payload as the first argument and custom data as the second argument.                                                    | `(message: MessageToSend, customMessageData?: Partial<Message>) => Promise<SendMessageAPIResponse>` |
| `updateMessage`            | Updates a message on `Channel`.                                                                                                                                          | `(message: LocalMessage) => void`                                                                   |

## Examples

### Jump to a searched message

```tsx
const JumpToMessage = () => {
  const { jumpToMessage } = useChannelActionContext();
  return (
    <button
      onClick={async () => {
        // the filtering based on channelId is just for example purposes.
        const results = await chatClient.search(
          { id: { $eq: channelId } },
          "Message 29",
          { limit: 1, offset: 0 },
        );

        jumpToMessage(results.results[0].message.id);
      }}
    >
      Jump to message 29
    </button>
  );
};

// add the JumpToMessage to the component tree as a child of `Channel`
return (
  <Channel channel={channel}>
    <JumpToMessage />
    <Window>
      <MessageList />
    </Window>
  </Channel>
);
```


---

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

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