Skip to content

[Compiler Bug]: incorrect memoization of Tanstack table methods in extracted components #36331

@DerTimonius

Description

@DerTimonius

What kind of issue is this?

  • React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
  • babel-plugin-react-compiler (build issue installing or using the Babel plugin)
  • eslint-plugin-react-hooks (build issue installing or using the eslint plugin)
  • react-compiler-healthcheck (build issue installing or using the healthcheck script)

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

  1. Open the table example (stackblitz link).
  2. Remove the unreachable return statement from the Pagination component.
  3. Observe that the pagination buttons stop updating correctly.
  4. Add back the unreachable return, or add "use no memo" at the top of the component.
  5. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: UnconfirmedA potential issue that we haven't yet confirmed as a bugType: Bug

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions