fix: don't lose drag source/preview if disconnected and immediately reconnected

[jtbandes]

This fixes a bug demonstrated in the following codesandbox. One drag source works, and the other does not.
https://codesandbox.io/s/xenodochial-christian-nu3rlw?file=/src/App.tsx

Screen.Recording.2023-04-27.at.9.51.40.AM.mov

I first encountered this bug in 14.0.3, so I think it was introduced in #3290. At the time I skipped upgrading this package because I couldn't resolve it. Here we are 1.5 years later and it seems like the bug is still present 😅

The bug is triggered by the combination of useDrag({ ... options: { dropEffect: "copy" } }) and useEffect(() => setValue(1)):

• The setValue call triggers the component to render again.
• A new options object { dropEffect: "copy" } is allocated and passed into useDrag.
• Since dragSourceOptions is a dependency for this useLayoutEffect, connector.disconnectDragSource() and connector.reconnect() are called:

  react-dnd/packages/react-dnd/src/hooks/useDrag/useDragSourceConnector.ts

  Lines 20 to 24 in 7c88c37

  	useIsomorphicLayoutEffect(() => {
  	connector.dragSourceOptions = dragSourceOptions || null
  	connector.reconnect()
  	return () => connector.disconnectDragSource()
  	}, [connector, dragSourceOptions])

• Inside reconnectDragSource(), didChange is set to false because didDragSourceOptionsChange returns false. It returns false because the new dragSourceOptions are shallowEqual to the previous options.

  react-dnd/packages/react-dnd/src/internals/SourceConnector.ts

  Lines 101 to 107 in 7c88c37

  	private reconnectDragSource(): boolean {
  	const dragSource = this.dragSource
  	// if nothing has changed then don't resubscribe
  	const didChange =
  	this.didHandlerIdChange() ||
  	this.didConnectedDragSourceChange() ||
  	this.didDragSourceOptionsChange()

  react-dnd/packages/react-dnd/src/internals/SourceConnector.ts

  Lines 179 to 184 in 7c88c37

  	private didDragSourceOptionsChange(): boolean {
  	return !shallowEqual(
  	this.lastConnectedDragSourceOptions,
  	this.dragSourceOptions,
  	)
  	}

This patch fixes the bug by adding extra state variables, isDragSourceConnected & isDragPreviewConnected. When these are false, backend.connectDragSource & backend.connectDragPreview will be called.

[jtbandes]

Hi @darthtrevino – do you think there's a chance you'd have time to look at this in the near future, or do you know when you might get a chance? Thanks for your work on this library 🙌