Use a Singleton DndContext instance when rerendering DndProvider (#1422)

* fix: use a singleton DndContext instance to multiple-backend issues when DndProvider rerenders

* docs: add editorconfig to see if github changes tab width when it's present

.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+# Matches multiple files with brace expansion notation
+[*.{ts,tsx,js,jsx}]
+charset = utf-8
+indent_style = tab
+indent_size = 2
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

packages/core/react-dnd/src/common/DndProvider.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { memo } from 'react'
 import { DragDropManager, BackendFactory } from 'dnd-core'
 import { DndContext, createDndContext } from './DndContext'
 
@@ -15,15 +16,28 @@ export type DndProviderProps<BackendContext> =
 /**
  * A React component that provides the React-DnD context
  */
-export const DndProvider: React.FC<DndProviderProps<any>> = ({
-	children,
-	...props
-}) => {
-	const contextValue =
-		'manager' in props
-			? { dragDropManager: props.manager }
-			: createDndContext(props.backend, props.context, props.debugMode)
-	return (
-		<DndContext.Provider value={contextValue}>{children}</DndContext.Provider>
-	)
+export const DndProvider: React.FC<DndProviderProps<any>> = memo(
+	({ children, ...props }) => {
+		const context =
+			'manager' in props
+				? { dragDropManager: props.manager }
+				: createSingletonDndContext(
+						props.backend,
+						props.context,
+						props.debugMode,
+				  )
+		return <DndContext.Provider value={context}>{children}</DndContext.Provider>
+	},
+)
+
+let SINGLETON_DND_CONTEXT: DndContext<any> | undefined
+function createSingletonDndContext<BackendContext>(
+	backend: BackendFactory,
+	context?: BackendContext,
+	debugMode?: boolean,
+) {
+	if (!SINGLETON_DND_CONTEXT) {
+		SINGLETON_DND_CONTEXT = createDndContext(backend, context, debugMode)
+	}
+	return SINGLETON_DND_CONTEXT
 }