Grid with custom cells that have some expensive calculations doesn't call onPageChange sometimes

[Alexey]

I have the grid set up with a custom cell that has some expensive calculation performed when the cell component init. Usually, when I do scroll it takes some time to be rendered, that's OK. But sometimes I notice the grid doesn't call onPageChange method and the page becomes blank.

I created an example of that. It quite difficult reproduce, although In my real set up I reproduce it more ofter. So I recorded a screencast. Watch it from the 30th second. You can see sometimes it's stacking until I do scroll again
https://take.ms/mXO4h
https://stackblitz.com/edit/react-6dfm1k?devtoolsheight=33&file=app/main.jsx

 

Also I created an issue on github

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

[Alexey]

I made small investigation and it looks like it happens when VirtualScroll.scrollSyncing set true

[Stefan]

Hello, Alexey,

Thank you for the video and for the example.

I have marked the issue in GitHub and the team will look at it and investigate further.

In the meantime, could you please share the calculations that are made for each cell as in general we do not recommend performing heavy calculations inside the cells, as they will be executed hundreds of times.

If you share them, we may be able to suggest a different solution that removes these calculations from each cell, which will prevent the issue and make the application faster.

Regards,
Stefan
Progress Telerik

[Alexey]

Well, they are not calculations, but some kind of complex components. I use reakit's composite in order to have cells wide navigations. So I have to wrap each kind of cells with CompositeItems, that registers it's ref to be able to navigate to the previous/above/next/bellow cell. I don't do anything complex and not memoized in render method

 

https://reakit.io/docs/composite/

[Stefan]

Hello, Alexey,

Thank you for the clarification.

Is it possible to share an example of this usage, as this will help us inspect it to see if it can be optimized?

The reason we are asking is that, as the scroll event is async by default and Javascript is a single-threaded language, sometimes with complex operations, the browser may not correctly emit all scroll data. This is why we want to help speeding up the application, as fixing the current issue is not fully in our control and may take longer to resolve. 

Regards,
Stefan
Progress Telerik