[data grid] React 19 support

[cherniavskii]

React 19 demos

• DataGrid
• DataGridPro
• DataGridPremium

Issues

• "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
  Example: https://codesandbox.io/p/sandbox/intelligent-jerry-2jgvqy
  [material-ui] Accessing element.ref was removed in React 19 material-ui#42604

• "Rendered fewer hooks than expected."
  Reproducible in both DataGridPro and DataGridPremium, but not in DataGrid.
  Example: https://codesandbox.io/p/sandbox/late-cookies-8y8j2d
  No warnings in React 18.3.1: https://codesandbox.io/p/sandbox/cool-dream-4zznnh

TODO

• Support running our testing suite against different React versions (borrow the solution from the core? [core] Allow running full pipeline with various React versions material-ui#25005)
  Draft PR: [core] Add react-next workflow in CircleCI #13360
• Update test compatible with React 19
  Reference Material UI PR: [material-ui] Make tests compatible with React 19 material-ui#43155
• Make sure Material UI v5 supports React 19 [core] Support React 19 material-ui#42381
• Update peerDependencies to include ^19.0.0 once data grid works with React 19

Search keywords:

[arminmeh]

@cherniavskii are you able to reproduce the Rendered fewer hooks than expected. error locally?
For me, this specific issue does not appear locally (copy of https://codesandbox.io/p/sandbox/late-cookies-8y8j2d) and even on the sandbox grid starts working after you start making some code changes.
Maybe it is only a sandbox related issue for the initial load?

[cherniavskii]

@arminmeh Indeed, I can't reproduce it when running the codesandbox locally.
But it also doesn't seem to be using React 19:

$ npm ls
├── @emotion/react@11.13.3
├── @emotion/styled@11.13.0
├── @mui/icons-material@6.0.2
├── @mui/material@6.0.2
├── @mui/x-data-grid-generator@7.16.0
├── @mui/x-data-grid-pro@7.16.0
├── @types/react-dom@18.3.0
├── @types/react@18.3.5
├── react-dom@18.3.1
├── react-scripts@5.0.1
├── react@18.3.1
└── typescript@4.9.5

Not sure why though 🤔

UPD: pnpm resolves dependencies correctly, I can't reproduce the hooks error locally with React 19 👍🏻
Looks like it's a Codesandbox issue.

[oliviertassinari]

With https://nextjs.org/blog/next-15 stable, depending on react@19.0.0-rc, and used at 10% https://tools-public.mui.com/prod/pages/npmVersion?package=next, we might want to prioritize this one.

It's unclear if we need to cherry-pick it back to MUI X v7. React might ship v19 stable in a few days.

https://bsky.app/profile/react.dev/post/3lawuio3hac2u suggests that it could be soon.

[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.