useDndMonitor() hook always re-renders the component instead of firing callbacks

Doc says

The `useDndMonitor` hook can be used within components wrapped in a DndContext provider to monitor the different drag and drop events that happen for that DndContext

Example:

  useDndMonitor({
    onDrop: () => {
      // this callback will get call when the drop occurs
    }
  });

From the above signature, My understanding was that, onDrop will be called when user drop item on the droppable.

But it re-renders the component on each mouse move. It should not re-renders the component. It should only call the callback.

Here is demo Link https://codesandbox.io/s/dndkit-issue-demo-m5xc7j?file=/src/App.js

This makes this hook un-usable since it re-renders always regardless of an event i wish to get notify.

[saravanan10393]

@clauderic i have solved the issue outside of this package using the principle of use-context-selector package. Here is the code:

https://codesandbox.io/s/dndkit-issue-demo-m5xc7j?file=/src/dndmonitor.js

if this is fine, we can change the MonitorContext inside the src code as subscribe/notify.

[clauderic]

Can the Monitor logic can be implemented using some sort of event emitting method instead of relaying on the react context?

This would be ideal yes, as it would also be synchronous rather than the current asynchronous approach. Unfortunately this isn’t something I have time to into at the moment as there are higher priority issues for me to focus on. If this is something you need, I would gladly accept a PR where we can discuss this further.