React 18 (RC 0) StrictMode rendering breaks ability to find node by it's draggable id
Expected behavior
React Beautiful DnD should work as advertised on the latest React version with StrictMode enabled (which is a common default nowadays)
Actual behavior
Library fails to find draggable nodes with messaged logged (in development mode):
Unable to find draggable with id: card-2
When using the, now deprecated, ReactDOM.render API (instead of new ReactDOM.createRoot), React is forced to work in React 17 compatible manner, which eliminates the problem.
As I've found out, removing <React.StrictMode /> wrapper resolved the issue, which means React Beautiful DnD is not compatible with Strict Effects
With the release of React 18, StrictMode gets an additional behavior that we call “strict effects” mode. When strict effects are enabled, React intentionally double-invokes effects (mount -> unmount -> mount) for newly mounted components. Like other strict mode behaviors, React will only do this for development builds.
Steps to reproduce
yarn add react@rc react-dom@rc react-beautiful-dnd,
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<App />
</React.StrictMode>
)- Follow the guide precisely
- *profit*
Suggested solution?
I am not familiar with innerworkings of the library, but I suspect the way registrations registry.draggable are handled makes StrictMode incompatible (I've only looked into it in debugger for like 10 seconds). I suspect other registrations also fail
What version of React are you using?
18.0.0-rc0
What version of react-beautiful-dnd are you running?
13.1.2
What browser are you using?
Safari 15.2 beta, Chrome 96
Demo
https://codesandbox.io/s/vertical-list-forked-hd8ve?file=/index.js
Source: atlassian/react-beautiful-dnd