Hydration and its errors: when server HTML and the client disagree

import { GlobalRegistrator } from "@happy-dom/global-registrator";
GlobalRegistrator.register(); // a DOM for Node; in a browser you already have one
globalThis.IS_REACT_ACT_ENVIRONMENT = true;
const { createElement: h, useEffect, useState, act } = await import("react");
const { renderToString } = await import("react-dom/server");
const { hydrateRoot } = await import("react-dom/client");

let isServer = true;
function BadClock() { // different output on server and client: a mismatch
  return h("p", null, isServer ? "Rendered on the server" : "Rendered in the browser");
}
function GoodClock() { // same first render everywhere, then update after hydration
  const [where, setWhere] = useState("Loading…");
  useEffect(() => setWhere("Rendered in the browser"), []);
  return h("p", null, where);
}
for (const Clock of [BadClock, GoodClock]) {
  isServer = true;
  const box = document.createElement("div");
  box.innerHTML = renderToString(h(Clock)); // the HTML the server sent
  isServer = false;
  const problems = [];
  await act(() => hydrateRoot(box, h(Clock), { onRecoverableError: (e) => problems.push(e.message.split(".")[0]) }));
  console.log(Clock.name, "→", box.textContent, "|", problems.length ? problems[0] : "no hydration error");
}