Shift props in keepMounted lists

[masteine]

Hi,
First of all, thanks for the cool library!

I have a chat where I use VList with the reverse and shift props. It works well, but it's a bit laggy at times. To improve performance, I decided to use the keepMounted option for my list. However, there's an issue: when I scroll to the top and add new messages, the scroll position doesn't stay in place - it jumps somewhere else.
I suspect the problem lies in the mismatch between the sizes of elements in the original list and the updated list.
Does anyone have any ideas or suggestions on how to use VList effectively with the reverse, shift, and keepMounted props?

Thanks for your help!

[inokawa]

A minimal reproduction might help to investigate it further. keepMounted prop in complicated situation was not tested well.

[masteine]

In the video, you can see that it successfully loaded the first time,
but the second time it showed a broken chat and scrolled away.
I checked isShiftMode, and it was fine.
I suppose I need to update my mounted indexes properly when I receive new messages.

2024-12-23-13-59-53.mp4

Component:

   <VList
            reverse
            ref={ref}
            shift={isShiftMode}
            onScroll={handleScroll}
            onScrollEnd={handleScrollEnd}
            keepMounted={messages?.map((_item, index) => index)}
          >