[data grid] data grids have begun crashing when columns contain flex dimensions

[Luis-Ramirez21x]

The problem in depth

Hey MUI Team,

I recently began using Vite and began to have issues with the data grid.
Grids with flex columns dimensions, flex:1, will give me the following error:
hook.js:608 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render

However, this does not always occur. Grids will crash mainly when first starting the dev server and navigating to the browser with Disable cache enabled.
In prod the grid seems to only crash randomly.

This is a reproduction :
https://codesandbox.io/p/devbox/inspiring-agnesi-p7nm7g?file=%2Fsrc%2FApp.jsx%3A44%2C10&workspaceId=ws_XkZ7VsXvM11g44Cnteszcu

This is a screen recording showing the error when opened in Chrome.

DataGridCrash.mp4

Am I missing some some parent container requirements? I'd need the grid to take up the full length of the page.
Please let me know if I can provide additional context/clarity. Thank you in advance!

Your environment

`npx @mui/envinfo`

System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
  Binaries:
    Node: 18.19.0 - /usr/bin/node
    npm: 9.2.0 - /usr/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 131.0.6778.85
  npmPackages:
    @emotion/react: ^11.10.6 => 11.13.5 
    @emotion/styled: ^11.10.6 => 11.13.5 
    @mui/base: ^5.0.0-beta.34 => 5.0.0-beta.63 
    @mui/core-downloads-tracker:  5.16.8 
    @mui/icons-material: ^5.11.11 => 5.16.8 
    @mui/joy: ^5.0.0-beta.11 => 5.0.0-beta.48 
    @mui/lab: ^5.0.0-alpha.126 => 5.0.0-alpha.174 
    @mui/material: ^5.11.12 => 5.16.8 
    @mui/private-theming:  5.16.8 
    @mui/styled-engine:  5.16.8 
    @mui/system:  5.16.8 
    @mui/types:  7.2.19 
    @mui/utils:  6.1.9 
    @mui/x-data-grid:  6.20.4 
    @mui/x-data-grid-generator: ^6.6.0 => 6.20.5 
    @mui/x-data-grid-premium:  6.20.5 
    @mui/x-data-grid-pro: ^7.21.0 => 7.23.0 
    @mui/x-date-pickers:  6.20.2 
    @mui/x-date-pickers-pro: ^6.16.2 => 6.20.2 
    @mui/x-internals:  7.23.0 
    @mui/x-license:  7.23.0 
    @mui/x-license-pro: ^6.6.0 => 6.10.2 
    @types/react:  18.3.12 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 

Search keywords: DataGridPro, Vite, Flex
Order ID: 91497

[michelengelen]

Duplicate of #15721

[Luis-Ramirez21x]

Hey @michelengelen,
I understand a fix/regression was introduced to fix this, however this bug and crash continues to happen in the sandbox provided, locally testing, and in Prod to our users.

In the sand box:

1. run npm run dev
2. Click Open Externally with the Chrome browser
3. Open Chrome dev tools
4. Refresh the page and the Warning: Maximum update depth exceeded error will log.

The video attached to the initial issue shows those steps as well.

Is there anything else I can provide or am I missing additional context here?
Thank you in advance!

[michelengelen]

Hey @Luis-Ramirez21x, did you update the data grid version to a version that incorporated that bugfix? The sandbox runs without problems for me, possibly due to the fact that it uses latest in the version

[michelengelen]

The version you should install is 7.23.2

[Luis-Ramirez21x]

@michelengelen,

Thanks for the quick follow up!
Yes, that is the version I am using. I updated the sandbox to replicate the bug without needing to open in an external browser.
Seems setting a width:500 to the parent container allows for the bug to more easily "show".

Here is the sandbox

And here is a screen recording of what I did to replicate the bug.

Continued_grid_crashing.mp4

[Luis-Ramirez21x]

Hey @michelengelen, just wanted to follow up on this. Happy new year!

[michelengelen]

Hey @Luis-Ramirez21x ... happy new year to you too.

Thanks for the reminder. I would have missed that otherwise. Could you share with me which screen resolution you are using (Hardware and Software)? And does this also happen on other resolutions?

[Luis-Ramirez21x]

@michelengelen,

Sorry for the late reply, deployment week has had alot of fires...

As requested:
Screen Resolution (Hardware): 2560x1081
Browser Window (Software): 1158x438
Browser Window (Software): 2030x490
Browser Window (Software): 2560x860

Tested this on my laptop screen, desktop screen, office screen the issues continues to happen with the sandbox.

[michelengelen]

All right ... thanks for the clarification ... I'll add it to the board for the team to have a look. This might be related to #15850
cc @KenanYusuf

[cherniavskii]

Hi @Luis-Ramirez21x
While I couldn't reproduce the issue when the width is set to 500 (probably due to a different screen resolution and/or density), I noticed that there's a lockfile in the demo you provided:

The version is locked to 7.23.2, but the fix was released in v7.23.3.

I created 2 demos without lockfiles:

1. Using 7.23.2: https://codesandbox.io/p/sandbox/youthful-matsumoto-g2swqv
2. Using 7.23.3: https://codesandbox.io/p/sandbox/modern-http-5yqh34

In the demos above, I've set the width to 501.42 – this is the value that reproduces the issue for my hardware. You should probably use 500 if that width was causing the crash for you before.
The 1st demo crashes for me, the 2nd doesn't and works as expected.

Can you check these demos and confirm that the 2nd demo works on your hardware?
If that's the case, then upgrading the package(s) should solve the problem in your project.

Thanks!

[Luis-Ramirez21x]

@cherniavskii @michelengelen I can confirm that 2nd demo worked for me!

Thank you for the help y'all 🙏!

[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

@Luis-Ramirez21x 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.