Using external dndManager causes the rows to constantly re-render during dragging

[DiyanDimitrov]

I am using an external dndManager so that I can drop tree nodes outside the tree. Unfortunately, this causes the rows to constantly re-render during drag. Since my nodes have some expensive rendering, the dragging becomes extremely laggy.

I have spent some time debugging and it seems that the reason for this is that the dnd context is constantly changing. The reason for this is that new options object is created on each render:

            <DndProvider
              backend={HTML5Backend}
              options={{ rootElement: api.props.dndRootElement || undefined }}
              {...(treeProps.dndManager && { manager: treeProps.dndManager })}
            >

Looking at the code of the DndProvider, when setting the manager prop you shouldn't be specifying the options and backend props.

https://github.dev/react-dnd/react-dnd/blob/7c88c37489a53b5ac98699c46a506a8e085f1c03/packages/react-dnd/src/core/DndProvider.tsx#L8-L19

The reason this works fine when dndManager is not set is that the DndProvider uses a singleton instance when manager prop is not set. However when you set the manager prop the DndProvider creates a new object with the provided manager:

https://github.dev/react-dnd/react-dnd/blob/7c88c37489a53b5ac98699c46a506a8e085f1c03/packages/react-dnd/src/core/DndProvider.tsx#L55

The DndProvider component is memoized, but providing new options object each time breaks the memoization.

My suggestion to fix this is to memoize the options object or conditionally set the backend and options only when manager is not provided.

Let me know if I can help with a PR. Thanks in advance!

[jameskerr]

I would welcome a PR to fix this. Thank you for the detailed issue @DiyanDimitrov