Devextreme-reactive: React Grid Virtual Scrolling scroll performance

[veznidav]

I use React Grid with virtual scrolling. The grid has about 500 rows. I test the application on multiple mobile devices and some of them have problems with performance. On some devices scrolling through the items is laggy exactly like in this article (17.2 version): https://community.devexpress.com/blogs/javascript/archive/2018/05/16/datagrid-and-treelist-performance-improvements-v18-1.aspx
I use these packages:
"@devexpress/dx-grid-core": "^1.1.2"
"@devexpress/dx-react-core": "^1.1.2"
"@devexpress/dx-react-grid": "^1.1.2"
"@devexpress/dx-react-grid-material-ui": "^1.1.2"

Is the improvement that is mentioned in the article above already included in these versions? Is there any other solution how to deal with laggy scrolling?

[kvet]

Hi,

This blog post is not related to the DevExtreme Reactive project. However, we've released column virtualization support in the 1.2.0 release. It improves performance on mobile devices, especially with the big amount of columns.

[veznidav]

Thank you for your reply. But it is only associated with columns, not with rows, correct? And one more question - is there a possibility how to show "dummy rows" (just rows with some placeholder) when scrolling through "not yet generated" rows? These rows become regular rows when they are fully loaded. Users will know that something should appear.

[kvet]

Yes, the change is only in column rendering. Row rendering has been optimized from the very first release. You can check the following library that implements virtual scrolling: https://bvaughn.github.io/react-virtualized/#/components/Table. If it performs a way better on your device, please let us know.
 
I am afraid VirtualTable doesn't notify users of changing visible rows and columns. You can create a separate issue with a feature request for such a functionality.

[RahavLussato]

hi @kvet i can say that for me react-virtualized works much faster even after the columns virtualization you added which made it a bit faster but still not fast as react-virtualized.
if i need to guess what is the reason it can be one of 2:

1. react-virtualized might implemented the row virtualization in a different way.
2. there is a lot of paint performence warnings when scrolling from chrome such as "[Violation] Forced reflow while executing JavaScript" and "[Violation] 'scroll' handler" "[Violation] 'message' handler"

[kvet]

Hi, @RahavLussato.

1. Implementation our virtualization is pretty standard. We calculate the visible boundary and render it. The differences from the react-virtualised are:
   
   
   
   • We use table layout instead of divs with absolute positioning. While the second approach is more performant, the first one allows us to use col and row spans, dynamically track row resizes and vertically center a cell content.
   
   
   • Our markup and virtual react tree are "heavier" than in react-virtualized. This is because we have many features and support conditional cell and row rendering based on cell and row type. This part of our library may and will be optimized in future versions.
   
   
2. Thanks for the info. We will check this things and try to optimize them.

I should also mention that cell content and visible row and cell count are influence virtual table performance dramatically.

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.