Skip to content
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

[BUG] Cumulative Layout Shift issue in React 18 #714

Open
reza-akbari opened this issue Jul 17, 2022 · 3 comments
Open

[BUG] Cumulative Layout Shift issue in React 18 #714

reza-akbari opened this issue Jul 17, 2022 · 3 comments
Labels
bug Something isn't working

Comments

@reza-akbari
Copy link

Describe the bug
in react 18 the content below Virtuoso jumps and causes a CLS issue.

Reproduction
https://codesandbox.io/s/react-virtuoso-cls-issue-with-react-18-3078xo?file=/App.js

it's more clear when using chrome devtools CPU throttling
https://user-images.githubusercontent.com/35025677/179399612-e83ffa1e-09a0-4c60-88f4-427e02454cf7.mp4

with react 17 and ReactDOM.render this was not happening

thanks for this great project 🙏

@reza-akbari reza-akbari added the bug Something isn't working label Jul 17, 2022
@petyosi
Copy link
Owner

petyosi commented Jul 17, 2022

Thanks for that, I can see the issue. Certainly, this problem happens only in the useWindowScroll mode.

I've managed to address similar issues with React 18 using flushSync calls, but the problem I'm facing is that it does not work the same way (as in - it throws warnings) in React 17. Realistically speaking, I will probably be able to tackle it once I start publishing React 18-only versions.

@AndrewFedor
Copy link

Hey there, ditto to the first reporter on this. Thanks for an awesome library. We've been using TableVirtuoso with multiple tables on the same page. The CLS issue is even more noticeable with 4 or 5 tables on one page.

Just checking in to see if there's any plan for addressing or a major React 18 version in the works.

Thanks again!

@petyosi
Copy link
Owner

petyosi commented Apr 18, 2023

@AndrewFedor - that's great to hear. You can help me prioritize this in my life by sponsoring the project. Thanks again.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants