[core] Support React 19

[DiegoAndai]

Summary

Tasks:

• react 18.3.0 "A props object containing a "key" prop is being spread into JSX" #39833
• [core] Remove enzyme #42454
• [core] Bump React to 18.3.1 #42047
• [material-ui] Accessing element.ref was removed in React 19 #42604
• [material-ui][Tabs] Scrollable variant fails test when clicking the tab (error reading 'offsetHeight') #41388
• [core] Add React 19 as peer dependency #43216
• [core] Compatibility with React 19 types #42032
• Bump next to ^15.1.1 #44311
• [v5] Support React 19 in Material UI v5 #44413

Bonuses:

• [core] Adopt react compiler? #44336
• [core] Adopt eslint-plugin-react-compiler #42548

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 React 19 compatibility radix-ui/primitives#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. [data grid] React 19 support mui-x#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: #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):

• [material-ui] Accessing element.ref was removed in React 19 #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.

[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: #41388 (comment), 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]

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.