What kind of issue is this?
Link to repro
https://github.com/DerTimonius/react-compiler-tanstack-table-repro
Repro steps
I stumbled across a strange bug that appears to be related to the React Compiler when extracting TanStack Table logic into a separate component that uses the Table instance.
I created a Pagination component that calls methods such as table.getCanNextPage() and table.getCanPreviousPage(), but by default it does not render correctly. The values returned by these methods do not seem to update reliably inside the JSX, which causes the pagination buttons to end up in an incorrect disabled state.
Expected behavior
The pagination buttons should update correctly based on the current table state.
Actual behavior
The pagination buttons remain in the wrong disabled state unless one of the workarounds below is applied.
Reproduction steps
- Open the table example (stackblitz link).
- Remove the unreachable return statement from the Pagination component.
- Observe that the pagination buttons stop updating correctly.
- Add back the unreachable return, or add "use no memo" at the top of the component.
- Observe that the issue disappears.
Workarounds
There are two workarounds:
- add an unreachable return that references the Table instance somehow
- for example, duplicating the existing return statement is enough
- add "use no memo" at the top of the component
Notes
The Pagination component is shown as being auto-memoized by the React Compiler.
How often does this bug happen?
Every time
What version of React are you using?
19.2.5
What version of React Compiler are you using?
1.0.0
What kind of issue is this?
Link to repro
https://github.com/DerTimonius/react-compiler-tanstack-table-repro
Repro steps
I stumbled across a strange bug that appears to be related to the React Compiler when extracting TanStack Table logic into a separate component that uses the Table instance.
I created a Pagination component that calls methods such as table.getCanNextPage() and table.getCanPreviousPage(), but by default it does not render correctly. The values returned by these methods do not seem to update reliably inside the JSX, which causes the pagination buttons to end up in an incorrect disabled state.
Expected behavior
The pagination buttons should update correctly based on the current table state.
Actual behavior
The pagination buttons remain in the wrong disabled state unless one of the workarounds below is applied.
Reproduction steps
Workarounds
There are two workarounds:
Notes
The Pagination component is shown as being auto-memoized by the React Compiler.
How often does this bug happen?
Every time
What version of React are you using?
19.2.5
What version of React Compiler are you using?
1.0.0