2.0.0-rc.20: a non-keyed <Show> remounts its children in a loop when the condition reads an async memo/projection and a child writes the source on mount #4540

import { render } from "@solidjs/web";
import { createMemo, createProjection, createRenderEffect, createSignal, Show } from "solid-js";
import { expect, it } from "vitest";

const wait = (ms: number) => new Promise((r) => setTimeout(r, ms));

type Kind = "sync memo" | "sync projection" | "async memo" | "async projection";

function mount(kind: Kind) {
  let mounts = 0;
  const [version, setVersion] = createSignal(0, { ownedWrite: true });
  let value: number | undefined = kind.startsWith("sync") ? 1 : undefined;
  const firstAnswer = wait(10).then(() => {
    value = 1;
    setVersion((v) => v + 1);
    return 1;
  });
  let read: () => number | undefined;
  if (kind.endsWith("memo")) {
    const m = createMemo(() => (version(), value ?? firstAnswer));
    read = () => m();
  } else {
    const p = createProjection<{ data?: number }>(() => {
      version();
      return (value !== undefined ? { data: value } : firstAnswer.then((v) => ({ data: v }))) as never;
    }, {});
    read = () => p.data;
  }
  function Child() {
    mounts++;
    if (mounts > 20) throw new Error("remount loop");
    createRenderEffect(
      () => 0,
      () => void setVersion((v) => v + 1),
    );
    return <p>child</p>;
  }
  const el = document.createElement("div");
  const dispose = render(
    () => (
      <Show when={read() !== undefined}>
        <Child />
      </Show>
    ),
    el,
  );
  return { mounts: () => mounts, dispose };
}

it.each<Kind>(["sync memo", "sync projection", "async memo", "async projection"])(
  "%s: a non-keyed Show whose condition stays true mounts its child once",
  async (kind) => {
    const { mounts, dispose } = mount(kind);
    await wait(100);
    dispose();
    expect(mounts()).toBe(1);
  },
);