# VirtualizedMessageListContext

> **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/).

`VirtualizedMessageListContext` gives the components inside a [`VirtualizedMessageList`](https://getstream.io/chat/docs/sdk/react/v15/component-reference/message-list/virtualizedmessagelist/) one function: scroll to the latest message. Read it with `useVirtualizedMessageListContext()`. [Message list UI](https://getstream.io/chat/docs/sdk/react/v15/ui/components/message-list-ui/) explains the list itself.

## Best practices

- Call `useVirtualizedMessageListContext()` only in a component that `VirtualizedMessageList` renders. It throws anywhere else, including inside `MessageList`.
- Scroll with `scrollToBottom()` rather than through the DOM. The list renders only the messages near the visible area, so most messages have no DOM node to scroll to.

## Basic usage

The `NewMessageNotification` override renders inside the list. This one is a button that takes the user to the latest message:

```tsx
import {
  useVirtualizedMessageListContext,
  VirtualizedMessageList,
  WithComponents,
} from "stream-chat-react";
import type { NewMessageNotificationProps } from "stream-chat-react";

const JumpToLatest = ({
  newMessageCount,
  showNotification,
}: NewMessageNotificationProps) => {
  const { scrollToBottom } = useVirtualizedMessageListContext();

  if (!showNotification) return null;

  return (
    <button className="jump-to-latest" onClick={scrollToBottom} type="button">
      {newMessageCount ? `${newMessageCount} new messages` : "New messages"}
    </button>
  );
};

const overrides = { NewMessageNotification: JumpToLatest };

export const LivestreamMessages = () => (
  <WithComponents overrides={overrides}>
    <VirtualizedMessageList />
  </WithComponents>
);
```

## Values

| Value            | Type         | Description                                                                                                                                            |
| ---------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `scrollToBottom` | `() => void` | Scrolls to the latest message and hides the new message notification. While the list shows an older interval, it jumps to the latest messages instead. |

## Related hooks

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

---

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