Side-effects in drop and endDrag

[jamesdbrock]

Something I have learned:

On a drop event, you may want to call back up the render tree to change some props or state.

Do your prop-changing side-effects in DragSourceProps.endDrag, not in DropTargetProps.drop.

During a drag, React.Basic.ReactDND will make component state changes to reflect the state of the drag. DropTargetProps.drop will fire before all of the dragging state changes have completed. DragSourceProps.endDrag will fire after all of the dragging stage changes have completed. If you change the props with a side-effect before the dragging state changes have completed, then the dnd components might get unmounted while they are still doing state changes to finish the drag. In that event, you will see runtime exceptions like this:

Uncaught Invariant Violation: Expected to find a valid source.
Uncaught Invariant Violation: Cannot call hover after drop.