[core] Support React 19

[DiegoAndai]

Summary

Tasks:

• [x] https://github.com/mui/material-ui/issues/39833
• [x] https://github.com/mui/material-ui/issues/42454
• [x] https://github.com/mui/material-ui/pull/42047
• [ ] https://github.com/mui/material-ui/issues/42032
• [ ] #42604
• [ ] https://github.com/mui/material-ui/issues/41388
• [ ] https://github.com/mui/material-ui/issues/42548
• [ ] Update peerDependencies to include ^19.0.0 once it works with React 19
• [ ] Run tests against React 18 periodically (update .circleci/config.yml)
• [ ] Backport to master (v5)

Examples

• React 19 RC

Motivation

Allow users to use packages with React 19 to make the most out of the new features

Search keywords: react 19 support

[oliviertassinari]

Do we plan to bring React 19 support to Material UI v5? From this issue, I get the impression that it's plan for Material UI v6 only.

I think that we could skip Material UI v5 support, and only do Material UI v6 if all these conditions are met:

• There are breaking changes needed to support React 19 (so can't happen in Material UI v5) or it's a LOT of work to do twice in v6 and v5 (not worth it).
• Material UI v6 is an "easy" migration from Material UI v5. If it's not, it would mean that we force developers to go through a painful upgrade path to be able to use React 19. A great UX is to allow developers to upgrade both independently.
• Material UI v6 is released with React 19 support before or at the same time other libraires release React 19. For example, it's worked on in https://github.com/radix-ui/primitives/pull/2934. If the release of Material UI v6 comes many weeks after, it would signal to the community that Material UI is lagging behind. It's not pushing the envelope.
• MUI X can support React 19 without introducing a new major. https://github.com/mui/mui-x/issues/13356

[aarongarciah]

@DiegoAndai I created an issue to adopt the official eslint-plugin-react-compiler. React compiler requires React 19 to work, so it would be nice if we fix most issues (at least in the demos) before React 19 is released.

Do you think it makes sense to include it in this umbrella issue?

edit: https://github.com/mui/material-ui/issues/42548 is now part of this umbrella issue.

[DiegoAndai]

Do we plan to bring React 19 support to Material UI v5?

We discussed with the core team, and the plan is as follows:

• We'll work on React 19 support on the next branch (v6)
• After the next branch is compatible with React 19, we'll review if it's possible to backport the changes to the master branch (v5) based on the conditions @oliviertassinari mentions in his comment.

To make the backport easier (in case we go for it), we'll try to batch the React 19 changes in bigger PRs.

cc: @aarongarciah

[oliviertassinari]

@DiegoAndai It sounds great.

The why behind each condition is more important than the conditions themselves, I wanted to highlight the considerations that we likely want to weight with v4.

[fzaninotto]

I know the decision has already been made, but I wanted to give my 2c with the react-admin perspective.

We're adding the finishing touches to our new major version, react-admin v5. We do only one major version every 2 years to avoid bothering our users with useless upgrades, so we make each major count!

We've tested react-admin v5 with React 19 RC, and we only have only 2 problems (we're using Material UI v5):

• #42604
• The MUI peerDependencies that don't accept React 19 yet

We would very much like to launch React-admin v5 just after the React 19 stable, to be able to benefit from the new hooks (e.g. use()) in future minor releases. Otherwise we'll have to wait 2 years for that. But that won't be possible if MUI v5 doesn't fix the two issues above or if V6 isn't released in the days following React 19.

I dont't know about the MUI v6 release schedule, but I understand it's not ready for prime time yet. So if you could fix the 2 issues above in v5 first, this would help react-admin (and every other project using MUI v5 and React 19) work almost flawlessly without waiting for V6.

We could even give you a hand if that's an option.

Looking forward to using React 19 with MUI soon!

[DiegoAndai]

Thanks for reaching out @fzaninotto 🙌🏼

This is a solid argument for backporting the React 19 changes to v5. If we can support React 19 without breaking changes, I see it likely that we will. We'll keep updating this issue with the progress we make.

[fzaninotto]

We ended up releasing react-admin v5 today without requiring React 19 (or MUI 6). We'll need to wait for the next major version to do so. https://github.com/marmelab/react-admin/releases/tag/v5.0.0.

[Zenoo]

I'm not sure if this warning is known, so I'll add it here just in case. It's about element.ref in React 19:

app-index.js:34 Warning: 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.
    at Tooltip (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_gr7z7qewvkqf543mugcy52trle/node_modules/@mui/material/Tooltip/Tooltip.js:294:85)

It's not having any negative impact on the actual display.

[cherniavskii]

We also need Material UI v5 to support React 19 for MUI X.

[DiegoAndai]

@aarongarciah after we figure out the Modal test issue, we should take this out of the v6 milestone. The package bumping should be done as soon as React 19 is stable, so it shouldn't block the v6 stable release.

[aarongarciah]

@DiegoAndai we decided to modify the Modal test temporarily. See https://github.com/mui/material-ui/pull/42824/files#r1718307022. I'm taking this out of the v6 milestone as there's nothing React 19 related that should delay the v6 release.

[erickbelfy]

Hey folks, the product that I work with is planning to migrate to react 19 soon, and we also use RA, I see that there’s a lot of good work here going on, I’d like to know if there’s any tasks that I could help you with

[DiegoAndai]

Hey @erickbelfy! Thanks for reaching out. The only thing left at this moment is to implement this fix: https://github.com/mui/material-ui/issues/41388#issuecomment-2218752997, let me know if you want to take this.

[anselvo]

Hello guys I've checked repo and looks like peer dependacies have been update for usage of react v19, but in npm repo version package @mui/base with version beta.64 -> https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.64.tgz still have old peer dependansies without react v19. Thus, npm throws error because of tis package. I just wonder if the realease is still under deployment or it is not supposed to be like this?

[DiegoAndai]

Hey @anselvo, thanks for reaching out. These should be updated in this week's release.

[DiegoAndai]

This issue has been completed (besides bonuses, tracked independently). The latest v5 (5.16.12) and v6 (6.2.1) have their dependencies updated.

If you find any React 19-related issues, please open a new issue with a minimal reproduction and assign me 😊.

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