Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[v9] Data update from external source doesn't trigger rerenders in components with table object references

Aperta
  • Qualcosa non va?
#6,601 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
38/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Start with the StackBlitz reproduction, comparing table1's reusable createTableHook-based component with table2 and the documented React Compiler subscription example. Read the data and React Compiler documentation sections linked in the report, then trace how external data updates reach table.getRowModel(). Done means the behavior is reproducible and the correct reactive usage or required change is clearly established for externally updated data.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

TanStack Table version

v9.2.4

Framework/Library version

React 19.3.0

Describe the bug and the steps to reproduce it

The documentation mentions that in v9 the data is an atom which is not reactive from my understanding. A common scenario in many applications is extracting components for header, body, footer, even the whole table to have a single component to style and manage.

Especially with React Compiler enabled, I noticed that many reusable components via createTableHook were not rerendering, although I could see state updates in the devtools. The documentation explains this behaviour here, suggesting the following:

If a component depends on several state slices, subscribe to table.store and return all of those slices from the selector. Keep the state-dependent Table calls inside the Subscribe render function:

The selector must include every state slice that can change the result of table.getRowModel() for this table. That may include filtering, sorting, grouping, expansion, or pagination, depending on the features in use.

While I can use table.Subscribe to select the table feature states, I haven't found a way to subscribe to data changes other than to pass the whole data with prop drilling to sync data changes with consumer components (I still won't use the data, I will use row models, but at least this ensures row model consumers will be rerendered when data changes). There is an example that shows a reusable TableBody component, but this has the same issue: if data changes and table subscribed states are not the reason why (see scenarios below), the component will not rerender and stale data will be shown until a pagination, filter, sorting or any other subscribed feature state is updated.

There are several valid scenarios where this may be needed, cases where data may be externally updated and the table needs to rerender to show the latest state, such as:

  • if data is a React state, calling setState
  • using Tanstack Query, there is polling, refetchOnWindowFocus or infinite query scroll event listeners
  • Websocket updates

In the sandbox you will find 2 tables and the realtime data from the state which I update every 2 seconds:

  • table1 is based on a datatable component extracted via createTableHook, similar to v8 style reusable table components. While the documentation says that the changes in data will cause the row models to be regenerated, the table object itself is a stable reference which has not changed (feature states have not changed), so although table.getRowModel() returns different, new data, the table object doesn't trigger a rerender to reflect that since no subscribed state has been updated.

  • table2 is comes from an example from the documetation where the table reusable components are consumed in the same component where the data and table live (App in this case). While the table rows update, I think this example is misleading in the documentation as the nested components are updated because the App component rerenders due to setData rather than the Tanstack Table internal signals. If I were to have a new component in between, so App consumes NewComponent which consumes DatatableBody, the table rows will not be rerendered just like in table1.

This behaviour theoretically could apply to any table option change as well (because they are not states), I don't know if this may be an issue or not for some users, just stating what I found. Also, while this behaviour is more evident in apps with React Compiler enabled due to a potential case of internal mutability, the same behaviour should happen without the compiler as well with manual memoization. The only difference is that without the compiler, by default if the data changes, it will be in the same or a higher component than the table components, so every component below will be rerendered, masking this issue.

I hope it's a valid issue and not me not understanding how to new state management works under the hood, wasting your time :(

What is the best way to handle this scenario where I want to have table data that may be updated externally?
What is the correct way to defined reusable components via createTableHook that are reactive to the row model changes? Are there any examples?

PS: Fantastic job on the v9 update btw, apart from this, I have been really enjoying it and the codebase looks cleaner than ever.

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://stackblitz.com/edit/github-eyxvcbv9?file=src%2Fmain.tsx

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

None

Terms & Code of Conduct
  • I agree to follow this project's Code of Conduct
  • I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
Lingua principale
TypeScript
Stelle
28.5k
Fork
3.6k
Merge medio
1g 14h
PR unite (30g)
4

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di TanStack/table

Tutte le issue di TanStack/table

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.