React 18 Migration: The Umbrella

[joshblack]

React shipped their v18 major release earlier this month. We would like to include support for this version in the carbon-components-react, @carbon/react, and @carbon/icons-react packages in v11. In order to do so, we will need to:

Tasks

Preview Give feedback

1. React 18 Migration: Refactor the React test suite to use React Testing Library #10184
   131 of 131
   epic planning: umbrella +2
2. React 18 Migration: Explore updating packages to React 18 #13220
   role: dev 🤖 +1
   

   

---

Workarounds

In the meantime, you can force the install of React 18 by either:

• Install using --legacy-peer-deps
• Manually update the dependency version in your project's node_modules
• Use yarn's resolutions to override the dependency version
• Use npm's overrides to override the dependency version

  • "dependencies": {
      "react": "^18",
      "react-dom": "^18",
    },
    "overrides": {
      "@carbon/react": {
        "react": "^18",
        "react-dom": "^18"
      }
    }
    

These workarounds are not a statement of support - there may be compatibility issues with React 18.

[tay1orjones]

Find an appropriate way in CI to test behavior in v17 and v18

There's some interesting ideas in this article with using yarn aliases and installing both versions of react. Toggling between the two versions via an env variable seems reasonable.

It will require that we run our test suite twice. We can separating it out into it's own action/job so it can be parallelized.

[dglozic]

When you DO add support for React 18, will you also add it to v10? Many teams want to move to React 18 (or have already moved using --legacy-peer-deps) but are not ready to move to Carbon 11 just for this.

[sstrubberg]

hey @dglozic, we have no plans to backport React 18 support to Carbon 10. We are, however, creating time and space for dealing with the fallout from moving to React 18. We expect a spike to investigate this further. Come join us in v11! The water is fine ;)

[dglozic]

Based on what I have seen so far, a significant number of products are still on v10 because of the hardship of porting to 11. I am expecting this to become a problem as a significant portion of code running in production is not on a version you are currently spending most of your time on.

React 18 is a good example - we moved from 16.12 (skipping 17) to 18.2. I had to fix couple of things here and there (mostly hydration) and mostly because I wanted to take advantage of renderToPipeableStream which required some porting from renderToNodeStream. I wish porting to Carbon 11 was the same experience. I think there will be more pressure to add more legacy modes to lower the cost of porting (until it is as easy as React 16 -> 18).

I would also expect more pressure for smooth co-existence of 10 and 11 codes in the same page (because we don't control all the shared components that we depend on). It is simply not possible to make a synchronized jump at the product of the Cloud Pak for Data size.

[The-Real-Thisas]

Not to be 'that guy', but is there an ETA on this since Next.js 13 uses react 18 by default. I've been using the --legacy-peer-deps as a workaround and haven't really had much issues but I don't know if it would have any issues when deploying to like vercel.

[tay1orjones]

@The-Real-Thisas We've got a draft PR up that we're actively working on: #13332 we're trying to land it asap. We just need to fix the CI issues.

[tay1orjones]

Just to update here, React 18 support is out and included starting in v1.27.0

• feat(react): update to React 18 #13332

The remaining items outlined in this issue are just pieces that were previously blocked by lack of React 18 support.

[tay1orjones]

All items that remained in this issue have been transferred to #13623