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

[mattwondra]

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]

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