T
TanStack•12mo ago
typical-coral

Why tanstack-table doesn't follow rules of React? What is the best practice around it?

Basic memoization breaks this library. For example this component will never re-render, because table reference never changes, full example - https://codesandbox.io/p/devbox/quizzical-elion-v8dgdf?workspaceId=431a9e26-3dfd-482b-b3a3-641002cbf4d6 
const RowsMemo = React.memo<{ table: Table<Person> }>(({ table }) => {
  return 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>
  ));
});
const RowsMemo = React.memo<{ table: Table<Person> }>(({ table }) => {
  return 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>
  ));
});
This makes it hard to optimize large apps with complicated tables. Additionally - adding React compiler simply breaks the table https://github.com/TanStack/table/issues/5567 Why are all the docs and examples suggesting to rely on getters that will not trigger re-renders? What are the best practices to avoid this pattern?
GitHub
Table doesn’t re-render with new React Compiler + React 19 · Issue ...
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 s...
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?