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

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

Offen
  • Stimmt etwas nicht?
#6,601 5 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
38/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Aktiv
Tech-Stack
react, typescript
Bereich
frontend

Rechercherichtung

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.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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.
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.