I use react-table v7. During the table layout process, I noticed that the component rendering speed drops if the accessor returns undefined. For example.
const data = {
person: {
name: 'Ann',
age: 12,
},
};
const columnFast = [
{
Header: 'Name',
Cell: ({ value }) => <p>{value}</p>,
minWidth: 150,
Filter: DefaultColumnFilterArray,
accessor: 'person.name',
},
];
const columnSlowly = [
{
Header: 'height',
Cell: ({ value }) => <p>{value ? value : 'no height'}</p>,
minWidth: 150,
Filter: DefaultColumnFilterArray,
accessor: 'person.height',
},
];
The example is far-fetched, but it reflects the essence of the problem. Tell me what is the reason for the slowdown of the table in this case.