React-virtualized: Add option to not re-render list rows when scrolling

[gpascale]

Hi,

I've been digging into performance of my react-virtualized components lately and am curious about the rendering behavior of List.

It seems that List re-renders every visible row (as well as overscan, presumably) every time it scrolls. This is really hurting my performance because my rows are fairly heavyweight and re-rendering them is non-trivial.

I understand that this is intentional because it allows for the customization of rows via the isScrolling parameter, as in the example code for List: https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md. The idea being that you render a simplified row while scrolling and the heavyweight row once stopped. This is ok, but I really don't like that visual effect for my use case. Instead, I propose that there should be a way to tell List not to continually re-render visible rows when scrolling.

I made this quick pen to demonstrate how often the rows are being rendered. Of course the performance is fine in this simple example, but with more complex rows, scrolling performance starts to suffer.
https://codepen.io/gpascale/pen/rJoJgO

[bvaughn]

That CodePen is a great example.

I've thought a little about maybe changing v10 to let you opt-in to the isScrolling param. Maybe we could do this in a backwards compatible way though (by letting you opt-out instead). If there was a prop that told List that rowRenderer didn't care about that param, then it could skip the extra render when scrolling stopped.

Would you be interested in putting together a PR for this (including docs+tests)?

[wuweiweiwu]

@bvaughn I'd love to take this issue :)

[bvaughn]

It's all yours

[bfang711]

I met exactly the same issue in Grid as in List. Can you please add this enhancement into Grid as well? React-infinite, another light weight virtualized library doing that, however they don't support other good functionalities that react-virtualized does.

thank you and please let us know when it is implemented.

[th3fallen]

was just tracking down some perf issues myself which led me here, thank you for working on this @wuweiweiwu

[chitezh]

@wuweiweiwu any progress on this?

[wuweiweiwu]

@bfang711 @chitezh @th3fallen Been busy with #1053 but I'll get a fix out for this as soon as I can :)

[emflores]

@wuweiweiwu any update on this?

[wuweiweiwu]

@emflores havent had time to work on it. I'll get it in as a patch to 9.19.x release

[chitezh]

@wuweiweiwu it looks like you added it to just grid, how about List?

[wuweiweiwu]

@chitezh List is actually just a 1 column Grid. So I'll create a new issue to track that change! Thanks for letting me know!

[tannera]

Where is the new issue for the List?

[jamesalester]

@wuweiweiwu Did this ever get added for List?