react-dnd

TLDR: useDrag and useDrop support both a memo pattern and a spec object now.

useDrag(() => spec) // good
useDrag(spec) // also good

In v13, we've tried to address some errors that were pervading with the react-dnd hooks API. Generally, making sure DragSource/DropTargets were up-to-date and that the system wasn't leaking handles was a precarious balancing act. Moving to a memo API pattern (e.g. useDrag(() => spec)) fixed this problem in our tests.

However, as we dug further into handler leakage issues, it became clear that anything using the hooks would reattach and receive a new handler ID whenever the spec changed at all. This was in contrast to the Decorator API's behavior of keeping stable handler IDs as the incoming props changed.

To fix the Hooks API to stop leaking handlers, we found a pretty simple solution: a classical class with a public setter for the spec object that's updated via a useEffect hook. This neatly avoids the mutating DragSource/DropTargets on every spec change. This had two effects: identifiers have been stabilized, and spec objects were usable again because changing them didn't cause DragSource/DropTarget instances to be regenerated and reattached.

In retrospect, this undoes the necessity of the major cut that happened with v13, but the Hooks API is much sturdier now. We hope that you find the improved memory stability in the hooks API to be useful in your projects.