React-virtualized: Rows are not pre-rendered when scroll direction change

Created on 12 Jan 2019  路  2Comments  路  Source: bvaughn/react-virtualized

What is the current behavior?

If user adds SVG icons to example https://material-ui.com/demos/tables/#virtualized-table the table rendering becomes slower (which is expected) but in addition to that I see a weird bug:

When I scroll down slowly everything goes well. But if then I scroll up I immediately see blank space at the top. If I continue to scroll up everything is fine. But when I change direction again it the bug happens again. Basically after every change of scrolling direction I observe empty space.

Documentation of Table says that overscanRowCount:

Number of rows to render above/below the visible bounds of the list. Looks like it only works in the direction of scroll.

I have played with the value, from 1 to 500, no difference.

Documentation of overscanRowCount says a bit differently:

The overscanRowCount property renders additional rows in the direction the user is scrolling to reduce the chance of a user scrolling faster than virtualized content can be rendered.

This result in not so smooth user experience:

screen recording 2019-01-11 at 5 16 34 pm

https://github.com/bvaughn/react-virtualized/issues/1299 may have same nature.

Which versions of React and react-virtualized, and which browser / OS are affected by this issue? Did this work in previous versions of react-virtualized?

| | |
|-------------------|----------|
| Browser | Chrome |
| OS | Mac |
| React | 16.6.3 |
| React DOM | 16.6.3 |
| react-virtualized | 9.21.0 |

Most helpful comment

In my project I worked around this by providing a custom overscanIndicesGetter method

All 2 comments

In my project I worked around this by providing a custom overscanIndicesGetter method

Thanks @bhovhannes! I have googled the property you've mentioned and found it in the docs: https://github.com/bvaughn/react-virtualized/blob/master/docs/Grid.md#overscanindicesgetter

It is quite confusing that this property was not referred from the sections I quoted in original issue.

So the actual problem then is some docs inconsistency.

Was this page helpful?
0 / 5 - 0 ratings