Profiling React apps: measure first, then fix the real cause

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, Profiler, useState, memo, act } = await import("react");
const { createRoot } = await import("react-dom/client");

function SlowList({ items }) {
  const end = performance.now() + 10; while (performance.now() < end) {} // pretend each render costs 10 ms
  return h("ul", null, items.map((i) => h("li", { key: i }, i)));
}
const MemoSlowList = memo(SlowList);
const items = ["Tea", "Rice", "Dal"];
let type;
function Shop({ List, onRender }) {
  const [query, setQuery] = useState("");
  type = () => setQuery((q) => q + "a"); // typing in a search box above the list
  return h("div", null, h("input", { value: query, readOnly: true }),
    h(Profiler, { id: "list", onRender }, h(List, { items })));
}
for (const List of [SlowList, MemoSlowList]) {
  const updates = [];
  const onRender = (id, phase, actualDuration) => { if (phase === "update") updates.push(actualDuration >= 5 ? "slow" : "skipped"); };
  const root = createRoot(document.createElement("div"));
  await act(() => root.render(h(Shop, { List, onRender })));
  for (let i = 0; i < 3; i++) await act(() => type());
  console.log(List === SlowList ? "plain list:" : "memo list: ", updates.join(", "));
  await act(() => root.unmount());
}