Nextjs with @dnd-kit

[RSelwa]

Hi there,
we got a similar problem than #1436 (comment), even with the version 0.0.5 and Next 14/15. The solution to set reactStrictMode to false works fine but for production mode, set reactStrictMode to false is not good.

Below are the examples used with Next (not working) and Vite (working).

import React, { useState } from 'react';
import { ControlledExample } from './drag';

export function App(props) {
  const [items, setItems] = useState([0]);

  function insert() {
    setItems([...items, items.length]);
    console.log(items);
  }

  return (
    <div className='App'>
      <button onClick={insert}>OK</button>
      <ControlledExample it={items} />
    </div>
  );
}

import { DragDropProvider } from '@dnd-kit/react';
import { useSortable } from '@dnd-kit/react/sortable';
import { move } from '@dnd-kit/helpers';

const styles = { display: 'inline-flex', flexDirection: 'row', gap: 20 };

export function ControlledExample({ it }) {
  const [items, setItems] = useState([it]);

if(!window) return 

useEffect( () => {
  setItems(it)
}, [it])

  return (
    <DragDropProvider
      onDragEnd={event => {
        setItems(items =>
          move(items, event.operation.source, event.operation.target)
        );
      }}
    >
      <div style={styles}>
        {items.map((id, index) => (
          <Sortable key={id} id={id} index={index} />
        ))}
      </div>
    </DragDropProvider>
  );
}

function Sortable({ id, index }) {
  const { ref } = useSortable({ id, index });

  return <button ref={ref}>Item {id}</button>;
}