[data grid] cell re-rendering in data grid

[svidskiy]

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

[michelengelen]

To help us diagnose the issue efficiently, could you provide a stripped-down reproduction test case using the latest version? A live example would be fantastic! ✨

For your convenience, our documentation offers templates and guides on creating targeted examples: Support - Bug reproduction

Just a friendly reminder: clean, functional code with minimal dependencies is most helpful. Complex code can make it tougher to pinpoint the exact issue. Sometimes, simply going through the process of creating a minimal reproduction can even clarify the problem itself!

Thanks for your understanding! 🙇🏼