Stable custom cell / header that requires props

[nirtamir2]

Hi
I use @tanerstacl/react-table and I need to create custom cell and header.
When I create them inline my lint rule react/no-unstable-nested-components warn me that those components will create on each rerender and won't be able to keep state when their parent will rerender in addition to their bad performance.
I wonder what is the best practice to use custom cells and header?
Sometimes I can avoid this by declaring the components from outside

function SelectRowColumnHeaderCell(
  context: CellContext<AppTableRowType, unknown>
) {
  return <SelectRowCell context={context} />;
}

export const selectRowColumn: AppTableColumn = {
  id: SELECT_ROWS_COLUMN_ID,
  cell: SelectRowColumnHeaderCell,
  header: SelectRowColumnHeader,
};

But I cannot do it if my cell / header requires additional prop like tableId / prop that the component has access to but the table do not have access.
In those cases - what should I do?
Thanks!

[supersnager]

@nirtamir2 Have you tried React.memo on your custom cell?

[nirtamir2]

@supersnager
Did you mean React.useMemo or React.memo?
Can you show me an example?

[supersnager]

@nirtamir2 React.memo. Just wrap your cell in it.

[wes1991]

There's a call out specifically for that in the rules for unstable-nested-components that recommends against doing that.
https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unstable-nested-components.md

[iakovalgaev]

I have same problem. When I toggle row select ALL cells in table re-renders. But I want that re-render just ONE cell.
If I use React.memo, then not a single cell is re-rendered