[data grid] Maximum update depth exceeded - MUI Datagrid when renderCell is in columns

[ArturLimaSS]

Steps to reproduce

Steps:

1. Open this link.
2. https://codesandbox.io/p/sandbox/eager-tharp-h3xylm?from-embed=&workspaceId=ws_WaKGtA9a2NtTqsZLudCdwW
3. Try coping this to your local and make a production app from this.
   

Current behavior

I just didn't understand the error. When I render a button with renderCell. In development, some cases that I didn't understand give the error, in production, it never works.

Expected behavior

It should render the options when using the renderOptions option, as it always has.

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: Linux 5.15 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
  Binaries:
    Node: 18.20.4 - ~/.nvm/versions/node/v18.20.4/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v18.20.4/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome
  npmPackages:
    @emotion/react: ^11.10.0 => 11.13.5 
    @emotion/styled: ^11.10.0 => 11.13.5 
    @mui/base:  5.0.0-alpha.104 
    @mui/core-downloads-tracker:  5.16.8 
    @mui/icons-material: ^5.10.9 => 5.16.8 
    @mui/lab: 5.0.0-alpha.106 => 5.0.0-alpha.106 
    @mui/material: ^5.10.12 => 5.16.8 
    @mui/private-theming:  5.16.8 
    @mui/styled-engine:  5.16.8 
    @mui/system: ^5.14.12 => 5.16.8 
    @mui/types:  7.2.19 
    @mui/utils: ^5.14.12 => 5.16.8 
    @mui/x-data-grid: 7.23.0 => 7.23.0 
    @mui/x-date-pickers: ^5.0.6 => 5.0.20 
    @mui/x-internals:  7.23.0 
    @mui/x-tree-view: ^6.17.0 => 6.17.0 
    @types/react: ^18.3.11 => 18.3.12 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 

Search keywords: Datagrid renderCell Maximum Update Depth exceeded

[michelengelen]

The reproduction steps are insufficient ... What do you need to do with the app when its running in prod mode?

Also, when looking at your code I noticed that the only thing you do in renderCell is to return a constructed value. You can simply do this with a valueGetter instead which is having way less performance implications, is being used to filter, sort, etc and is easier to do.

