Is React-SortableJS 6.1.4 compatible with React 18?

[SVenkat99]

I have tried implementing this package (6.1.4) with React 18, and it looks like the state is not updated property after drop, if the approach is nested. Can someone please have a look on this?

[PrabhatO]

Facing the same issue with package(6.1.4) with react 18, state not updating in case of nested structure

[Priyanka1794]

Facing the same issue..

[Heilemann]

Same.

[BenGladman]

I've found that this problem is due to automatic batching. You can work around it by wrapping the setList function in flushSync:

import { flushSync } from 'react-dom';

...then...

<ReactSortable setList={(items) => flushSync(() => onChange(items))} />

[artsiadi]

I've found that this problem is due to automatic batching. You can work around it by wrapping the setList function in flushSync:

import { flushSync } from 'react-dom';

...then...

<ReactSortable setList={(items) => flushSync(() => onChange(items))} />

Hi, this fix did not work for us (and we get warnings in the console for using flushSync inside a lifecycle method). Seems like the component state is not updated.

Did someone find a workaround? Thanks!

[inkiltie]

Same issue. Unusable on React 18 and flushSync do not solve anything for my project. Any updates on React 18 compatibility?

[IAmVisco]

Dropping this on top, in React 18 StrictMode the animations are really bugged for me during the development but work fine in the production build. I didn't not suspect this at first and spent quite some time trying to fix the animations only to turn off them in the end and accidentally find out that they work fine on the production build.

[etiennelacoursiere]

I've found that this problem is due to automatic batching. You can work around it by wrapping the setList function in flushSync:

import { flushSync } from 'react-dom';

...then...

<ReactSortable setList={(items) => flushSync(() => onChange(items))} />

This worked for us but seems precarious.. we get some errors in the console.

flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.

[BenGladman]

@etiennelacoursiere I changed it to this later on, which I think fixes that problem:

      setList={(newSteps, sortable) => {
        if (sortable) {
          // flushSync required for this to work in React 18
          flushSync(() => onChange(newSteps));
        } else {
          // called from component constructor, where flushSync throws error
          onChange(newSteps);
        }
      }}

[etiennelacoursiere]

@etiennelacoursiere I changed it to this later on, which I think fixes that problem:

      setList={(newSteps, sortable) => {
        if (sortable) {
          // flushSync required for this to work in React 18
          flushSync(() => onChange(newSteps));
        } else {
          // called from component constructor, where flushSync throws error
          onChange(newSteps);
        }
      }}

hmm, yeah It got rid of the errors I had in the console, but can't say I understand why. Care to explain?

[mikebm]

Same issue here, busted in react 18. The drop never works in development builds, but production builds it works fine. flushSync did not fix it for me either.

[mikebm]

I did get it to somewhat work - Adding the prop group="grouped" seemed to make things behave. Sometimes it feels like I have to drag upwards to get it to start working. But it made it somewhat usable...

[s-barsch]

I am also having issues. Does someone know of a different package with the same functionality?

[RemLawrence]

Same issue. Passing 'dropBubble' to ReactSortable resolved it for me.