Dragging is very slow with many DOM items on page

Question

React DnD doesn't appear to scale well.

I have a list of five hundred drop targets and it take several seconds to pick up an element.

Is there anyway of speeding this up?

The list scrolls perfectly smoothly.

Answer 1

I'm using react-virtual to reduce the number of DOM elements in existence, although unfortunately the drawing performance is well behind native rendering.

Also, a helpful thread...

https://github.com/react-dnd/react-dnd/issues/421

While technically you can stretch React DnD performance to ~3000 items, there’s no way for it to not lag after a certain point without changing the API (and making it less useful). If you have thousands of rows, I think you should be using virtualized lists anyway.