This is a migrated thread and some comments may be shown as answers.

Cells remounting while scrolling a virtualized Grid

11 Answers 584 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Francis
Top achievements
Rank 1
Francis asked on 09 Jun 2020, 08:52 PM

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

11 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 10 Jun 2020, 12:14 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Francis
Top achievements
Rank 1
answered on 10 Jun 2020, 06:03 PM
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.
0
Stefan
Telerik team
answered on 11 Jun 2020, 09:42 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Alexey
Top achievements
Rank 1
Veteran
answered on 28 Oct 2020, 01:47 PM

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

0
Stefan
Telerik team
answered on 28 Oct 2020, 01:57 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Alexey
Top achievements
Rank 1
Veteran
answered on 28 Oct 2020, 02:07 PM
Hi Stefan. Thanks for the answer. Do you have an idea what version will it be released?
0
Stefan
Telerik team
answered on 29 Oct 2020, 08:01 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Francis
Top achievements
Rank 1
answered on 29 Oct 2020, 08:05 AM
Alexey is not the author of the issue, I am.
0
Stefan
Telerik team
answered on 29 Oct 2020, 08:39 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Dino
Top achievements
Rank 1
answered on 08 Mar 2021, 10:34 AM

Hi Stefan,

Do you have ETA for this?

0
Stefan
Telerik team
answered on 09 Mar 2021, 06:51 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
Francis
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Francis
Top achievements
Rank 1
Alexey
Top achievements
Rank 1
Veteran
Dino
Top achievements
Rank 1
Share this question
or