Material UI v4: add support for React 18

[BayoKwendo]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The latest version of @material-ui/core (v4.12.4) does not support React 18.

peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.4

Expected behavior 🤔

support version for react 18

Steps to reproduce 🕹

Steps:

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[oliviertassinari]

React 18 is supported from Material UI v5.6.0, MUI X v5.9.0 and upward.

[MartinHelvig]

Any tips on migrating to v5? because in the guide it says to update react first and make sure everything works. But I can't do that because everything does not work after I update react.

[oliviertassinari]

@MartinHelvig Please have a look at #35232. Is it clearer?

[MartinHelvig]

@oliviertassinari yeah thanks, I also noticed it has the @mui/styles in the update package section, which is not supported anymore I think.

[oliviertassinari]

@mui/styles is there to allow developers to do a progressive migration from Material UI v4, to Material UI v5.

We want developers to not have to create one big PR, one that would block the development for the rest of their team and one that is more likely to break production.

[MartinHelvig]

Ah okey, but @mui/styles does not support react 18, so kinda hard anyway.

[oliviertassinari]

@MartinHelvig Correct, you would first need to upgrade to React 17, migrate to https://github.com/garronej/tss-react, and then React 18.

But honestly, I don't see the urge to use React 18. I haven't seen strong completing use cases for its new features yet.

[MartinHelvig]

You might be right about that, just having some other packages dependent on react 18. But I appreciate your comments, helps me alot.

[levrik]

So far MUI v4 works completely fine on React 18 (without StrictMode). Is there anything I should be aware of? We cannot easily upgrade to MUI v5 but were kind of forced to do the React 18 upgrade now as a lot of other packages started to become incompatible with React 17, for example React Testing Library.

[oliviertassinari]

@levrik it's mostly ok. There are a few bugs around effect behavior changes, but if it's a legacy project, I think it's OK.

[levrik]

@oliviertassinari It's our main product which is actively being developed. We're looking into upgrading to MUI v5 but the React upgrade couldn't wait now. We didn't observe any issues within our application so far, so I guess it's okay for now.

[Rabinzon]

@levrik so react 18 works normally with mui 4?

[levrik]

@Rabinzon It seemed so, we shipped it to production and received complaints from customers a few hours later. Reverted.
I cannot recommend using MUI 4 with React 18 without very careful QA. We did QA but these things still slipped.

[MartinHelvig]

The best solution is just to update all packages, use chatGPT to get help on problems u might have.

[doniyor2109]

@Rabinzon It seemed so, we shipped it to production and received complaints from customers a few hours later. Reverted. I cannot recommend using MUI 4 with React 18 without very careful QA. We did QA but these things still slipped.

@levrik What was the issue that you have faced with MUI v4 and React 18?

[levrik]

@Rabinzon It seemed so, we shipped it to production and received complaints from customers a few hours later. Reverted. I cannot recommend using MUI 4 with React 18 without very careful QA. We did QA but these things still slipped.

@levrik What was the issue that you have faced with MUI v4 and React 18?

TBH I don't remember anymore. Since then we started moving away from MUI to our own component library and partially switched to React 18.