The long road to React 18

[KutnerUri]

In this issue I will track the milestones needed to switch from React 17 to React 18.

Breaking changes:

• new render method (see below)
• ~~not supported by react native (!)~~
• new @types/react that breaks if there are v17 and v18 in the same project. (should be resolved by #5750.)
  • these type errors have disappeared. It's possible the facebook team and the eco system solved this issue.
• otherwise pretty safe. :)

Stability

v18 is rather stable, but is still getting quick fixes. The type changes are now rippling through the community, so it might take a while to get all the types fixed.

Suggested path

• [ ] wait for #5443
• [ ] upgrade @teambit/react to React 18 (easy)
• [x] make sure React Native works with React 18 (easy, but not released yet) --> Released, v0.69.0
• [ ] create @teatbit/react.env-17 as an escape hatch for developer who still want to use react 17.
  • [ ] this env will keep using an older version of docs-app still using the old ReactDOM.render() method

details:

• [ ] Upgrade package version to ^18.0.0, for react, react/dom, @types/react @types/react-dom
• [ ] Upgrade @testing-library/react to ^13.0.0
• [ ] Use the new syntax for ReactDOM.render
• [x] Handle any type errors (will be resolved by #5750 and #5749)

[KutnerUri]

(Reference)

new react-dom render syntax

react-dom now has a new syntax to render the application.

// v18
import React from 'react';
import ReactDOM from 'react-dom/client'; // <-- new import

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>)

old syntax:

// v17
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(app, document.getElementById('root'));

V18 will still work with the old syntax, but will block most of the new features.

Using the new syntax breaks everything, because import 'react/client is done statically and makes webpack throw an error in React 17 before the code even runs 😢

[boehlke]

Hi, react-native 0.69 has just been released and it is based on react 18. "make sure React Native works with React 18 (easy, but not released yet)" could be checked now.

[KutnerUri]

thanks. The biggest blocker is waiting for #5443

[rishabh-ti]

How much time more till we can use React 18 in BIT?

[mxvsh]

any update regarding react 18?

[boehlke]

https://github.com/teambit/bit/pull/5443 is merged, seems like we have another check! With that merge, why is "create @teatbit/react.env-17 as an escape hatch for developer who still want to use react 17." still needed? If I understand correctly, anyone should be able to have their own react version...

[hyoretsu]

Come on, I want to use components in a React 18 project without getting warned by peer dependencies.

[acrodemocide]

Are there any status updates on the progress of this issue? My project is using React 18, so whenever I import a component from Bit, I get warnings about peer dependencies. I've tried creating a custom environment using React 18 and the latest @testing-library/react, but the tests fail because it's still running in React 17.

We're using Bit to share components across multiple teams, but it's a real challenge when all of our components in Bit are limited to React 17.

[antizhyk]

Has anyone solved the problem yet?

[DmacMcgreg]

This is a massive blocker for our team to use blitz... Many libraries are now only being built for React 18, and theres no way we're going to invest so much time into making components in bit that rely on outdated libraries for React 17.

[itaymendel]

hi,

this issue is unrelated to react-18 support for bit. this is for runnign bit with react18,