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: Can't reverse scroll without mounting initial off-screen items #415

Open
mattwondra opened this issue Mar 19, 2024 · 1 comment · May be fixed by #455
Open

Bug: Can't reverse scroll without mounting initial off-screen items #415

mattwondra opened this issue Mar 19, 2024 · 1 comment · May be fixed by #455

Comments

@mattwondra
Copy link

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 bottom
  ref.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:

return (
      <div
        key={i}
        style={{
          height: heights[i % 4],
          borderBottom: "solid 1px #ccc",
          background: "#fff",
        }}
      >
        {i} <img src={`http://example.com/${i}.jpg`} width={10} height={10} />
      </div>
    );

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
@inokawa
Copy link
Owner

inokawa commented Mar 21, 2024

It may be better to fix CacheSnapshot to include scrollOffset, and restore items range and scroll position on mount.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants