Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Chrome renderer freeze when TanStack row model gates a Suspense child

Offen
  • Stimmt etwas nicht?
#6,243 0 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
35/100
Issue-Typ
Bug
Klarheit
Muss geklärt werden
Aktivitätsstatus
Ruhig
Tech-Stack
react, typescript, vite
Bereich
frontend

Rechercherichtung

Klonen Sie die verknüpfte eigenständige Reproduktion, führen Sie pnpm install, pnpm check und pnpm preview:repro aus und reproduzieren Sie dann den Freeze in Chrome mit dem Synchronous active row button. Beginnen Sie mit dem reduzierten App-Beispiel und vergleichen Sie das Verhalten mit und ohne table.getRowModel().rows.length; abgeschlossen bedeutet, festzustellen, ob das Problem zu TanStack Table oder zur React/Browser-Interaktion gehört, und einen bestätigten Fix oder eine abgegrenzte Übergabe zu dokumentieren.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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:

  1. A synchronous React state update switches TanStack Table from empty data to a fresh one-row data array.
  2. The component reads table.getRowModel().rows.length.
  3. That row-model read gates mounting a child inside Suspense.
  4. 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-dom 19.2.3
  • @tanstack/react-table 8.21.3
  • Vite 7.3.0
  • TypeScript 5.9.3
  • Node v24.11.1
  • pnpm 10.25.0
  • Chrome 147.0.0.0 from navigator.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.

Vorherrschende Sprache
TypeScript
Sterne
28.5k
Forks
3.6k
Ø Merge
1 T. 3 Std.
Gemergte PRs (30 T.)
22

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus TanStack/table

Alle Issues in TanStack/table

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.