1

I am trying to replicate the React Beautiful DnD example shown here: https://react-beautiful-dnd.netlify.app/?path=/story/board--large-data-set

There are about 500 draggables on that page, but there is relatively little lag when picking up the draggable and moving it around.

My attempt to copy this example can be found here: https://codesandbox.io/s/react-beautiful-dnd-stress-test-v50jl. The onDragEnd is not implemented yet, as right now I'm only concerned about the pickup and move lag.

When picking up an item in my version, it takes approximately 1 full second for the draggable to start moving. The movement of the draggable is also very jittery as it's moved around between droppables.

I have tried searching for the source code for the official example, but can't find it. I would like to know what optimizations I could be making in my code to have it run as smoothly.

Chris
  • 23
  • 1
  • 4
  • I managed to replicate the official example more fully here: https://codesandbox.io/s/react-beautiful-dnd-board-stress-test-d23sc. I found the code in the official repository here: https://github.com/atlassian/react-beautiful-dnd/tree/master/stories. But I am still not sure what part of the code is allowing the high number of draggables with little lag. – Chris Jun 19 '20 at 08:04
  • 1
    Use functional component for the draggables and in that use areEqual function. When the props(data) is same it won’t re render it while dragging. Actually when you drag a record from one lane to another that lane records gets rendered thats why it lags so much – Sharique Khan Jul 02 '20 at 05:51
  • @ShariqueKhan could you please explain more? i am facing same problem – H.b Dec 02 '22 at 15:02

0 Answers0