React-window: Dynamic pre-rendering / over-rendering

[bvaughn]

Relates to this Twitter thread:
https://twitter.com/Vjeux/status/1008077144289787904

Since the scrolling thread can get ahead of the UI thread, windowing libraries sometimes show blank space in the direction being scrolled (especially for sudden, quick scrolling).

It might be possible to use a heuristic based on the scroll delta and the time between commits (i.e. componentDidUpdate calls) to render _ahead_ of where the scroll position currently is. This might enable us to reduce the amount of visible white space when scrolling quickly.

This heuristic would need to take the state.scrollUpdateWasRequested value into consideration so that programmatic scroll-jumps wouldn't cause us to render ahead.

[bvaughn]

Here is a side by side demo of a proof of concept:
https://react-window-dhruaiojyq.now.sh/

List B uses the offset adjustment technique.

The code has been pushed here. (No tests added as of yet.)
https://github.com/bvaughn/react-window/compare/master...issues/12

[JonDum]

This is awesome! I can't even tell that List B is virtualized. No whitespace at all for me. I think this gets even more important when each list item is a bit more complicated and takes longer to render (or for people who like to flick their trackpads real hard like me 😆)

[chrisnojima]

I tried the demo above and when scrolling with the trackpad i can't differentiate between list a/b but if i drag the scroll bar around i see a lot of white on B. Expected?

[bvaughn]

Yeah, that's not totally unexpected.

[damiangreen]

So is List _A_ the improved code? I also see white in List B on Windows + Chrome, but List A looks fine. Although you mentioned above that List B uses the offset adjustment technique?

[bvaughn]

List A is just the behavior that's in NPM currently.

[bvaughn]

I don't think this experiment shows enough promise to pursue any further.