Why does table reference not change, when data passed to useReactTable changes?

const table = useReactTable({ data, columns });
return (
  <TableBody table={table} />; //<-- this is React component wrapped in memo()
);

const table = useReactTable({ data, columns });
return (
  <TableBody table={table} />; //<-- this is React component wrapped in memo()
);

Because the

table

table

is constantly the same reference, it's impossible to pass it down to other memoized subcomponents. They never rerender, because

table

table

didn't change.

Same applies if data is the same, but row selections are changed.
What's the reason behind this behaviour?
What's the correct approach to use this lib without packing everything into one huge single component?

TanStack•4y ago•

2 replies

full-green

Why does table reference not change, when data passed to useReactTable changes?

const table = useReactTable({ data, columns });
return (
  <TableBody table={table} />; //<-- this is React component wrapped in memo()
);

const table = useReactTable({ data, columns });
return (
  <TableBody table={table} />; //<-- this is React component wrapped in memo()
);

Because the

table

table

is constantly the same reference, it's impossible to pass it down to other memoized subcomponents. They never rerender, because

table

table

Why does table reference not change, when data passed to useReactTable changes?

Similar Threads

Why does table reference not change, when data passed to useReactTable changes?

Similar Threads

Similar Threads

Similar Threads