Large overscan causes unecessary component rerenders during scroll

[aeharding]

Describe the bug

When you have a large overscroll value to force the entire list to be rendered, items are re-rendered unnecessarily during scroll.

To Reproduce

1. Set a high overscan, larger than number of items in list. Use a component with useEffect(() => console.log('rerender'), []) to check rerenders.
2. Observe that rerender is printed many times during scroll for the same components

I have a reproduction codepen here: https://codepen.io/aeharding/pen/VwgVjVz open console and scroll the area, observe rerender is printed many times.

Expected behavior

rerender only printed once at startup per component with an overscan greater than the entire number of items

Platform:

• OS: [Windows, MacOS, Linux, Android, iOS] Firefox macos, iOS safari
• Browser: [Chrome, Firefox, Safari, Edge] Seems universal
• Version of react: 18.2.0
• Version of this package: 0.17.4

Additional context

None

[inokawa]

Hi, it's an expected one.
The overscaned items opposite to the scroll direction will be unmounted during scrolling to reduce cost. That's similar behavior to react-window.

Instead of remounting, applying content-visibility: hidden or React's experimental Offscreen(renamed to Activity recently), or disabling unmount may result in better results in some case, but not verified yet.
related #181

[aeharding]

I see, thanks! Yes, an append only mode sounds like it's what I'm looking for. Basically I want to disable virtual scroll temporarily but not remove the VList because I'm lazy :)