Closed
Description
The problem in depth
Are the cells being re-rendered so many times? My UI is lagging madly because of this
This is just a part, and I have only 14 rows:
Code:
<Table
loading={isFetching}
columns={COLUMNS}
pinnedColumns={PINNED_COLUMNS}
rows={MEMOIZED_ROWS}
rowCount={offers?.pagination.total_items}
slots={SLOTS}
/>
For example 2 columns:
export const COLUMNS: GridColDef<Offer>[] = [
{
field: 'is_active',
headerName: 'Active',
minWidth: 280,
sortable: true,
renderCell: ({ row }) => <ActiveStatusCell row={row} />
},
{
field: 'name',
headerName: 'Name',
minWidth: 280,
sortable: true,
renderCell: ({ row }) => <TypographyCell value={row.name} />
},
];
Your environment
System:
OS: macOS 15.3.1
Binaries:
Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm
pnpm: 9.15.4 - /opt/homebrew/bin/pnpm
Browsers:
Chrome: 133.0.6943.142
Edge: Not Found
Safari: 18.3
npmPackages:
@emotion/react: ^11.13.0 => 11.14.0
@emotion/styled: ^11.13.0 => 11.14.0
@mui/icons-material: ^6.2.0 => 6.3.1
@mui/lab: ^5.0.0-alpha.173 => 5.0.0-alpha.175
@mui/material: ^5.16.7 => 5.16.14
@mui/x-data-grid: ^7.23.2 => 7.23.6
@mui/x-data-grid-pro: ^7.23.2 => 7.23.6
@mui/x-date-pickers: ^7.23.2 => 7.23.6
@mui/x-date-pickers-pro: ^7.23.2 => 7.23.6
@mui/x-license: ^7.23.2 => 7.23.6
@mui/x-tree-view: ^7.23.2 => 7.23.6
@types/react: ^18.3.4 => 18.3.18
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
typescript: ^5.5.4 => 5.7.3
Search keywords: data grid, perfomance
Order ID: 89766