HELP, Best way to limit chat by removing oldest message without breaking autoscroll

[encoderpie]

Describe the bug
I’m building a chat application using react-virtuoso where I need to limit the number of messages displayed (e.g., MAX_MESSAGES = 500). When a new message is added, I remove the oldest message to keep the list within the limit. However, this approach causes issues with Virtuoso’s autoscroll behavior:

1. When autoscroll is active (followOutput set to 'auto'), removing the oldest message causes the autoscroll to stop unexpectedly.
2. When the limit is exceeded (e.g., 500 messages), adding a new message and removing the oldest one prevents Virtuoso from scrolling fully to the bottom, leaving a gap.

The root cause seems to be that removing messages from the top of the list affects Virtuoso’s virtual scrolling calculations, leading to inconsistent scroll behavior.

To Reproduce
Steps to reproduce the behavior:

1. The chat starts with autoscroll enabled (followOutput is set to 'auto').
2. Wait for the message count to exceed MAX_MESSAGES (e.g., 500 messages).
3. Observe that autoscroll either stops unexpectedly or fails to scroll fully to the bottom when a new message is added and the oldest is removed.
4. See the gap at the bottom or the autoscroll stopping.

Expected behavior
I expect Virtuoso to maintain smooth autoscroll behavior even when the oldest message is removed from the list to enforce a message limit. When a new message is added, Virtuoso should reliably scroll to the bottom without stopping or leaving a gap.

Screenshots
Here’s a screenshot showing the issue:

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Chrome (latest version)

Additional context
I’m trying to implement a chat application where I need to keep the message list within a certain limit (e.g., 500 messages) for performance reasons. My current approach is to use slice to remove the oldest message when a new one is added:

const MAX_MESSAGES = 500
let messages = [...currentMessages, newMessage]
if (messages.length > MAX_MESSAGES) {
  messages = messages.slice(-MAX_MESSAGES) // Remove oldest message
}

However, this causes the autoscroll issues described above. I’ve tried delaying the scroll with setTimeout and using scrollToIndex, but the problem persists. I’d like to learn the best way to limit the chat by removing the oldest message without breaking Virtuoso’s autoscroll behavior. Any guidance or recommended approaches would be greatly appreciated!

[encoderpie]

i have created a codesandbox to help you better understand the problem and have included the link below:

https://codesandbox.io/p/sandbox/react-virtuoso-v1-chat-forked-n728w6

When you open the CodeSandbox and preview it, you can press the "send 50" or "send 500" buttons to observe the autoscroll issues more clearly.

Please help me resolve this error.