Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

Chrome renderer freeze when TanStack row model gates a Suspense child

Ouverte
  • Quelque chose ne va pas ?
#6,243 0 commentaires 1 réaction 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
35/100
Type d'issue
Bug
Clarté
À clarifier
Activité
Calme
Stack technique
react, typescript, vite
Domaine
frontend

Piste de recherche

Clonez la reproduction autonome liée, exécutez pnpm install, pnpm check et pnpm preview:repro, puis reproduisez le gel dans Chrome avec le Synchronous active row button. Commencez par l’exemple App réduit et comparez le comportement avec et sans table.getRowModel().rows.length ; le travail est terminé lorsqu’il est établi si le problème relève de TanStack Table ou de l’interaction entre React et le navigateur, et qu’un correctif confirmé ou un transfert avec périmètre défini est documenté.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

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.

Langage dominant
TypeScript
Étoiles
28.5k
Forks
3.6k
Merge moyen
2 j 3 h
PR mergées (30 j)
3

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de TanStack/table

Toutes les issues de TanStack/table

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.