table
table copied to clipboard
TanStack
Table doesn’t re-render with new React Compiler + React 19
TanStack Table version
v8.17.3
Framework/Library version
React 19 + React Compiler
Describe the bug and the steps to reproduce it
In the repo provided, run bun install and then bun dev.
Then, add some text to the input and click add. Observe that the table doesn’t re-render when the data passed in has changed (table.getRowModel().rows doesn’t seem to be updated).
Your Minimal, Reproducible Example - (Sandbox Highly Recommended)
https://github.com/erikshestopal/react-compiler-bug/blob/a92305ca44ee81b6d7ece76c96aacf163fe83970/src/App.tsx#L38
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
- [X] I agree to follow this project's Code of Conduct
- [X] 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.
This is unsurprising. This library (which I love) has been complicated to optimize since at least v7. They core instance returned from useReactTable doesn't rerender as one would expect in React, which means that the memoiziation that the compiler applies certainly breaks this library. I wouldn't expect a fix until v9.
I am also having difficulty applying the compiler due to the same issue. I am concerned that other libraries might have similar issues, making the application of the compiler worrisome.
Same exact issue.
We'll have to stick with "use no memo" directive for now for our table component.
Yep, use no memo on table components for now. A v9 alpha branch was recently created where we will focus on version bumping the peer dependencies for each framework that needs it.
Seems like doing the following solves it for me: https://github.com/TanStack/virtual/issues/743
I've the same problem with Next.js 15 & React 19 & Tanstack Table 8.20.5
use no memo in table component solves the problem.
I have some issues event with
use no memo
while without this trick the table body remains empty, than with it it renders the first content but dosen't get rerender
@dezerb can you provide more details/code snippets? I've been using 'use no memo' without a hitch. Curious to what you are running into.
ah i finally got it working, but i needed to add 'use no memo' to all files that import from @tanstack/react-table 😅
I have an issue rerender with sorting, although I've already added 'use no memo' at the top.
Same issue, in NextJS
"next": "^14.2.22",
"react": "^18.3.1",
If the page is "use client" rendered and uses my table component, checkboxes do not render (even though state is updated and I can log out selected rows). The 'use no memo' directive on page, component, subcomponent files have no effect for me.
No, unless someone wants to help experiment with a new rerendering model
Are the docs up somewhere or just in git? I would be interested in looking at v9
I've been having trouble with memoization as well, with the table reference not changing when useReactTable props change, making memo diffs like prev.table.options.data !== next.table.options.data useless, since table is the same and it always returns false. Only workaround to keep performance so far has been to pass props around and explicitly diff each one, i.e., prev.data !== next.data, for the prior example. Has been working great but the compiler completely breaks this approach as well.
TanStack Table's React Binding has an API design that doesn't allow you to follow the Rules of React (or React Inherichy), thus when used with React Compiler it breaks.
E.g. see this commonly used API:
table.getHeaderGroups().map(headerGroup => <th />);
This function getHeaderGroups is invoked in the render phase, thus React expects/requires this to be a pure function, i.e. getHeaderGroups's return value will only change when its parameter is changed. Since getHeaderGroups has 0 parameters, with the pure-function-only assumption/expectation, React Compiler memos the returned value of table.getHeaderGroups() with 0 dependencies. However, table.getHeaderGroups() is not a pure function. Even without parameters, the return value will change during re-render, hence violating the rule of react.
The same applies to table.getRowModel().
In short, If you are using TanStack Table's React Binding, TanStack Team is forcing you to violate the Rule of React by forcing you to use un-pure functions in the render phase.
See also the React Docs: https://react.dev/reference/rules/components-and-hooks-must-be-pure#return-values-and-arguments-to-hooks-are-immutable
Return values and arguments to Hooks are immutable
The issue just demonstrates how much React knowledge the maintainers have.
I am doing table resize, copy the code from example https://tanstack.com/table/latest/docs/framework/react/examples/column-sizing, resize not working, turns out Its react-complier issue, add use no memo for the componnet to fix it temporarily. Plz support react 19 and react-complier.
