[BUG] Flickering with React 17 and reverse endless scrolling, fixed by upgrading to React 18

[wjkmartin]

Describe the bug Flickering of elements on scroll, seemingly related to element size measurement. Debugger shows Layout Shift warning. Setting the measurement via the itemSize prop to return a constant does fix the issue, but obviously breaks other things. Upgrading to React 18 solves the issue, which we did as our solution.

Just reporting as a courtesy for anyone else having a similar issue. Thank you @petyosi for your work.

Reproduction https://codesandbox.io/s/currying-meadow-fjr3pb?file=/package.json

To Reproduce Steps to reproduce the behavior:

1. Open the sandbox
2. Scroll up
3. See flickering
4. Swap out the index files to the React 18 version and change the package versions of react to the latest React 18 versions.
5. See it smooth.

Desktop (please complete the following information):

• Windows 10, Chrome - Version 113.0.5672.129 (Official Build) (64-bit), also MacOS Safari, haven't tried other browsers.

[petyosi]

Thanks for sharing that @wjkmartin - it's interesting as I've spent a lot of time eliminating flickering in React 18 :).

The effect in your example is certainly visible, especially due to the different background of the items. Another way to mitigate the flickering would be increasing the viewport, so that the items have more time to render before the user scrolls up to them:

<Virtuoso 
...
increaseViewportBy={{ top: 800, bottom: 300 }}
/>

Hope this helps, I will mark the issue with workaround provided and leave it open.

[st-manhle]

@petyosi Work Arround solution not work for my issue

Context

• I have implement a chat that have many type of messages: Text, Image, Video
• Messages list is ordered by ASC: new message is a LAST index on messages list
• I used Virtuoso component
• I set initialTopMostItemIndex={{ index: "LAST" }} and use increaseViewportBy={2000} as well

Issues

• When I scroll up to older messages, Image/video message has been pushed to list => Flicker happened

Do you have any solution for this?

[petyosi]

@st-manhle If you're building a chat interface, use the MessageList version. Notice that you still need to render images and videos with their known height, otherwise the list will bounce around. s

[st-manhle]

@petyosi Do we have any solution with Virtuoso component? - I can't refactor a source code because it's related to many stakeholders.

[petyosi]

@st-manhle no, I don't. Good luck finding another solution.