Cells remounting while scrolling a virtualized Grid

10 posts, 0 answers
  1. Trevor
    Trevor avatar
    4 posts
    Member since:
    Aug 2018

    Posted 09 Jun 2020 Link to this post

    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

  2. Stefan
    Admin
    Stefan avatar
    3035 posts

    Posted 10 Jun 2020 Link to this post

    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.
  3. Trevor
    Trevor avatar
    4 posts
    Member since:
    Aug 2018

    Posted 10 Jun 2020 in reply to Stefan Link to this post

    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.
  4. Stefan
    Admin
    Stefan avatar
    3035 posts

    Posted 11 Jun 2020 Link to this post

    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.
  5. Alexey
    Alexey avatar
    12 posts
    Member since:
    Jul 2020

    Posted 28 Oct 2020 Link to this post

    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

  6. Stefan
    Admin
    Stefan avatar
    3035 posts

    Posted 28 Oct 2020 Link to this post

    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/.

  7. Alexey
    Alexey avatar
    12 posts
    Member since:
    Jul 2020

    Posted 28 Oct 2020 in reply to Stefan Link to this post

    Hi Stefan. Thanks for the answer. Do you have an idea what version will it be released?
  8. Stefan
    Admin
    Stefan avatar
    3035 posts

    Posted 29 Oct 2020 Link to this post

    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/.

  9. Trevor
    Trevor avatar
    4 posts
    Member since:
    Aug 2018

    Posted 29 Oct 2020 in reply to Stefan Link to this post

    Alexey is not the author of the issue, I am.
  10. Stefan
    Admin
    Stefan avatar
    3035 posts

    Posted 29 Oct 2020 Link to this post

    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/.

Back to Top