[v7] Re-renders when Cell returns a JSX.

[atardito]

I have this column:

  id: "is_ecommerce",
  accessor: "is_ecommerce",
  Cell: ({cell}) => <CheckBox checked = {cell.value}
    disabled = {true} type = "embedded" />

When resizing or ordering the table, this column is rendered multiple times, even though the cell.value does not change.

Is there any way to avoid these unnecessary renders?

Thanks!

[kizu]

You can try memoizing the Cell outside of the columns definition. Something like

const CheckboxCell = ({cell}) => <CheckBox checked = {cell.value}
  disabled = {true} type = "embedded" />;

const columns = [
  {
    id: "is_ecommerce",
    accessor: "is_ecommerce",
    Cell: CheckboxCell
  }
];

[atardito]

It didn't work.
Here's an example based on the "Column risizing" one:
https://codesandbox.io/s/heuristic-https-pvob4?file=/src/App.js

It is visible how the "First Name" collumn defined the "Cell" wrapping the value inside a span tag, and using the example you gave me as a reference.
If you open "ReactDevTools" and modify the collumn's width, you can see how the "First Name" collumn renders multiple times.