The virtual list breaks when loading async content with Suspense turned on

[rajohan]

Describe the bug

I have created a Virtual list/grid with infinite scrolling and I have some issues with Suspense turned on.
I can sometimes get a fully working virtual list/grid if the page loads fast enough (never on codesandbox). If I try to throttle the network to 3g it breaks 100% of the time and I only get the 3 first rows and scrolling does not load any more pages. If I turn off suspense and check that status !== "loading" before I render the component everything works.

Your minimal, reproducible example

https://codesandbox.io/s/wizardly-zhukovsky-hnhx4p?file=/src/App.js:1275-1289

Steps to reproduce

1. Load the page with suspense turned on (You can toggle this in the useInfiniteQuery options. Line 48).
2. The Viritual List/grid should now have loaded 3 rows with 5 columns and a white gap of approximately 3 rows height underneath and the infinite scroll functionality not working.
3. Toggle suspense off in useInfiniteQuery options and reload the preview window.
4. The Virtual List/Grid should now have 4 rows with 5 columns rendered and the infinite scroll functionality is working.

Expected behavior

I expect the behavior to be equal no matter if suspense is on/off

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

OS: Windows 10
Browser: Chrome Version 102.0.4958.0 canary (64-bit)

tanstack-virtual version

v3.0.0-beta.2

TypeScript version

v4.6.4

Additional context

No response

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[mitchelvanbever]

Running into the same issue. I believe it only happens in development with strict mode enabled. Production should be fine and if you remove strict mode for development it also seems to work 👍

[rajohan]

Running into the same issue. I believe it only happens in development with strict mode enabled. Production should be fine and if you remove strict mode for development it also seems to work 👍

You are correct. Just tried it on my codebox example and removing strict mode makes everything work as intended with suspense.

[tannerlinsley]

We just shipped an updated that should fix this and some of the other React 18 concurrent issues. 👍