# MessageListContext

> **Info:** This is release candidate documentation for **Stream Chat React SDK v15**. For the latest stable version, see the [latest version (v14)](https://getstream.io/chat/docs/sdk/react/).

`MessageListContext` gives the components inside a [`MessageList`](https://getstream.io/chat/docs/sdk/react/v15/component-reference/message-list/messagelist/) the list's processed messages, its scroll container and a way to scroll it to the bottom. Read it with `useMessageListContext()`. [Message list UI](https://getstream.io/chat/docs/sdk/react/v15/ui/components/message-list-ui/) explains the list itself.

## Best practices

- Call `useMessageListContext()` only in a component that `MessageList` renders. It throws anywhere else, including inside `VirtualizedMessageList`, which has its own [context](https://getstream.io/chat/docs/sdk/react/v15/component-reference/message-list/virtualizedmessagelistcontext/).
- A component meant for both lists, such as a custom `MessageUI`, shouldn't call either context hook.
- Use `processedMessages` when you need the list as it renders, with date separators and the header among the messages. For the messages alone, read the paginator's `items`.
- Use `scrollToBottom()` rather than scrolling `listElement` yourself, so the list's own scroll handling stays in step.

## Basic usage

A custom `HeaderComponent` renders inside the list, so it can read the context. This one counts the loaded messages:

```tsx
import {
  isDateSeparatorMessage,
  isIntroMessage,
  MessageList,
  useMessageListContext,
  WithComponents,
} from "stream-chat-react";

const LoadedCount = () => {
  const { processedMessages } = useMessageListContext();
  const count = processedMessages.filter(
    (item) => !isDateSeparatorMessage(item) && !isIntroMessage(item),
  ).length;

  return <p className="loaded-count">{count} messages loaded</p>;
};

const overrides = { HeaderComponent: LoadedCount };

export const MessagesWithCount = () => (
  <WithComponents overrides={overrides}>
    <MessageList />
  </WithComponents>
);
```

## Components that commonly consume MessageListContext

No SDK component reads this context. It's there for the overrides `MessageList` renders, which sit inside it:

- `HeaderComponent`, `EmptyStateIndicator` and `LoadingIndicator`;
- the items: `MessageUI` and the parts of a message, `DateSeparator`, `MessageSystem`, `UnreadMessagesSeparator`, `ThreadHead`, `MessageListWrapper` and `MessageListItem`;
- the floating parts: `TypingIndicator`, `NewMessageNotification` and `UnreadMessagesNotification`.

`MessageListMainPanel` and the `NotificationList` sit outside it.

## Values

| Value               | Type                  | Description                                                                                                                                                                                                                                    |
| ------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `listElement`       | `HTMLElement \| null` | The scroll container that holds the messages and the typing indicator. `null` until it mounts.                                                                                                                                                 |
| `processedMessages` | `RenderedMessage[]`   | The items the list renders: the messages with the date separators and the header added, after `hideDeletedMessages` and `reviewProcessedMessage`.                                                                                              |
| `scrollToBottom`    | `() => void`          | Scrolls the container to the bottom. It does nothing while the list shows an older interval of messages, or with `suppressAutoscroll`. To get to the latest messages from an older interval, call `MessagePaginator.jumpToTheLatestMessage()`. |

## Related hooks

- `useMessageListContext()` returns the values above, and throws outside `MessageList`.
- `useVirtualizedMessageListContext()` is the counterpart for `VirtualizedMessageList`.

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v15/component-reference/message-list/messagelistcontext/](https://getstream.io/chat/docs/sdk/react/v15/component-reference/message-list/messagelistcontext/).