[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.