React 18 (RC 0) StrictMode rendering breaks ability to find node by it's draggable id

Author: MalienCreated Dec 22, 2021Updated Jul 30, 2025
Labelsuntriagedunconfirmed-bug

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

  1. yarn add react@rc react-dom@rc react-beautiful-dnd,
javascript
ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)
  1. Follow the guide precisely
  2. *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