0

I've spent days trying to understand why in some cases the drag'n drop (with React DnD) is so slow in my React app.

To be more precise, the problem is not really when I'm dragging an element, but when I'm starting to drag it: I click and handle click on an element and move my cursor, and it can take up to 10 seconds before the element appears under my cursor. The dragging itself is a bit laggy but acceptable, it's not the problem here.

I've finally found out that it becomes slower with the number of drop targets increasing. For example, I can have 50 components on screen, each of them being not one but two drop targets because I handle it as a "top drop target" and a "bottom drop target", so you can drop your element above or below it depending on where your cursor is. Just by removing one of these possibilities, the performances increased drastically.

I guess this problem comes from the fact that when I start dragging, the DnD layer searches for all the components that are possible drop targets and... do things with them (with the connect.dropTarget() function).

Is there a way of avoiding this, or is it the very reason why DnD works? Like, can I detect the drop targets when they are hovered, instead of loading them all when I start dragging an element? I'll still need to change their style when they are hovered for example.

Btw, I'm still using the legacy decorator API, would the new hooks API improve the performances?

Thanks.

Destal
  • 141
  • 5

1 Answers1

3

I've finally found out that it becomes slower with the number of drop targets increasing.

When I started out using react-dnd this was also my first idea: having a separate drop target for each drop position. Just like you I found this to have significant performant issues.

I realized I only really needed a single drop target, covering a large portion of the screen. When an item is dropped you can just calculate where the item was dropped within the drop target using monitor functions like DropTargetMonitor#getClientOffset(). If you need descrete positioning of the dropped item you can easily snap it to the closest multiple your preferred grid tile size.

darksmurf
  • 3,747
  • 6
  • 22
  • 38
  • Can someone answer this question please https://stackoverflow.com/questions/64913638/how-to-swap-two-cards-without-changing-position-other-cards – The IT gal Nov 20 '20 at 08:59
  • @darksmurf would it be possible for you to create a demo for this? or link any repo with this implementation? Trying to implement it but stuck. – user5955461 Aug 02 '21 at 21:13