React-grid-layout: Performance with large number of items

[moustastrophe]

I'm working on an app that can have up to 1500 items in the layaout at once (potentially more) but by that point the performance gets really bad. Is this something that can be addressed?

https://9klnf.csb.app/

I read a great article by Alex Reardon that discusses improvements with drag and drop in React but it's beyond my capabilities and I figure it'd be a great improvement to RGL! - https://medium.com/@alexandereardon/dragging-react-performance-forward-688b30d40a33

[josesaranda]

What's about virtual scrolling to solve that issue? Maybe with virtual scrolling that visual effect would be more smooth.

[moustastrophe]

What's about virtual scrolling to solve that issue? Maybe with virtual scrolling that visual effect would be more smooth.

The only virtual scrolling I've seen has always been list based and not grid based, generally relying on items being in uniform positions so I'm not sure how it could be implemented with random placed items within RGL. Is that something you think would be possible? I have a fair understanding but I'm more of a Front End Designer than full developer so my attempts have been somewhat unsuccessful!

[josesaranda]

I have not evaluate if that is possible. Only was a proposal for this feature. As you said maybe that isn't possible with random items...

[josearaujo]

Try this approach: https://www.npmjs.com/package/react-lazyload

[moustastrophe]

Try this approach: https://www.npmjs.com/package/react-lazyload

I hadn't considered using lazy load actually, definitely worth investigating.
I was hoping this could be put in in the future as a bug fix for anyone else who might need to display a lot of items on one board

[josearaujo]

Try this approach: https://www.npmjs.com/package/react-lazyload

I hadn't considered using lazy load actually, definitely worth investigating.
I was hoping this could be put in in the future as a bug fix for anyone else who might need to display a lot of items on one board

My dashboards have up to 500 widgets. Also, try to see what takes so much time on Chrome performance dev tool. https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/

[eddyw]

First of all, you can memoize the children. You do always layout.map on every render but if you don't use data-grid then you can do something like:

memoizedItems = null
render() {
  if (!this.memoizedItems) this.memoizedItems = this.generateDOM();
   ...
      {this.memoizedItems} // instead of {this.generateDOM}
}

This works because RGL will walk the children array and re-wrap it again in a GridItem on every render: https://github.com/STRML/react-grid-layout/blob/master/lib/ReactGridLayout.jsx#L822-L824

This will improve performance a tiny bit but it's sometimes noticeable. However, take into account that if a new item is added, or removed from the layout, then you need to remove the memoized children and generate them again.

I'm not sure it'd be easy to apply a virtual scroll. First because I've tried and it's painful. Secondly, if you provide less children than the actual layout | layouts, RGL will trigger onLayoutChange with just the items that you mapped as children. So you can't do this:

<MyVirtualScroller ...>
  <RGLGrid ...>
    {this.state.layout.slice(startFrom, stopAt)}
  </RGLGrid>
</MyVirtualScroller>

In the above startFrom and stopAt are updated on scroll, this are the items you want to show but hide everything else. Even solving the above problem of RGL calling onLayoutChange with the sliced layout, you will face a complete new issue when dragging items within RGL.

You can try to "hack" around your way out of RGL limitations but it'd be painful. This should probably be done on RGL side and not on user land.

On another side, what I have done before is to have a nested grid layout. My main layout would render only rows (cols: 1) and each row was a grid layout itself. So this allowed to re-order entire rows but also improved performance since each row would contain less items.

For instance, 100 rows, 15 items in each grid performs faster than having 1500 items in the same grid. Since my rows have 1 column only, it acts as a list so I'm currently looking at moving it to use react-beautiful-dnd and I could have virtualized lists this way and drag and drop rows between containers.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this issue will be closed in 7 days