Pickup and Move Lag

[seastan]

I am trying to replicate one of the official React Beautiful DnD examples, 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. Could someone kindly point out where I can find the source code, or where in the documentation it discusses optimization for many draggables?

[branlok]

where you able to solve this?

[psznm]

The answer to this question lies within https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/droppable.md#recommended-droppable--performance-optimisation

For example you need to put memoized component between your consumer of DroppableProvided and your Draggable. Taken from your sandbox would look something like this:

const Container = React.memo(({itemId, index, itemContent}) => {
    return (
        <Draggable key={itemId} draggableId={itemId} index={index}>
            {(provided, snapshot) => (
                <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    style={getItemStyle(
                        snapshot.isDragging,
                        provided.draggableProps.style
                    )}
                >
                    {itemContent}
                </div>
            )}
        </Draggable>
    )
})
--
-- snip
--
          <Droppable droppableId="droppable0">
            {(provided, snapshot) => (
              <div
                ref={provided.innerRef}
                style={getListStyle(
                  snapshot.isDraggingOver,
                  this.state.items0.length
                )}
                {...provided.droppableProps}
              >
                {this.state.items0.map((item, index) => (
                  <Container
                    itemId={item.id}
                    itemContent={item.content}
                    index={index}
                    key={index}
                  />
                ))}
                {provided.placeholder}
              </div>
            )}
          </Droppable>

Like this, thousands of items can be handled without performance issues.

Also I have found source code for the official example: https://github.com/atlassian/react-beautiful-dnd/blob/master/stories/3-board.stories.stories.js