[BUG] flushSync warning when isScrolling is turned on

[marcpropeller]

Describe the bug I have slightly modified the example at https://virtuoso.dev/prepend-items/. I receive the following console error when I reach the top of the list and then next items are prepended:

Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task

If I remove the isScrolling attribute the error goes away.

Reproduction https://codesandbox.io/s/cranky-babycat-o3zoln

To Reproduce Scroll to the top of the list, as the new items are prepended the error is produced.

Expected behavior Not to throw an error

Screenshots

Desktop (please complete the following information):

• OS: Windows 11 10.0.22621 Build 22621
• Browser: Chrome 108.0.5359.99
• Virtuoso: 3.1.5

Please let me know if you require any further information,

Thanks.

[petyosi]

I would advise you to find a workaround - basically, the sync setState call in isScrolling is causing the flushSync call. Something like this works I guess, not sure what's the purpose of the call.

      isScrolling={(scrolling) =>
        setTimeout(() => setIsScrolling(scrolling), 300)
      }

Unfortunately, the current flushSync is a hack that sits between React 17 and 18.

[marcpropeller]

@petyosi thanks for that information. I have a few other scenarios with this issue, so I'll see if delaying the setState fixes those too.