- renderCell: (row) => {
+ valueGetter: (_value, row) => {
    const prioridade =
      row.row.nivel_prioridade.split("")[0].toUpperCase() +
      row.row.nivel_prioridade.slice(1);

    return prioridade;
  },

[melissa-anne-carr]

One of our users was experiencing this as well (on Chrome only, it worked on Microsoft edge). I was not able to reproduce it myself, and our other users weren't. It was resolved when I rolled back the DataGrid version to 7.22.1.

The error looked like it was coming from a dimensions issue.

We do also use renderCell in several columns, in cases where valueGetter is insufficient to render the cell.
For example,

{
        field: 'adminReviewer',
        width: 100,
        renderCell: ({ row }: GridCellParams) => (
          <Box width="100%" sx={{ display: 'flex', justifyContent: 'center' }}>
            {potentialReviewers && (
              <AdminReviewerDropdown
                campaign={row}
                potentialReviewers={potentialReviewers}
                variant="large"
              />
            )}
          </Box>
        ),
        renderHeader: () => null,
      }

[michelengelen]

All right ... since this is a highly customized implementation I would first suggest a bug in that, but you can never be too sure! :D

The problem is that we cannot do anything if we have no reproduction case.

If you can provide one that would be great ... IMHO it's not related to the app being a production build though.

[harry-peirse]

Just chiming in to say I'm seeing the same error since upgrading. I will try to create a reproduction case and share. But it seems an odd coincidence, and there is no other change in the code on our side, so I suspect something may have snuck in within MUI... Bear with me and I'll try to share a case later today.

[harry-peirse]

So I have just recreated it locally with this code:

<DataGridPremium
  rows={[]}      
  columns={[{field: 'name', flex: 1}]}
/>

From eliminating various parameters. The flex parameter on the column seems to be the culprit?

[pauljonesnz]

I'm finding the same issue

• in Chrome (not Edge)
• the same {field: 'name'. flex: 1} column definition

This example fails:

export const FailingDataGrid = () => {
    const currentData = [
        {
            id: 1,
            name: 'One',
        },
        {
            id: 2,
            name: 'Two',
        },
        {
            id: 3,
            name: 'Three',
        },
        {
            id: 4,
            name: 'Four',
        },
    ];
    return (
        <Box
            sx={{
                display: 'flex',
                flexDirection: 'column',
                minWidth: 480,
                maxWidth: 950,
            }}
        >
            <DataGridPro
                sx={{minHeight: 200}}
                rows={currentData}
                columns={[
                    {
                        field: 'id',
                        headerName: 'Product ID/s',
                        filterable: false,
                        width: 100,
                    },
                    {
                        field: 'name',
                        headerName: 'Product/s',
                        filterable: false,
                        flex: 1,
                    },
                ]}
                density={'compact'}
                autoPageSize
                disableRowSelectionOnClick
                hideFooterRowCount
                hideFooter
            />
        </Box>
    );
}

The following makes it work:

• change the width to a fixed width in the Box
• change the minHeight to 100 or 300
• change flex: 1 to a fixed width
• having a different number of rows less, or more (causing the height to grow

This same code has been running quite happily in previous versions.

[melissa-anne-carr]

We also have a flex value on our columns:

    () => [
      {
        field: 'name',
        display: 'flex',
        flex: 1,
        renderHeader: () => null,
        renderCell: ({ row: { name } }: GridCellParams) => (
          <Box sx={{ pl: 2, '&:hover': { cursor: 'pointer' } }}>{name}</Box>
        ),
      },
      {
        field: 'source',
        width: 150,
        renderHeader: () => null,
        flex: 1,
      },```

[michelengelen]

Ok, seems as if this affects quite a few users.
I'll add it to the board and forward it to the team!

[KenanYusuf]

Tried to replicate using @pauljonesnz code here #15721 (comment)

https://codesandbox.io/p/sandbox/silly-microservice-7qv2n3

I've used the same code on a fresh install and ran the production build locally, not seeing the error.

Is someone able to provide a CodeSandbox/StackBlitz reproduction?

[ArturLimaSS]

@KenanYusuf, I opened your link and it showed the error. If I remove "flex: 1" it works normally.

[KenanYusuf]

@KenanYusuf, I opened your link and it showed the error. If I remove "flex: 1" it works normally.

Well this is strange.

Screen.Recording.2024-12-06.at.18.28.58.mov

@mui/xgrid is codesandbox.io/p/sandbox/silly-microservice-7qv2n3 erroring for anyone?

[ArturLimaSS]

@KenanYusuf, I opened your link and it showed the error. If I remove "flex: 1" it works normally.

Well this is strange.

Screen.Recording.2024-12-06.at.18.28.58.mov
@mui/xgrid is codesandbox.io/p/sandbox/silly-microservice-7qv2n3 erroring for anyone?

Try testing in windows.

[cherniavskii]

Try testing in windows.

I can't reproduce it on Windows either:

[pauljonesnz]

Hi All

Code Sandbox doesn't reproduce the error. It is an odd one alright.

Fine on Edge, not on Chrome - except NOTE that it works on Code Sandbox for both.

[LiamGoodacre]

When attempting an upgrade to 7.23 last week, I saw the same max update depth exceeded error but:

• not on initial render
• only after resizing the browser across a breakpoint
• only tested on Firefox Mac

I haven't spent any time on getting a minimal reproduction yet though.

Also, the code sandbox link above doesn't crash for me.

[KenanYusuf]

Thanks for the details. Unfortunately, I haven't been able to reproduce this yet.

Can I ask that those experiencing the issue drop a comment with their environment details? You can run npx @mui/envinfo to get this easily.

[harry-peirse]

Yes sure-

System:
OS: Windows 11 10.0.22631
Binaries:
Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
pnpm: 9.15.0 - ~\AppData\Local\pnpm\pnpm.CMD
Browsers:
Chrome: Not Found
Edge: Chromium (128.0.2739.42)
npmPackages:
@emotion/react: 11.13.5
@emotion/styled: 11.13.5
@mui/base: 5.0.0-beta.64
@mui/core-downloads-tracker: 6.1.10
@mui/icons-material: 6.1.10
@mui/lab: 6.0.0-beta.18
@mui/material: 6.1.10
@mui/private-theming: 6.1.10
@mui/styled-engine: 6.1.10
@mui/system: 6.1.10
@mui/types: 7.2.19
@mui/utils: 6.1.10
@mui/x-charts: 7.22.3
@mui/x-charts-vendor: 7.20.0
@mui/x-data-grid: 7.22.3
@mui/x-data-grid-premium: 7.22.3
@mui/x-data-grid-pro: 7.22.3
@mui/x-date-pickers: 7.22.3
@mui/x-date-pickers-pro: 7.22.3
@mui/x-internals: 7.21.0
@mui/x-license: 7.21.0
@types/react: 18.3.11
react: 18.3.1
react-dom: 18.3.1
typescript: catalog: => 5.7.2

The npm package here doesn't include the updated x-data-grid - but that upgrade would be the only thing I change to cause the issue.

I use Vivaldi as my main browser, but as it's Chromium I assume no difference from Chrome...

[ArturLimaSS]

Thanks for the details. Unfortunately, I haven't been able to reproduce this yet.

Can I ask that those experiencing the issue drop a comment with their environment details? You can run npx @mui/envinfo to get this easily.

System:
OS: Linux 5.15 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
Binaries:
Node: 18.20.4 - ~/.nvm/versions/node/v18.20.4/bin/node
npm: 10.7.0 - ~/.nvm/versions/node/v18.20.4/bin/npm
pnpm: Not Found
Browsers:
Chrome: Version 131.0.6778.109 (Official Build) 64-bit
npmPackages:
@emotion/react: ^11.10.0 => 11.13.5
@emotion/styled: ^11.10.0 => 11.13.5
@mui/base: 5.0.0-alpha.104
@mui/core-downloads-tracker: 5.16.8
@mui/icons-material: ^5.10.9 => 5.16.8
@mui/lab: 5.0.0-alpha.106 => 5.0.0-alpha.106
@mui/material: ^5.10.12 => 5.16.8
@mui/private-theming: 5.16.8
@mui/styled-engine: 5.16.8
@mui/system: ^5.14.12 => 5.16.8
@mui/types: 7.2.19
@mui/utils: ^5.14.12 => 5.16.8
@mui/x-data-grid: 7.23.0 => 7.23.0
@mui/x-date-pickers: ^5.0.6 => 5.0.20
@mui/x-internals: 7.23.0
@mui/x-tree-view: ^6.17.0 => 6.17.0
@types/react: ^18.3.11 => 18.3.12
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1

[pauljonesnz]

Not sure why it can't find my Chrome version - it is: 131.0.6778.86

System:
OS: Windows 11 10.0.26100
Binaries:
Node: 20.13.1 - C:\Program Files\nodejs\node.EXE
npm: 10.5.2 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: Not Found
Edge: Chromium (131.0.2903.63)
npmPackages:
@emotion/react: ^11.13.5 => 11.13.5
@emotion/styled: ^11.13.5 => 11.13.5
@mui/core-downloads-tracker: 6.1.10
@mui/icons-material: ^6.1.10 => 6.1.10
@mui/material: ^6.1.10 => 6.1.10
@mui/private-theming: 6.1.10
@mui/styled-engine: 6.1.10
@mui/system: 6.1.10
@mui/types: 7.2.19
@mui/utils: 6.1.10
@mui/x-charts: ^7.23.1 => 7.23.1
@mui/x-charts-vendor: 7.20.0
@mui/x-data-grid: 7.23.1
@mui/x-data-grid-pro: ^7.23.1 => 7.23.1
@mui/x-date-pickers: 7.23.1
@mui/x-date-pickers-pro: ^7.23.1 => 7.23.1
@mui/x-internals: 7.23.0
@mui/x-license: 7.23.0
@mui/x-tree-view: ^7.23.0 => 7.23.0
@types/react: ^18.3.12 => 18.3.12
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
typescript: ^5.7.2 => 5.7.2

[joelgomes85]

I encountered the same problem using @mui/x-data-grid-premium version 7.23.0 that appears to be related to using a 4K monitor. The data grid renders correctly when I move the browser window to my 1080p monitor and refresh the page, but it fails to render properly on the 4K monitor.
I seem to be the only one experiencing this issue at my team, likely because I'm the only one using a 4K display. The problem occurs in both Chrome and Edge browsers, but interestingly, it does not happen in Firefox.
Here are the key details:

@mui/x-data-grid-premium version: 7.23.0
Monitor resolutions where issue occurs: 4K (3840x2160)
Monitor resolutions where it works correctly: 1080p (1920x1080)
Affected browsers: Google Chrome, Microsoft Edge
Unaffected browser: Mozilla Firefox

System:
OS: Windows 11 10.0.22621
Binaries:
Node: 20.18.0 - ~\Home\Applications\node\v20.18.0\node.EXE
npm: 10.8.2 - ~\Home\Applications\node\v20.18.0\npm.CMD
pnpm: Not Found
Browsers:
Chrome: Not Found
Edge: Chromium (127.0.2651.74)

[KenanYusuf]

Thanks everyone for the environment details. I have managed to reproduce the error on Windows 11, Chrome 131:

Screen.Recording.2024-12-10.at.14.54.32.mov

Working on a fix.

Edit: I've traced the resize issue shown in the video back to ba6c7a1, which was released back in v7.10.0. Makes me think there is more than one way to encounter this bug, given how many people are reporting it now. Will try and reproduce it again with the original CodeSandbox from @ArturLimaSS

[saurabhghiya]

We were experiencing a similar issue in Chrome, but not in Edge, after updating to v7.23.0. What helped us resolve the issue was deleting all time browsing data in Chrome. Maybe this helps some of you guys facing similar issue.

[cherniavskii]

I've traced the resize issue shown in the video back to ba6c7a1, which was released back in v7.10.0

I think this regression was introduced in #15549 and released in /~https://github.com/mui/mui-x/releases/tag/v7.23.0
v7.22.0 seems to work fine: https://codesandbox.io/p/sandbox/15850-before-forked-sj4f8p?file=%2Fpackage.json

[harry-peirse]

We're using 7.22.3 without any issue. As soon a we go to 7.23.1 it happens

…

On Thu, 12 Dec 2024, 05:22 Andrew Cherniavskii, ***@***.***> wrote: I've traced the resize issue shown in the video back to ba6c7a1 <ba6c7a1>, which was released back in v7.10.0 I think this regression was introduced in #15549 <#15549> and released in /~https://github.com/mui/mui-x/releases/tag/v7.23.0 v7.22.0 seems to work fine: https://codesandbox.io/p/sandbox/15850-before-forked-sj4f8p?file=%2Fpackage.json — Reply to this email directly, view it on GitHub <#15721 (comment)>, or unsubscribe </~https://github.com/notifications/unsubscribe-auth/ABILHSZMQMPIFL3ZAPLDCIL2FBRDHAVCNFSM6AAAAABS6KJKN2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMZWGQ2TQOJZGE> . You are receiving this because you commented.Message ID: ***@***.***>

[dandrei]

If anyone needs more information, in my case the bug manifests when the page is sufficiently wide.

The following situations prevent the bug from manifesting:

• Page is too zoomed in.
• Chrome DevTools is open on the side and is sufficiently wide (reducing the width of the content).
• The browser window's width is manually reduced.

And another stacktrace:

app-router.ts:56 
 Error: Minified React error #185; visit https://react.dev/errors/185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at t6 (react-dom-client.production.js:2418:1)
    at t2 (react-dom-client.production.js:2382:1)
    at ar (react-dom-client.production.js:3931:1)
    at at (react-dom-client.production.js:3898:1)
    at useGridSelector.js:68:1
    at Store.js:19:1
    at Set.forEach (<anonymous>)
    at an.update (Store.js:19:1)
    at Object.setState (useGridStateInitialization.js:52:1)
    at useGridDimensions.js:73:1
    at useEventCallback.js:18:18
    at useGridDimensions.js:195:1
    at useGridDimensions.js:213:1
    at oT (react-dom-client.production.js:7507:1)
    ...

[dandrei]

@pauljonesnz @KenanYusuf @cherniavskii @michelengelen to get the CodeSandbox example that was posted in this thread to manifest the error, try to zoom out the browser window, then hit the refresh button in the sandbox.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@ArturLimaSS How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.