VirtualizedMessageList

VirtualizedMessageList renders channel messages in a virtualized list. It is optimized for high-volume or long-lived channels by keeping only the visible items in the DOM.

Like MessageList, it reads messages from ChannelStateContext by default and renders unread and notification UI around the list.

Best Practices

• Prefer VirtualizedMessageList for high-traffic channels or long histories.
• Set defaultItemHeight or additionalVirtuosoProps.defaultItemHeight if the first rendered item is much taller than the average message.
• Keep custom renderers lightweight to preserve virtualization gains.
• Use the list-level Message prop or WithComponents for message UI, not Channel Message={...}.
• Test unread notifications, separators, and grouping with virtualization enabled.

Basic Usage

import {
  Channel,
  ChannelHeader,
  MessageInput,
  VirtualizedMessageList,
  Window,
} from "stream-chat-react";

const App = () => (
  <Channel>
    <Window>
      <ChannelHeader />
      <VirtualizedMessageList />
      <MessageInput />
    </Window>
  </Channel>
);

If you need to override the rendered message array:

<VirtualizedMessageList messages={customMessages} />

Scroll Behavior

The list estimates total height from the first rendered item unless you provide a default item height. If the newest message is unusually tall, set a more representative height:

<VirtualizedMessageList defaultItemHeight={76} />

Notifications And Unread UI

The virtualized list uses the same unread and notification split as MessageList:

• UnreadMessagesNotification
• NewMessageNotification
• ScrollToLatestMessageButton
• MessageListNotifications

MessageListNotifications renders notifications and connection state. The new-message and scroll buttons are separate components.

Props

VirtualizedMessageList forwards the same message-level props as MessageList, including:

• additionalMessageInputProps
• closeReactionSelectorOnClick
• disableQuotedMessages
• formatDate
• getDeleteMessageErrorNotification
• getFlagMessageErrorNotification
• getFlagMessageSuccessNotification
• getMarkMessageUnreadErrorNotification
• getMarkMessageUnreadSuccessNotification
• getMuteUserErrorNotification
• getMuteUserSuccessNotification
• getPinMessageErrorNotification
• Message
• messageActions
• onlySenderCanEdit
• onMentionsClick
• onMentionsHover
• onUserClick
• onUserHover
• openThread
• pinPermissions
• reactionDetailsSort
• renderText
• retrySendMessage
• showAvatar
• sortReactions
• sortReactionDetails
• unsafeHTML