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

[Malien]

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,

2. ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
   <App />
   </React.StrictMode>
   )

3. Follow the guide precisely
4. *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

[faradaytrs]

Same here, any plans to resolve this?

[100terres]

You can follow the progress of this issue here: https://github.com/react-forked/dnd/issues/317

[Shahzad6077]

any updates on this issue?

[mjoycemilburn]

Hit this issue today too. 'Fixed' by removing the components round the rendering ofin my index.js.

[enisdenjo]

Beware guys that StrictMode also helps you with preparing your development builds for production. Make sure to check whether the issue is present in production too.

[jbournonville]

Will it be fixed ? I'm not a fan of removing StrictMode... it's a dirty fix and React 18 is not in rc anymore.

[Danzo7]

any fix yet?

[Malin88]

same problem here :/

[aujisti-ador]

same issue. Is there any fix for avoiding a way around like removing strict mode?

[ShekibAziz]

same problem

[peterb0yd]

yup, same thing

[bhagi108]

going through same issue.

[Meligy]

The workaround here works OK for me: https://github.com/atlassian/react-beautiful-dnd/issues/2399#issuecomment-1167427762

[Xhale1]

If anyone is looking for a less hacky solution, I have a fork of this library @hello-pangea/dnd which natively supports react 18 and react strict mode.

Just replace react-beautiful-dnd with @hello-pangea/dnd and you should be good to go 👍

[Kahitar]

If anyone is looking for a less hacky solution, I have a fork of this library @hello-pangea/dnd which natively supports react 18 and react strict mode.

Just replace react-beautiful-dnd with @hello-pangea/dnd and you should be good to go 👍

Is this going to be merged into react-beautiful-dnd eventually?

[RGBWang]

same problem

[Hollumidhe]

@Xhale1 I seems not to get it, replacing it means installing @hello-pangea/dnd](https://github.com/hello-pangea/dnd). won't it affect the functions?

[100terres]

@Kahitar

Is this going to be merged into react-beautiful-dnd eventually?

I do not think it will. Atlassian do not plan to put more effort on this library. At least in the foreseeable future.

[100terres]

@olumide12-cell

@Xhale1 I seems not to get it, replacing it means installing @hello-pangea/dnd](https://github.com/hello-pangea/dnd). won't it affect the functions?

I'm not certain to understand the question, but yes you should try to install @hello-pangea/dnd instead of react-beautiful-dnd and replace all the imports in your code.

@hello-pangea/dnd is a fork of react-beautiful-dnd and it supports react 18 with strict mode enabled.

[linxiaowu66]

focus on this issue

[arfanliaqat]

Ran into same problem

[WGTW]

It's been nearly a year, please fix this.

[shunk76]

This article is helpful to me. https://medium.com/@wbern/getting-react-18s-strict-mode-to-work-with-react-beautiful-dnd-47bc909348e4

[Grawl]

I can confirm that solution from @shunk76 comment is working

[ThaJay]

I can confirm that the solution https://github.com/atlassian/react-beautiful-dnd/issues/2350#issuecomment-1276934082 by 100terres is working.

This library continues to be relied upon heavily by Atlassian products, but we are focused on other priorities right now and have no current plans for further feature development or improvements.

It will continue to be here on GitHub and we will still make critical updates (e.g. security fixes, if any) as required, but will not be actively monitoring or replying to issues and pull requests.

This opening statement from the readme does not sound true as strict mode seems pretty critical to me for any serious production environment.

[immortalt]

This article is helpful to me. https://medium.com/@wbern/getting-react-18s-strict-mode-to-work-with-react-beautiful-dnd-47bc909348e4

Yes, this works.

[ranlix]

This article is helpful to me. https://medium.com/@wbern/getting-react-18s-strict-mode-to-work-with-react-beautiful-dnd-47bc909348e4

Awesome! It works!

[minhtrung0110]

After some searching, I came across a very helpful snippet by GiovanniACamacho, which was converted to TypeScript by Meligy in that same issue, which resolved my problems and made me able to drag and drop again, with Strict Mode enabled.

import { useEffect, useState } from "react"; import { Droppable, DroppableProps } from "react-beautiful-dnd"; export const StrictModeDroppable = ({ children, ...props }: DroppableProps) => { const [enabled, setEnabled] = useState(false); useEffect(() => { const animation = requestAnimationFrame(() => setEnabled(true)); return () => { cancelAnimationFrame(animation); setEnabled(false); }; }, []); if (!enabled) { return null; } return <Droppable {...props}>{children}</Droppable>; };

[checklist]

I switched to https://github.com/hello-pangea/dnd and all issues were solved.

[Chaobanh27]

If anyone is looking for a less hacky solution, I have a fork of this library @hello-pangea/dnd which natively supports react 18 and react strict mode.

Just replace react-beautiful-dnd with @hello-pangea/dnd and you should be good to go 👍

Tks man you helped me

[leikoilja]

Here is a typescript version for the Droppable components compatible with strict mode. I can confirm that it works on NextJS 13

[CarloshDevBR]

https://github.com/hello-pangea/dnd is a fork that solves this stickmode problem

The funniest thing is that the lib was working correctly and suddenly it stopped working, I'm using React 18.2.0, Next 14.0.2

[SumanKisku]

https://github.com/hello-pangea/dnd is a fork that solves this stickmode problem

The funniest thing is that the lib was working correctly and suddenly it stopped working, I'm using React 18.2.0, Next 14.0.2 @CarloshDevBR Is it still causing problem?

[CarloshDevBR]

I didn't have any more problems

[dimple06varshney]

I also faced the same issue, as I tried to find out the difference between the code I wrote and the example code from the documentation, I found is only when I commented out, that it works.

[evgar]

Run into same problem

[mskVitalii]

Run into same problem with Next.js

Set StrictMode to false and it's working + made rnd work only on client (works only after useEffect)