[data grid] Performance decline/resize stuttering after upgrade from v6 to v8

[Simencas]

Steps to reproduce

Steps:

1. Open this link to live example: v6-example | v8-example
2. Click 'Toggle Width' button in top left corner to make the grid column expand to 100% width
3. Click the button again to collapse back to 50% width

Current behavior

On version 6, the expand/collapse transition is perfectly smooth, whereas on version 8 there is considerable lag when doing the same.

Expected behavior

Altering grid dimensions should be smooth like on version 6.

Context

We have a page that stacks four lightweight data grids in a single column. Adjacent columns to the left/right can be toggled through user interaction. This functionality has degraded considerably on version 8 as the UI almost freezes during transition. The grids show a conservative amount of data, ~10 rows each, and between 10-20 columns.

Your environment

npx @mui/envinfo

 Browsers: Chrome, Firefox

  System:
    OS: macOS 15.5
  Binaries:
    Node: 22.15.0 - ~/.nvm/versions/node/v22.15.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.15.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 136.0.7103.114
    Edge: Not Found
    Safari: 18.5
  npmPackages:
    @emotion/react: ^11.9.0 => 11.13.3 
    @emotion/styled: ^11.8.1 => 11.13.0 
    @mui/base: 5.0.0-beta.40 => 5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.17.1 
    @mui/icons-material: ^5.17.1 => 5.17.1 
    @mui/material: ^5.17.1 => 5.17.1 
    @mui/private-theming:  5.17.1 
    @mui/styled-engine:  5.16.14 
    @mui/styles: ^5.17.1 => 5.17.1 
    @mui/system: ^5.17.1 => 5.17.1 
    @mui/types:  7.2.24 
    @mui/utils:  7.1.0 
    @mui/x-data-grid:  8.2.0 
    @mui/x-data-grid-premium: latest => 8.2.0 
    @mui/x-data-grid-pro:  8.2.0 
    @mui/x-date-pickers:  7.29.2 
    @mui/x-date-pickers-pro: ^7.29.2 => 7.29.2 
    @mui/x-internals:  8.2.0 
    @mui/x-license: ^7.21.0 => 7.21.0 
    @mui/x-telemetry:  8.2.0 
    @mui/x-tree-view: ^6.17.0 => 6.17.0 
    @types/react: ^17.0.83 => 17.0.85 
    react: 17.0.1 => 17.0.1 
    react-dom: 17.0.1 => 17.0.1 
    typescript: ~5.4.0 => 5.4.5

Search keywords: data grid choppy laggy transitions performance decline

Order ID: 98383

[arminmeh]

hey @Simencas

comparing to v6, v8 handles resizing events a bit differently. stuttering happens because the column rendering context (used by virtualization) is re-calculated to offten

You can use resizeThrottleMs prop to control that.

Increasing the throttle value will lead to a delayed column rendering. By just updating that value, you will start to see empty grid area with your animation.

This can be resolved by using columnBufferPx prop (more details here).

I have tested your example with values

resizeThrottleMs={300}
columnBufferPx={500}

and the animation got smooth again. You should adjust the values according to your need.

Hope that this helps.

[Simencas]

Hi @arminmeh, thanks for the quick response!

I have already tried to experiment with these props. Increasing resizeThrottleMs eventually makes the transition smooth but the columns inside the grid does not follow the transition as their resize is debounced. columnBufferPx does not fix this when all columns already are visible on screen. resizeThrottleMs was not exposed on v6, but was not the "default value" 60ms? Using 60ms on v8 does not yield the same results.

[arminmeh]

columnBufferPx does not fix this when all columns already are visible on screen

if I understand correctly, you are expanding the grid and the columns together - there are no columns outside of the viewport?

can you adjust the example to have this or add a video?

[Simencas]

@arminmeh Yes that is correct.

Here is an updated example: https://codesandbox.io/p/sandbox/v8-transition-2-5znwnq

And video:

https://github.com/user-attachments/assets/7239b84b-c8ff-4876-80b4-65adeaa51c4d

[arminmeh]

Here is an updated example: codesandbox.io/p/sandbox/v8-transition-2-5znwnq

Can you update the permissions so that I can access it? Thanks

[Simencas]

Ops, done!

[arminmeh]

@Simencas

I see that the example that you have shared doesn't work well with v6 neither https://codesandbox.io/p/sandbox/v6-transition-forked-d45vyp?file=%2Fsrc%2FDemo.tsx%3A6%2C36

You mentioned before that you had a smooth transition with v6. Is the example missing some elements then? Can you share the video of the animation with v6 on the same page you made the video with v8?

The problem is that the flex column widths are re-calculated on resize, but that calculation is done after some internal events are published. This makes the width update a bit delayed

@michelengelen @romgrk did we had a similar request before? any suggestions from your side?

[Simencas]

You are right, I see now that increasing resizeThrottleMs makes the transition the same as on v6. I got a bit confused as I thought the delay was 60ms on v6, which is the default on v8.

This works for now, but would be great if the smoothness could be improved in the future. Thanks for the help!

[arminmeh]

thanks for reporting back @Simencas

In that case, I will close this issue and make another one targeting further improvements. If you have any other questions, feel free to reopen this issue.

[github-actions[bot]]

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] @Simencas 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.