useLiveQuery still rebuilds on every page change under a DbClient (#2316 window reuse is skipped) #2345

// bun bench.mjs <no-client|client|client-setWindow>
import { GlobalRegistrator } from "@happy-dom/global-registrator";

const { setTimeout, clearTimeout } = globalThis;
GlobalRegistrator.register();
// happy-dom timers have no unref(), which the collection cleanup queue calls
Object.assign(globalThis, { setTimeout, clearTimeout });

// Imported after happy-dom so react-db sees a window and commits window moves in a layout effect
const { createElement, useLayoutEffect } = await import("react");
const { createRoot } = await import("react-dom/client");
const { DbClient, DbProvider, useLiveQuery, collectionOptions, createCollection, localOnlyCollectionOptions, eq, sum } =
  await import("@tanstack/react-db");

const mode = process.argv[2] ?? "no-client";
const withClient = mode !== "no-client";
const pageInKey = mode !== "client-setWindow";
const PAGE_SIZE = 20;

const orders = Array.from({ length: 5000 }, (_, i) => ({ id: i + 1, status: i % 2 ? "closed" : "open" }));
const items = Array.from({ length: 20000 }, (_, i) => ({ id: i + 1, orderId: (i % 5000) + 1, amount: (i % 97) + 1 }));
const openIds = orders.filter((order) => order.status === "open").map((order) => order.id);

function source(id, initialData) {
  const config = () => localOnlyCollectionOptions({ id, getKey: (row) => row.id, initialData });
  return withClient ? collectionOptions(id, config) : createCollection(config());
}
const ordersSource = source("orders", orders);
const itemsSource = source("items", items);

let waiter;
const collections = new Set();

function Table({ page }) {
  const offset = page * PAGE_SIZE;
  const { data, collection } = useLiveQuery({
    queryKey: pageInKey ? ["orders", page] : ["orders"],
    query: (q) => {
      const totals = q
        .from({ item: itemsSource })
        .groupBy(({ item }) => item.orderId)
        .select(({ item }) => ({ orderId: item.orderId, total: sum(item.amount) }));
      return q
        .from({ order: ordersSource })
        .where(({ order }) => eq(order.status, "open"))
        .leftJoin({ totals }, ({ order, totals }) => eq(order.id, totals.orderId))
        .orderBy(({ order }) => order.id)
        .limit(PAGE_SIZE)
        .offset(offset)
        .select(({ order, totals }) => ({ id: order.id, total: totals.total }));
    },
  });

  // Workaround: the page is left out of the queryKey and the window is moved before paint
  useLayoutEffect(() => {
    if (pageInKey || collection.utils.getWindow()?.offset === offset) return;
    void collection.utils.setWindow({ offset, limit: PAGE_SIZE });
  }, [collection, offset]);

  useLayoutEffect(() => {
    collections.add(collection);
    if (waiter && data.length === PAGE_SIZE && data[0].id === waiter.firstId) {
      waiter.resolve();
      waiter = undefined;
    }
  });
  return null;
}

const client = withClient ? new DbClient() : undefined;
const root = createRoot(document.createElement("div"));

async function goTo(page) {
  const done = new Promise((resolve) => (waiter = { firstId: openIds[page * PAGE_SIZE], resolve }));
  const start = performance.now();
  const table = createElement(Table, { page });
  root.render(client ? createElement(DbProvider, { client }, table) : table);
  await done;
  return performance.now() - start;
}

const first = await goTo(0);
const times = [];
for (const page of [1, 2, 3, 7, 4, 9, 10, 3, 12, 0]) times.push(await goTo(page));
times.sort((a, b) => a - b);
console.log(
  `${mode}: first page ${first.toFixed(0)} ms, page change median ${times[5].toFixed(1)} ms ` +
    `(min ${times[0].toFixed(1)}, max ${times[9].toFixed(1)}), live query collections: ${collections.size}`,
);
process.exit(0);