Chrome renderer freeze when TanStack row model gates a Suspense child
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Idoneità per principianti
- 35/100
- Tipo di issue
- Bug
- Chiarezza
- Da chiarire
- Stato di attività
- Tranquilla
- Stack tecnologico
- react, typescript, vite
- Ambito
- frontend
Direzione di ricerca
Clonare la riproduzione standalone collegata, eseguire pnpm install, pnpm check e pnpm preview:repro, quindi riprodurre il freeze in Chrome con il Synchronous active row button. Iniziare con l’esempio App ridotto e confrontare il comportamento con e senza table.getRowModel().rows.length; il lavoro è completato quando è stato stabilito se il problema appartiene a TanStack Table o all’interazione tra React e il browser e sono stati documentati una correzione confermata o un passaggio di consegne con ambito definito.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
Summary
In a Vite production preview, Chrome can freeze after a real browser click when all of the following happen in the same render path:
- A synchronous React state update switches TanStack Table from empty data to a fresh one-row
dataarray. - The component reads
table.getRowModel().rows.length. - That row-model read gates mounting a child inside
Suspense. - The child suspends by throwing a timer-backed promise.
The repro is standalone and uses only local React state/data.
Reproduction
Standalone repro:
https://github.com/HaukeSchnau/trusted-click-table-suspense-freeze-repro
Repro commit used while filing this issue:
https://github.com/HaukeSchnau/trusted-click-table-suspense-freeze-repro/tree/67c0ea8
git clone https://github.com/HaukeSchnau/trusted-click-table-suspense-freeze-repro.git
cd trusted-click-table-suspense-freeze-repro
pnpm install
pnpm check
pnpm preview:repro
Then open http://127.0.0.1:4174/ in Chrome and click Synchronous active row.
The repro command uses Vite production preview. I have not characterized Vite dev mode.
Expected behavior
The click completes, the Suspense fallback handles the thrown promise, and the page remains responsive.
Actual behavior
The Chrome tab freezes during the click. Reloading or closing the tab is required to recover.
Environment
- React
19.2.3 react-dom19.2.3@tanstack/react-table8.21.3- Vite
7.3.0 - TypeScript
5.9.3 - Node
v24.11.1 - pnpm
10.25.0 - Chrome
147.0.0.0fromnavigator.userAgent - macOS
26.4.1(25E253)
I have only confirmed the freeze in Chrome. Firefox and Safari are untested.
Reduced trigger
const columns: [] = [];
const coreRowModel = getCoreRowModel();
let resolved = false;
let promise: Promise<void> | undefined;
function Suspender() {
if (!resolved) {
promise ??= new Promise((resolve) => {
window.setTimeout(() => {
resolved = true;
resolve();
});
});
throw promise;
}
return null;
}
function App() {
const [active, setActive] = useState(false);
const table = useReactTable({
data: active ? [null] : [],
columns,
getCoreRowModel: coreRowModel,
});
return (
<>
{table.getRowModel().rows.length ? (
<Suspense fallback={null}>
<Suspender />
</Suspense>
) : null}
<button id="sync-active" onClick={() => setActive(true)}>
Synchronous active row
</button>
</>
);
}
Isolation notes
The repro does not use TanStack Router, TanStack Query, React Compiler, Vite React plugin, APIs, auth, or production app code.
This may ultimately be a React Suspense or browser interaction. I’m filing here first because the smallest library-specific condition I’ve isolated is the TanStack Table row-model read over fresh data; the reduced app becomes responsive when that row-model read is removed.
- Lingua principale
- TypeScript
- Stelle
- 28.4k
- Fork
- 3.6k
- Merge medio
- 1g 1h
- PR unite (30g)
- 7
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di TanStack/table
-
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 78/100
-
Difficoltà 5/5 Più di una settimana Idoneità per principianti 35/100
-
Difficoltà 3/5 1-2 giorni Idoneità per principianti 78/100
-
Difficoltà 5/5 Più di una settimana Idoneità per principianti 35/100
-
Difficoltà 3/5 1-2 giorni Idoneità per principianti 55/100
Tutte le issue di TanStack/table
Issue simili
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 84/100
bcgov/bc-wallet-mobile#4761 · 1 commento ·
-
external-issue to-triage
Difficoltà 2/5 1-3 ore Idoneità per principianti 88/100
-
area-deployment area-integrations triage:bot-seen
Difficoltà 2/5 Mezza giornata Idoneità per principianti 86/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 82/100
-
refactor
Difficoltà 2/5 1-3 ore Idoneità per principianti 84/100