[v8] What is the best way to define cell rendering using React

[marceloverdijk]

Hi,

I understand TanStack/table is headless so it's not related to table itself, but I wonder how others do this.
I'm probably not the only one ;-)

When having column definition I sometimes need to render more than just the value of the cell. E.g. a country flag as can be seen below.

  const columns: ColumnDef<HotelPageFieldsFragment>[] = [
    {
      id: 'name',
      header: 'Name',
      accessorKey: 'name',
      cell: props => {
        const { row: { original: hotel }} = props
        return (
          <>
            <FlagIcon alpha2Code={hotel.country?.alpha2Code} className='me-3' />
            <Link href={`/hotels/${hotel.id}`}>
              <a>{props.getValue()}</a>
            </Link>
          </>
        )},
      meta: {
        className: 'w-px-215 w-px-sm-250 w-px-md-300',
      }
    },
    ..
  ]

However eslint complains with:

Do not define components during render. 
React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). 
Instead, move this component definition out of the parent component “HotelPage” and pass data as props. 
If you want to allow component creation in props, 
set allowAsProps option to true.eslint[react/no-unstable-nested-components](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/no-unstable-nested-components.md)

See https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unstable-nested-components.md

Now 1) I wonder if above code is performant or not? If that's not the problem I could simply ignore the eslint warning.
And 2) if it is not performant, what should be the best approach to implement this? (using type safety)

Thanks for your advise.
M

[LinnJS]

I had trouble reproducing this error in a Storybook environment but I think the re-rendering issue is from you declaring a react component on the fly maybe?

I think this might be resolved by composing a component above the spreading the props into the component. This way the component is declared separately from the columns but you are just calling it and passing it props to the called component.

Something like this:

const FlagIcon = ({ row: { original: hotel } }) => {
  const {
    row: { original: hotel },
  } = props;

  return (
    <>
      <FlagIcon alpha2Code={hotel.country?.alpha2Code} className="me-3" />
      <Link href={`/hotels/${hotel.id}`}>
        <a>{props.getValue()}</a>
      </Link>
    </>
  );
};

const columns: ColumnDef<Person>[] = [
  {
    accessorKey: 'age',
    header: () => 'Age',
    footer: (props) => props.column.id,
    cell: (props) => <FlagIcon {...props} />,
  },
  {
    accessorKey: 'visits',
    header: () => <span>Visits</span>,
    footer: (props) => props.column.id,
  },
  {
    accessorKey: 'status',
    header: 'Status',
    footer: (props) => props.column.id,
  },
  {
    accessorKey: 'progress',
    header: 'Profile Progress',
    footer: (props) => props.column.id,
  },
];

[marceloverdijk]

Thanks Linn for providing feedback.
I kept having TS/eslint warnings and eventually disabled the rule using "react/no-unstable-nested-components": "off",
Don't know if this will bite me later though....

[LinnJS]

@marceloverdijk no worries if it does I would try declaring the component separately. Sometimes I will render JSX in a function like that but I think React needs it to be a Component if it uses props like that.