fix(domain): memoize the pages-table data slice to stop an infinite render loop (#88)

This commit is contained in:
bookingseo 2026-07-19 12:14:23 +07:00 committed by GitHub
parent 20d3de0e08
commit 01a97de55a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 11 additions and 4 deletions

View File

@ -181,7 +181,7 @@ test.describe("Domain Overview filters", () => {
); );
await applyFilters(page, "pMinTraffic", "20"); await applyFilters(page, "pMinTraffic", "20");
const domainInput = page.getByPlaceholder("Enter a domain").nth(1); const domainInput = page.getByPlaceholder("Enter a domain").first();
await domainInput.click(); await domainInput.click();
await domainInput.press( await domainInput.press(
process.platform === "darwin" ? "Meta+A" : "Control+A", process.platform === "darwin" ? "Meta+A" : "Control+A",

View File

@ -7,8 +7,11 @@ import {
type TestInfo, type TestInfo,
} from "@playwright/test"; } from "@playwright/test";
export const PRIMARY_TEST_DOMAIN = "primary.example"; // Real .com suffix on purpose: form-submit validation (isValidDomainHost via
export const SECONDARY_TEST_DOMAIN = "secondary.example"; // tldts) rejects the reserved .example TLD, and these constants reach the one
// test that submits through the real form instead of URL navigation.
export const PRIMARY_TEST_DOMAIN = "primary.example.com";
export const SECONDARY_TEST_DOMAIN = "secondary.example.com";
const RESPONSIVE_TIMEOUT_MS = 1_500; const RESPONSIVE_TIMEOUT_MS = 1_500;
const INPUT_LATENCY_BUDGET_MS = 8_000; const INPUT_LATENCY_BUDGET_MS = 8_000;

View File

@ -78,8 +78,12 @@ function DomainPagesTableComponent({
], ],
[currentSortOrder, domain, onSortClick, sortMode], [currentSortOrder, domain, onSortClick, sortMode],
); );
// Memoized on purpose: a fresh slice every render defeats TanStack Table's
// data-keyed memo, so _autoResetPageIndex fires each render and its setState
// schedules another one — an unbounded render loop that freezes the tab.
const tableData = useMemo(() => rows.slice(0, 100), [rows]);
const table = useAppTable({ const table = useAppTable({
data: rows.slice(0, 100), data: tableData,
columns, columns,
}); });
useDomainRenderDebug("DomainPagesTable", { useDomainRenderDebug("DomainPagesTable", {