[React Compiler] useReactTable state updates not reflected in UI

[ashimrai123]

What I did

• Created a React 19.2 Vite app with babel-plugin-react-compiler enabled.
• Used @tanstack/react-table v8 to render a table with rows from state.
• Added a button that calls setData(...) to change the row data.
• Observed that although React state does update, the table UI does not rerender to reflect the new data.

What I expected

• After clicking the button, the table rows / cells should re-render to display the updated state.
• The internal useReactTable logic should pick up the new data array and recompute the row model.

What actually happened

• The data state updates (verified via console.log).
• The table UI stays the same (no visible change).
• When I remove babel-plugin-react-compiler, everything works normally — state updates reflect in the table.

Minimal reproducible example

// DashboardPage.tsx
import { useState } from 'react';
import {
  useReactTable,
  getCoreRowModel,
  flexRender,
  type ColumnDef,
} from '@tanstack/react-table';

type Person = { name: string; age: string };
const initialData: Person[] = [{ name: 'ash', age: '25' }];

export default function DashboardPage() {
  const [data, setData] = useState<Person[]>(initialData);

  const columns: ColumnDef<Person>[] = [
    { accessorKey: 'name', header: 'Name' },
    { accessorKey: 'age', header: 'Age' },
  ];

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <div>
      <button
        onClick={() => setData((s) => s.map((p) => ({ ...p, name: 'a' })))}
      >
        Change data
      </button>
      <table>
        <thead>
          {table.getHeaderGroups().map((hg) => (
            <tr key={hg.id}>
              {hg.headers.map((h) => (
                <th key={h.id} colSpan={h.colSpan}>
                  {flexRender(h.column.columnDef.header, h.getContext())}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

[aniruddhaadak80]

Hi there! Taking a look at your issue regarding [React Compiler] useReactTable state updates not reflected in UI in the context of reactwg/react-compiler...

When working with the React Compiler (React Forget), this type of behavior usually stems from how the compiler analyzes hook dependencies and component boundaries. Make sure that:

1. Your code strictly adheres to the Rules of React. The compiler bails out or behaves unexpectedly when it detects rule violations.
2. In certain cases, explicitly defining memoization boundaries or isolating the hook/component into its own tightly-scoped file helps the Babel plugin successfully parse the AST.
3. Verify your ESLint eslint-plugin-react-compiler rules are green before compilation, as the compiler relies heavily on those guarantees.

Hope this helps clarify the expected boundaries! Let me know if you have a minimal repro I can test against.