React 18 Support

Update: the issue is solved. Component should work out of the box.

The latest version of react-virtuoso seems to be working fine with React 18, except for increased “blinking” when scrolling upwards through unevenly sized items. ~~

For now, I have found a remedy (calling flushSync at the right moment), but it triggers dev mode warnings in React 16/17. The code could detect the React version, but it’s not reliable, as you might be running React 18 in compatible mode. So the fix is activated using the react18ConcurrentRendering property - see sample.

If you discover any problems in React 18, please comment here. Thanks!

[gaearon]

The naming of the prop seems unfortunate since the issue is caused by automatic batching rather than concurrency. (React 18 does not use concurrency unless you opt into it with a specific concurrent feature like startTransition.) It also seems unfortunate that people using the latest version of React need to add a special prop.

What is the warning you’re seeing in 17 with flushSync?

[petyosi]

Is it possible to just call setMargin but then perform the scrollBy call in a layout effect? And use a ref to keep track of whether it already ran or not.

@gaearon Tried that. The scroll compensation logic works correctly, but the blinking is still there.

To make matters more complicated, the sequence of the margin setting/scrolling by should be tweaked depending on the value (code). As far as I can see, I can’t control this through useLayoutEffect.

Ultimately, I think I found a solution through direct dom access, here’s the relevant part.

Again, thanks for your input. This react-virtuoso library is dealing with messy browser edge cases, so I’m fine with introducing workarounds so that its users don’t have to do so. The flushSync call seems conceptually right to me, and the only problem is its inconsistent behavior across 17 and 18.