TanStack / TanStack/table

Chrome renderer freeze when TanStack row model gates a Suspense child

Open
#6,243 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
28.4k
Forks
3.6k
Avg merge
1d 14h
Merged PRs (30d)
10

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Clone the linked standalone repro, run pnpm install, pnpm check, and pnpm preview:repro, then reproduce the freeze in Chrome with the Synchronous active row button. Start with the reduced App example and compare behavior with and without table.getRowModel().rows.length; done means establishing whether the issue belongs to TanStack Table or the React/browser interaction and documenting a confirmed fix or scoped handoff.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript, vite
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.