flushSync was called from inside a lifecycle method

[hossein197176]

Describe the bug

when i use window virtualization with TanStack/virtual, a warning appears in the console:
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.

The reporter notes that this warning seems to come from a flushSync call that was added in a previous change (PR #608) and asks for recommendations to fix it. They also share a local workaround guarding the callback with a mounted check to avoid the error. closed github issue

also we could see the error message in the official document example with the latest version when we reach the end of the scrollable element:
https://tanstack.com/virtual/latest/docs/framework/react/examples/infinite-scroll

Your minimal, reproducible example

https://tanstack.com/virtual/latest/docs/framework/react/examples/infinite-scroll

Steps to reproduce

Run the official document example

Expected behavior

we should not see the mentioned warning

How often does this bug happen?

Every time

Screenshots or Videos

Platform

windows 11 - chrome

tanstack-virtual version

v3.13.13

TypeScript version

No response

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.

[daniliukmark]

Were you able to fix it?

[mrbean27123]

Were you able to fix it?

by rolling back to v3.13.12

[daniliukmark]

Were you able to fix it?

by rolling back to v3.13.12

That worked, thx!

[amorey]

I tried everything I could think of (queueMicrotask(), requestAnimationFrame(), setTimeout(), useEffect(), scrollend listener, virtualizer isScrolling trigger, rolling back to v3.13.12) and nothing worked. Eventually I decided to try setting virtualizer.isScrolling = false before my update and the error seems to have gone away without any downsides 🤞. However, it's definitely a hack so use it with caution.

Note that I was also able to suppress the errors by setting isScrollingResetDelay: 0 but that could affect the normal operation of the virtualizer so I decided against it. In my particular case the problematic render is being triggered by async code that only runs occassionally when the user scrolls close to the top/bottom of the scroll element so I think the risk of manually reseting isScrolling is low though I'd still prefer an upstream solution.

If anybody else has a better solution please let us know!

[piecyk]

@amorey warning itself doesn’t really affect anything in this case.

As commented in #1098 the flushSync is intentionally used to synchronously apply the scroll correction during measurement to limit visible white space while scrolling.

I think we should make this configurable under a flag in @tanstack/react-virtual

[amorey]

@piecyk Making it configurable sounds great. I'll watch the PR for updates.

[piecyk]

Closing this as we now have useFlushSync available in React Virtual, which gives more control over how updates are scheduled and can help reduce the perceived re-render issues during scrolling.

https://tanstack.com/virtual/latest/docs/framework/react/react-virtual#useflushsync