# VirtualizedMessageListContext

The context value is provided by `VirtualizedMessageListContextProvider`, which wraps the content rendered by [`VirtualizedMessageList`](/chat/docs/sdk/react/v13/components/core-components/message_list/). It exposes API used by default and custom components. Components that can consume `VirtualizedMessageListContext` include:

- `EmptyStateIndicator` - rendered when there are no messages in the channel. The [`component can be customized`](/chat/docs/sdk/react/v13/components/contexts/component_context#emptystateindicator/).
- `LoadingIndicator` - rendered while loading more messages to the channel. The [`component can be customized`](/chat/docs/sdk/react/v13/components/contexts/component_context#loadingindicator/).
- `MessageListNotifications` - component rendering application notifications. The [`component can be customized`](/chat/docs/sdk/react/v13/components/contexts/component_context#messagelistnotifications/).
- `MessageNotification` - component used to display a single notification message in `MessageListNotifications`. The [`component can be customized`](/chat/docs/sdk/react/v13/components/contexts/component_context#messagenotification/).
- `TypingIndicator` - component indicating that another user is typing a message in a given channel. The [`component can be customized`](/chat/docs/sdk/react/v13/components/contexts/component_context#typingindicator/).
- `Message` and its children - component that renders a message. The [`component can be customized`](/chat/docs/sdk/react/v13/components/contexts/component_context#message/).
- `DateSeparator` - component rendered to separate messages posted on different dates. The [`component can be customized`](/chat/docs/sdk/react/v13/components/contexts/component_context#dateseparator/).
- `MessageSystem` - component to display system messages in the message list. The [`component can be customized`](/chat/docs/sdk/react/v13/components/contexts/component_context#messagesystem/).
- `HeaderComponent` - component to be displayed before the oldest message in the message list. The [`component can be customized`](/chat/docs/sdk/react/v13/components/contexts/component_context#headercomponent/).
- `UnreadMessagesNotification` - custom UI component that indicates a user is viewing unread messages. It disappears once the user scrolls to `UnreadMessagesSeparator`. The [`component can be customized`](/chat/docs/sdk/react/v13/components/contexts/component_context#unreadmessagesnotification/).
- `UnreadMessagesSeparator` - component to be displayed before the oldest message in the message list. The [`component can be customized`](/chat/docs/sdk/react/v13/components/contexts/component_context#unreadmessagesseparator/).

## Best Practices

- Use context helpers instead of directly manipulating virtualized DOM.
- Keep custom components compatible with virtualization constraints.
- Prefer lightweight notifications to avoid virtualized list jitter.
- Use `scrollToBottom` for UX flows like “new messages” buttons.
- Avoid measuring DOM nodes in list items when possible.

## Basic Usage

Pull the value from context with our custom hook:

```tsx
import { useVirtualizedMessageListContext } from "stream-chat-react";

export const CustomComponent = () => {
  const { scrollToBottom } = useVirtualizedMessageListContext();
  // component logic ...
  return {
    /* rendered elements */
  };
};
```

## Values

### scrollToBottom

Scrolls the list to the bottom.

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


---

This page was last updated at 2026-04-21T07:55:47.211Z.

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