dnd-kit: 'Maximum update depth exceeded' error with Sortable

Again, something about this seems horribly wrong, but the idea is that you break the recursion by delaying the call to setState. The same thing would probably work with setImmediate / setTimeout(..., 0).

Simple example of a component that would break due to exceeding the stack limit:

function Component() {
  const [number, setNumber] = useState(0);

  useEffect(() => {
    if (number >= 100000) return;
    setNumber(number => number + 1);
  }, [number]);

  return <>{number}</>;
}

You can break the recursion this way:

function Component() {
  const [number, setNumber] = useState(0);

  useEffect(() => {
    if (number >= 100000) return;
    setTimeout(() => setNumber(number => number + 1), 0);
  }, [number]);

  return <>{number}</>;
}

Here’s a quick CodePen to demonstrate: https://codepen.io/pattrn/pen/BaMzERM.

It’s difficult for me to give an exact example from the documentation, since I ported everything over to MobX and did significant refactoring, so there’s no longer an easy one-to-one comparison.

Prolly this issue shouldn’t be closed then

Getting the same issue; same error with <Accessibility>.

Hey, @clauderic I still have the error at your link Plise check it. https://user-images.githubusercontent.com/7955306/148953660-4b38083c-bc09-463e-9daf-37625f3ca0b8.mov

@clauderic I checked the forked sandbox aswell and was able to replicate it. Imo this should be opened again.

Error-Gif

@Dm1Korneev @clauderic I can confirm.

I’m also experience Maximum update depth exceeded in the forked codesandbox project.

There is also error in Accessibility component:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    at DndContext (https://9iy42.csb.app/node_modules/@dnd-kit/core/dist/core.esm.js:1823:67)
    at App (https://9iy42.csb.app/src/App.js:111:61)

Memoize your objects, so you don’t pass a new ref every time, which causes the DOM tree to refresh.

const filteredItems = useMemo(() => activeId && isOutOfContainer ? items.filter((item) => item !== activeId) : items, [items, activeId, isOutOfContainer]);

This is a problem throughout the code. For instance, you are also creating a new Object, and therefore passing a new ref, every time you compute your props inside SorteableItem.