[data grid] performance regression on resizing on v7

[alvarosevilla95]

Steps to reproduce

Steps:

1. Open this link to live example (v7): https://stackblitz.com/edit/github-zgcrm4f9?file=src%2Fdemo.tsx
2. Open console and resize window. Notice "resize" is constantly logged during resize
3. Open this link to live example (v6): https://stackblitz.com/edit/react-v9w8tw-d4bm4spg?file=Demo.tsx3.
4. Open console and resize window. Notice "resize" is only logged when dimensions stabilise at end of resize

Current behavior

When resizing a data grid on v7, the grid rerenders at every step, tanking performance

Expected behavior

Resize rerenders are debounced to avoid lag. This is the behaviour on v6.

Context

Hi. Our team just migrated x-data-grid-pro from v6 -> v7. We have noticed an important performance regression when resizing a datagrid. This is particularly noticeable in a component we use in a resizable sidebar, which has completely tanked in performance.

The problem seems to be that when resizing, v7 triggers constant rerenders on the datagrid, while v6 uses some sort of debouncing that only fires when the reisizing has stabilized.
I've cloned and run the repo on v6.20.3 and v7.24.1, and can reproduce the issue on the plain repo, as well as the sandboxes above.

Here's a datagrid on the docs running on v6 with react-scan enabled:

mui-6.mp4

And the same grid on v7:

mui-7.mp4

As you can see, v6 (mostly) only rerenders at the end of the resize, when it detects the dimensions are stable, but v7 triggers many more rerenders, tanking fps.
I have not been able to find any documentation for this regression, or possible mitigations for it on the docs or the migration guide, so I'm not sure if this is a known issue, or maybe I'm missing something?
I know v7 provides the resizeThrottleMs prop. Increasing this does improve performance a bit, but the result looks a lot more janky than it did on v6. And even setting it to a high value like 500ms, performance seems a lot poorer that on v6.

Your environment

npx @mui/envinfo

    OS: macOS 15.2
  Binaries:
    Node: 20.18.1 - ~/.local/share/mise/installs/node/20.18.1/bin/node
    npm: 10.9.2 - ~/Developer/project/node_modules/.bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 124.0.6367.202
  npmPackages:
    @emotion/react: 11.13.5 => 11.13.5 
    @emotion/styled: 11.13.5 => 11.13.5 
    @mui/base:  5.0.0-beta.69 
    @mui/core-downloads-tracker:  5.16.9 
    @mui/icons-material:  5.16.4 
    @mui/material: 5.16.9 => 5.16.9 
    @mui/private-theming:  5.16.8 
    @mui/styled-engine:  5.16.8 
    @mui/system: 5.16.8 => 5.16.8 
    @mui/types:  7.2.21 
    @mui/utils:  5.16.8 
    @mui/x-charts:  7.17.0 
    @mui/x-charts-vendor:  7.16.0 
    @mui/x-data-grid:  7.24.0 
    @mui/x-data-grid-pro: 7.24.0
    @mui/x-date-pickers-pro: 7.24.0
    @mui/x-internals:  7.17.0 
    @mui/x-license:  7.24.0 
    @mui/x-tree-view:  7.24.0 
    @mui/x-tree-view-pro: 7.24.0 => 7.24.0 
    @types/react: ^17.0.44 => 17.0.83 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: 5.5.4 => 5.5.4 

Search keywords: resize dimensions performance rerender

Order ID: 50436

[lauri865]

Some resizing related performance issues should be better after #15648

But v7 switched from debounce to throttle indeed, which emits more changes while resizing, instead of delaying them. Both have their pros and cons for different use cases. For smooth resizing of parent container, debounce is likely better. Although for bigger resizes (when resizing up), can end up with a flash of new content.

Related change: 2ac14fd

@romgrk, do you remember what the rationale was for switching from debounce to throttle?

Dynamic debouncing could be a good middle ground (debounce always if sizing down, as it's ok to render more content during resize), logic on sizing up should depend on whether we need to mount more columns/rows to fill the viewport.

[alvarosevilla95]

@lauri865 yeah you're spot on with the root cause. Changing the use of throttle with the old debounce:

const debouncedSetSavedSize = React.useMemo(
    () => debounce(setSavedSize, props.resizeThrottleMs),
    // () => throttle(setSavedSize, props.resizeThrottleMs),
    [props.resizeThrottleMs],
  );

restores the v6 feel and performance.

throttle.mp4

debounce.mp4

From my naive user perspective, I would love to be able to restore this behaviour, like with some new debounceResize flag. I'm sure you have a more nuanced take as you described above. Dynamic debounce does sound interesting, although I wonder if even that would be too laggy when smooth expanding a sidebar like in our use case. While the debounced resize produces a more jumpy result, for us that is preferable than lagging the whole resizing of the sidebar.

[lauri865]

Added some further optimisations in #15648. We're seeing buttery smooth animations in Chrome at least, even when we disable throttling completely.

Curious to know how it works for you, you can use this package src: https://pkg.csb.dev/mui/mui-x/commit/b600821a/@mui/x-data-grid

[romgrk]

I don't remember the reason :|

That PR will land on v8, I'm not sure if it's cherry-pickable on v7 but we could try, otherwise we could at least restore the old behavior.

[alvarosevilla95]

@lauri865 that PR really is something. I can confirm the resizing performance is a lot better with it. Unfortunately I can't easily test it on my main app, as the v8 base is causing some issues with some internal packages we have that have data-grid as a peerdep.

However from testing it on a toy grid, the difference is night and day. While the performance still takes a hit if I I start resizing back and forth nonstop, that doesn't concern me, it seems that for a "reasonable" use case it should more than suffice. If the PR can be backported to v7, I'm more than happy waiting for it and fully trying it out.

On a different note, it's amazing to see the PR also fixes the constant rerenders on DataGridPro and children when scrolling (and I presume other interactions), and from what you say in the comments, the styles recomputations. We had also seen some noticeable impact on scroll performance after migrating on some of our grids, and I was currently trying to track down the cause and open another issue. But it seems this PR may well also take care of that!

Thank you so much, really amazing work!!

[lauri865]

Just for reference, in our app, stress testing sidebar animation with a large grid for 10 seconds (toggling the sidebar on loop and animating the width):

Before:

After:

[michelengelen]

Will track this and reopen for the cherry pick (if possible)!

[janeklb]

Amazing work. A cherry pick to v7 would be extremely appreciated!

[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

@alvarosevilla95 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.

[alvarosevilla95]

Hi! Just wanted to close the loop on this one. I just bumped our x-data-grids to 7.26.0 and the change is massive! Performance is night and day compared to before. Thank you again, @lauri865, incredible work with that PR!!! 🎉 🚀 🙏