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()
);

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

table

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

table

table

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?

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

Similar Threads

Similar Threads

Similar Threads