preact: 10.18 regression: setState triggers DOMException: Node.insertBefore: Child to insert before is not a child of this node

@JoviDeCroock I’ve managed to reproduce the issue in a Stackblitz environment, using preact 10.19.7.

The issue can be seen if a keyed list item is moved to an earlier position, but also rendered as null. Here is the full example.

import { render } from 'preact';
import { useState } from 'preact/hooks';

const firstList: Item[] = [
  { id: 'One' },
  { id: 'Two' },
  { id: 'Three' },
  { id: 'Four' },
];

const secondList: Item[] = [
  { id: 'One' },
  { id: 'Four', renderAsNullInComponent: true },
  { id: 'Six' },
  { id: 'Seven' },
];

render(<App />, document.body);

export function App() {
  let [list, setList] = useState(firstList);

  return (
    <>
      <p>
        This is reproduction of{' '}
        <a href="https://github.com/preactjs/preact/issues/4221">
          Preact Issue 4221
        </a>
        . The list diffing breaks when clicking the button.{' '}
      </p>
      <div>
        {list.map((item) => (
          <RenderedItem key={item.id} item={item} />
        ))}
      </div>
      <button
        onClick={() => {
          setList(secondList);
        }}
      >
        Switch list
      </button>
    </>
  );
}

I was going to reproduce in a smaller repo but then I saw 10.20.2. I can reproduce it in 10.20.1 but not in 10.20.2 so this issue can most likely be closed.

Thanks!

Yes, can confirm this is now fixed with 10.20.2. Cheers!

Thank you so much for the reproduction, mind checking out #4312 to see if it addresses your case in your bigger applications?

The app is very “basic”, as in it only uses Preact class-based components and nothing else. The htm package is used for constructing the DOM (no JSX). No other Preact-related libraries are used. No hooks, nor compat, nor signals, nor Suspense, not memo, not forwardRef. WebSockets are used directly without an intermediate library (but are not involved here).

The error comes from here, called from a click event handler: https://git.sr.ht/~emersion/gamja/tree/141fc3e07c69b1985719d6075e2f101a3f73d6fe/item/components/app.js#L535

The error doesn’t happen consistently, have to click multiple times to trigger it.