Repository navigation
flushSync was called from inside a lifecycle method #1094
Description
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.
Activity
daniliukmark commentedon Dec 21, 2025
Were you able to fix it?
mrbean27123 commentedon Dec 22, 2025
by rolling back to v3.13.12
daniliukmark commentedon Dec 22, 2025
That worked, thx!
amorey commentedon Dec 22, 2025
I tried everything I could think of (
queueMicrotask(),requestAnimationFrame(),setTimeout(),useEffect(),scrollendlistener, virtualizerisScrollingtrigger, rolling back to v3.13.12) and nothing worked. Eventually I decided to try settingvirtualizer.isScrolling = falsebefore 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: 0but 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 resetingisScrollingis low though I'd still prefer an upstream solution.If anybody else has a better solution please let us know!
chore: add issue reference TanStack#1094
piecyk commentedon Dec 28, 2025
@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
feat: add deferFlushSync option for React 19 compatibility
amorey commentedon Dec 29, 2025
@piecyk Making it configurable sounds great. I'll watch the PR for updates.
piecyk commentedon Mar 10, 2026
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
fix(react19): kill the unmount-time removeChild crash at its two real…
feat: 日志统计变换 + README 文档同步 + useFlushSync 修复
Disable virtualizer flushSync to fix React 19 mid-render scroll warning