Releases: react-dnd/react-dnd
v13.1.1
react-dnd
Patch
- Re-register drag sources in hooks API when
item.type
changes - Export missing typings
react-dnd-html5-backend
Patch
- Export
HTML5Context
,HTML5BackendOptions
interfaces
v13.1.0
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.
v13.0.1
Patch Updates
- Add invariant() invocations in useDrag, useDrop to verify that spec functions are used instead of objects
- Fix handler registration memory leak issue with useDrag, useDrop
v13.0.0
React-DnD v13, Others v12
v12 was largely structural and organizational, but some issues were discovered shortly after release that warranted changing the hooks API.
Breaking Changes
useDrag
,useDrop
hooks accept functions that create spec objects instead of spec objects directly. Clients can think about the API to useDrag() and useDrop() as being analogous to useMemo(). This allows clients to have direct control over when their DnD specifications are re-generated (which internally reattaches them to the DnD system).- Use jsx-factory throughout the library
Non-Breaking Changes
- Add HTML native draggable type to HTML5Backend (see new example)
- Clients can specify a
rootElement
component in the HTML5Backend options to localize where DnD will process events in the client app. - react-dnd-test-utils has improved support for testing with HTML5Backend and using @testing-library/react to simulate drag-and-drop sequences.
v11.1.3
Patch
Update .npmignore files so that tsbuildinfo files are not included in publication. This reduces package sizes.
v11.1.2
v11.1.0
v11.0.0
Breaking Changes
Update Backends to use named exports for BackendFactory functions instead of default exports.
e.g.
import HTML5Backend from 'react-dnd-html5-backend
👇
import { HTML5Backend } from 'react-dnd-html5-backend
In general, throughout the app we've minimized the usage of default exports as well. They interfere with type correctness and screw with UMD builds (e.g. having to scrape a .default
property off of a UMD global).
Minor Changes
- Expose internal hook
useDragDropManager
at top level - Add profiling function to backend interface
- Make handler functions public on backends
Patch Changes
- Correct memory leak in drag previews (#2423)
- Improve and correct typings
v10.0.2
Patch
dnd-core: Use updated version @react-dnd/asap
with browser variant support, this allows us to drop syntheticDefaultImports in dnd-core.