You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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():
useLayoutEffect(()=>{// On mount, scroll to the bottomref.current?.scrollTo(ref.current?.scrollSize);},[]);
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:
OS: MacOS
Browser: Chrome
Version of this package: 0.29.1
Version of framework: react 18.2.0
The text was updated successfully, but these errors were encountered:
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: