> Wow, this is quite a thread. There are many errors caused by a variety of things described here.

[WaqasE]

Wow, this is quite a thread. There are many errors caused by a variety of things described here.

Mine seems caused by re-rendering of my DropTarget component while hovering or dropping on it.

In my use case, I was doing things in the hover() and drop() functions which resulted in the drop target component being re-rendered. Consequently, it seems the target associated with the current drag operation is lost. A subsequent use of monitor.isOver() or monitor.canDrop() in the collect function throws an exception as a result.

My current workaround is to wrap my action in the drop() function in requestAnimationFrame() although setTimeout() would work too. Essentially, I'm delaying the re-rendering until after the drop operation has finished.

My use case doesn't seem so odd. I wonder if there's a better way of avoiding this.

I have a column of items in a toolbox that can be dropped into a form. (e.g. Add a text box to a questionnaire.)

Ideally the hover would be showing a preview of the dragged item in its prospective location until dropped.

The next best thing would be for the preview to be a generic placeholder although this may still cause the same re-render.

UPDATE: The re-rendering of the component wasn't directly the problem. I discovered that I was retaining a reference to the object produced by beginDrag() which seems to have been the real problem. I'm going to change to pass the bare minimum instead and avoid keeping references to it.

I'm still facing this issue, how did you fix it? this is my drop.
const [{ isOver }, drop] = useDrop(() => ({
accept: "JSON",
drop: (item) => addDataToCycle(item),
collect: (monitor) => ({
isOver: !!monitor.isOver(),
}),
}));

Originally posted by @WaqasE in #236 (comment)

[percyhanna]

Most of the other issues in the other thread were caused by changing or unmounting the component that is calling useDrop. So we would need a lot more sample code to better understand the possible issue. For example, at least the entire component that is calling useDrop and then the components that are rendering that component.