-
-
Notifications
You must be signed in to change notification settings - Fork 34
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: Can't reverse scroll without mounting initial off-screen items #415
Comments
It may be better to fix |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the bug
When making a reverse scroll interface (like a chat UI) you want to start the scroll position at the very bottom. The common way to do this seems to be with
useLayoutEffect()
:The problem is, the first couple components still get mounted and then unmounted, which isn't expected since the user never sees them. This can lead to poor performance on mount, for example network requests within those components can be made unnecessarily.
To Reproduce
In react/basics/VList.stories.tsx adjust
createRows
to add a bogus<img>
call on each item:Open the VList > Scroll Restoration story. Scroll halfway down the list to ensure the first couple items are not being rendered. Hide the list, then show it again. In the Network inspector, you'll see requests for the first couple items' images, e.g.
/0.jpg
,/1.jpg
... — even though the user never saw them. Example:Screen.Recording.2024-03-19.at.4.16.55.PM.mov
Expected behavior
There should be a way to start scrolled down the list, without the first couple items being mounted and rendered.
Platform:
The text was updated successfully, but these errors were encountered: