-
-
Notifications
You must be signed in to change notification settings - Fork 320
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Running virtual examples with React 18 createRoot causes rendering lag #549
Comments
@bwamsellem kinda looks ok for me, can you create small clip showing the issue.
no, i don't think so. |
Yes, I will do. |
Here are two video clips showing the normal behavior (old React API) , and the slow one ( new React 18 API). normal ( old React API) : virtual_react17_OK_fast.mp4slow ( React 18 API) : virtual_react18_KO_slow.mp4 |
Having same lag issue, table looks like it's not virtualized at all. |
I faced that problem months ago. My project makes intensive use of virtualization to create Excel-like spreadsheets and I switched from Anyway, for the problem you mention, my solution involves using a modified version of Source code is here: Instead of
I use
And I only make a small change to invoke Original:
Modified:
I believe that the entire onChange callback or the rerender call should be overridable by the user. I am not an expert in Typescript and I am not clear about the best approach, but I will create a pull request in case any maintainer finds the change interesting to add. |
It doesn't work with useWindowVirtualizer, and I still experience white flickering when scrolling the screen |
If this is still an issue for you, please comment here and tag me and I'll reopen the issue and work on it. Thanks! |
@tannerlinsley Will you fix it in the future updates? |
This is interesting issue, like dynamic example is using react 18 and works correct https://tanstack.com/virtual/v3/docs/examples/react/dynamic let see, planing to update other examples and simplify them a bit. |
It's really strange, when i wrote my comment, I checked all examples and they were working without any white flickering So I'll just ask about the correct behaviour chrome_XiuSfKKFvT.mp4 |
@1MaTo as mention before this is tricky issue, there are many reasons why it's happening
Going back to react 18, as @manelio noticed we can use flushSync, but let's use it only when scrolling, checkout #608 Overall it's pretty hard to test, any help would be greatly appreciated. |
@tannerlinsley @piecyk Hello, i'm unsure whether this is the same react 18 issue but seems quite related. I'm currently using table + virtual in this example here 307093934-1477c3a9-9396-407c-81e6-2550f45a5f08.movCan this issue be reopened and investigated? If there's any more info needed please let me know. Or if i should open a new issue Versions Table: 8.12.0 |
Thanks for sharing but this link has expired. Any chance you could point future readers to the example? Thank you very much! |
Describe the bug
I have tested the examples/react/fixed example with React 18, so changed the init code to use the new createRoot / render API:
ReactDOM.render( , document.getElementById('root'))
=>
ReactDOM.createRoot( document.getElementById('root')).render( )
Before: the scrolling is super smooth,
After: you can notice an important lag ( white flickering) while scrolling through rows or grid.
Is this caused by the concurrent rendering of React 18?
Your minimal, reproducible example
https://react-ts-mfeisb.stackblitz.io
Steps to reproduce
Expected behavior
Smooth scrolling
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
Windows 10 + Chrome 113
tanstack-virtual version
3.0.0-beta.54
TypeScript version
4.4.2
Additional context
No response
Terms & Code of Conduct
The text was updated successfully, but these errors were encountered: