Multiple containers : possibility of hitting minified error due to too many re-renders

[cryy-bit]

Since dragging across multiple containers requires you to manipulate your data state by using a set state dispatch in an onDragOver callback, there is a possibility of encountering a minified error due to too many re-renders. In the video, I've managed to trigger this error by repeatedly dragging items back and forth across columns.

I'm currently building a Kanban board React app and have been encountering this minified error. My sortable component is quite complex, and I also have states with useEffect in my component, which makes the issue worse. I understand that to move items across columns, you need to use setState in the onDragOver event because of the multiple sortable contexts. However, the only way for this to work is to move items while on drag over. Is there a better way to do this without hitting a minified error?

One option I could consider is to avoid using onDragOver for setting the state of the data and only handle it via onDragEnd, using onDragOver solely to style my components with a drop indicator. This seems to be the safest approach. However, I would love to use the out-of-the-box animations if possible.

https://github.com/clauderic/dnd-kit/assets/77331038/243c234a-44cb-40dc-9549-9b173fada1ca

[SonuKumar145]

in real case scenerio, your user won't do that. you can use setTimeout of around 300ms , after that only call the setState function in onDragEnd. this will be useful if the user is dragging the item from first container to the containers which lies far from it.