Cells remounting while scrolling a virtualized Grid

[Francis]

When virtualizing the grid, all cells remount during scroll, causing a serious performance issue. How can I stop this from happening?

Here's and example I forked showing the remounting behavior: https://stackblitz.com/edit/react-mu6rlr-ssbgc9?file=app/main.jsx

[Stefan]

Hello, Trevor,

This is expected behavior as the Grid cell is re-rendered while the user scrolls as each scroll changes the data. Still, this should not cause any performance issues as we take advantage of the React Virtual DOM and the cells that are the same are not pre-rendered inside the DOM. This is one of the benefits of having fully native React components.

I added this logic to our demo with 5000 records and it was working as expected with no issues. The only issues that occur were due to the use of console.log as it triggers thousands of log operations:

https://stackblitz.com/edit/react-nvvccn?file=app/main.jsx

In general, the mounting and unmounting of the cells are not causing performance issues, the issues can occur if we have to have operations inside the cell render that will be triggered thousand of times, similar to the console.log case.

If there is an example where the issue can be observed, please let me know and we will be happy to inspect it.

Regards,
Stefan
Progress Telerik

[Francis]

Thanks for getting back. I can understand why cells would rerender. But why do they remount? I'm trying to build a virtualized grid with cells that do some work at initialize. By remounting, it forces them to do that work repeatedly, needlessly. It seems that only new cells should be mounting, and removed cells should unmount, and all cells that are not unmounting that have already mounted should be rerendering.

[Stefan]

Hello, Trevor,

There are a couple of reasons for this and the most important one is the focus as if they are not unmounted they will have equal keys when scrolling and this can cause issues with the focus.

The other reason is that if there is any stateful logic in the cell they will re-render with wrong information as React will try to re-render them in the same state even if this cell is already with a different data.

We do agree that this comes with a performance drawback, but in our tests, the difference is not noticeable. As the performance issue can come from the additional logic added to the cell, is it possible to share what logic is executed when they mount, so we can inspect it and advise if there is a way around it.

Regards,
Stefan
Progress Telerik

[Alexey]

Hi.Thanks Trevor for rising this question. I do agree that this can lead to performance problems later on. It remounts all rows and cells when scrolling. 

There are two examples that are illustrating this problem:
1. react-window doesn't remount rows that are visible
https://codesandbox.io/s/youthful-colden-rni5q?file=/index.js

2. kendo grid does remount visible rows
https://stackblitz.com/edit/react-bzycbm?file=app/main.jsx

The rerender is not terrible. it's terrible that kendo grid does remount. This means calling a bunch of effects and completely re-creating the dom tree. When rendered, we get only a few extra passes through the render function without calling effects and the dom is saved

 

I have already met one issue that I posted here

https://github.com/telerik/kendo-react/issues/709

[Stefan]

Hello, Alexey,

Thank you for sharing the additional feedback.

We actually have a fix for this already on a PR.

This will allow setting a dataItem key and based on that key (usually an ID) we will remount the row only when this key had changed.

Regards,
Stefan
Progress Telerik

[Alexey]

Hi Stefan. Thanks for the answer. Do you have an idea what version will it be released?

[Stefan]

Hello, Alexey,

We will add this information inside the issue when the pull request is merged.

As this is a large improvement, we still need time to test it to ensure that it will be working as expected in different cases.

As you are the author of the issue, you will receive a notification as soon as we add it in dev.

Regards,
Stefan
Progress Telerik

[Francis]

Alexey is not the author of the issue, I am.

[Stefan]

Hello, Trevor, 

I meant the issue posted here in GitHub:

https://github.com/telerik/kendo-react/issues/709

I assume that Alexey is @a-pavlov-parc.

Regards,
Stefan
Progress Telerik

[Dino]

Hi Stefan,

Do you have ETA for this?

[Stefan]

Hello, Dino,

This is already live in version 4.2.0:

https://www.telerik.com/kendo-react-ui/components/changelogs/ui-for-react/#f91bd6b1-d1ea-53d1-98cc-48c0148cf6b9

grid:

scrolling with virtual scroll incorrectly rerenders all rows due to invalidly set

The new property is called dataItemKey:

https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-dataitemkey

Please give it a try and advise if the issue still occurs.

Regards,
Stefan
Progress Telerik