DataGrid performance degrades during scrolling

[chucamphong]

Steps to reproduce

Link to live example: https://codesandbox.io/p/devbox/suspicious-darkness-76qsnt

Current behavior

Setting the default loadingOverlay in slotProps leads to performance issues in the DataGrid when scrolling.

MuiDataGrid: {
  defaultProps: {
    slotProps: {
      loadingOverlay: {
        variant: "linear-progress",
        noRowsVariant: "linear-progress",
      },
    },
  },
},

When I configure it as shown below, it no longer seems to lag:

<DataGrid
  // ...
  slotProps={{
    loadingOverlay: {
      variant: 'linear-progress',
      noRowsVariant: 'linear-progress',
    }
  }}
/>

Expected behavior

Performance is not reduced when scrolling

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 22.2.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.7.1 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Chrome: Not Found
    Edge: Chromium (127.0.2651.74)
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/core-downloads-tracker:  6.1.1 
    @mui/icons-material: ^6.1.1 => 6.1.1 
    @mui/material: ^6.1.1 => 6.1.1 
    @mui/material-nextjs: ^6.1.1 => 6.1.1 
    @mui/private-theming:  6.1.1 
    @mui/styled-engine:  6.1.1 
    @mui/system:  6.1.1 
    @mui/types:  7.2.17 
    @mui/utils:  6.1.1 
    @mui/x-data-grid: ^7.18.0 => 7.18.0 
    @mui/x-internals:  7.18.0 
    @types/react: ^18 => 18.3.8 
    react: ^18 => 18.3.1 
    react-dom: ^18 => 18.3.1
    typescript: ^5 => 5.6.2

Search keywords: lag, scroll

[MBilalShafi]

@chucamphong I could not reproduce the issue on the attached devbox. Could you provide reproduction steps or (and) a video showing the reproduction?

[chucamphong]

@MBilalShafi You can check the videos below to see the issue.

This is when I used defaultProps:
You can see that when I scroll, the FPS drops to 4x FPS
https://codesandbox.io/p/devbox/cool-yalow-84yhcy

defaultProps.mp4

This is when I didn't use defaultProps:
FPS is stable, mostly staying above 50
https://codesandbox.io/p/devbox/suspicious-darkness-76qsnt

noDefaultProps.mp4

[MBilalShafi]

I could not observe any significant frame drop in the above example (tested on a Macbook M1 Pro machine).

scroll-perf.mp4

Are there some extra steps needed before the scroll to achieve the frame drop? Moreover, are you using any CPU throttling during testing?

[romgrk]

Duplicate of #10033

Handling that issue will fix this.

[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

We value your feedback @chucamphong! How was your experience with our support team?
We'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!