Add a page about React 18 & Concurrent React #3092
Conversation
✅ Deploy Preview for react-native ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
There was a problem hiding this comment.
Great job and thank you for writing this.
I left a few comments here and there I think would simplify the article and make it more effective. Feel free to apply only those that convince you the most.
I was also thinkning: does it make sense to split the article in two?
- React and React Native
- Enable the Concurrent Root in your app
The first article could go in the New Architecture Intro or even in the Introduction section of the website, while the second could stay in the migrate to the new architecture.
docs/react-18-and-react-native.md
Outdated
| :::info | ||
| **tl;dr** The first version of React Native compatible with React 18 is **0.69.0**. | ||
| Moreover, to use the [new features of React 18 (i.e. Concurrent React)](https://reactjs.org/blog/2022/03/29/react-v18.html), | ||
| you must migrate your React Native app to the New Architecture. |
There was a problem hiding this comment.
Should we add a link to the playbook here?
There was a problem hiding this comment.
Yup, would https://reactnative.dev/docs/new-architecture-intro work for you?
docs/react-18-and-react-native.md
Outdated
| 2. The React renderers **shipped** with React Native inside the [./Libraries/Renderer](https://github.com/facebook/react-native/tree/main/Libraries/Renderer) of React Native. | ||
|
|
||
| This practically means that you **can't bump** the version of React in your `package.json` to a later version, | ||
| as you will still be using the older renderer from the folder mentioned above. Bumping the react version in your package.json |
There was a problem hiding this comment.
| as you will still be using the older renderer from the folder mentioned above. Bumping the react version in your package.json | |
| as you will still be using the old renderer from the folder mentioned above. Bumping the react version in your `package.json` |
docs/react-18-and-react-native.md
Outdated
|
|
||
| React 18 introduced [several new features](https://reactjs.org/blog/2022/03/29/react-v18.html) related to concurrency, and new APIs such as `startTransition`/`useTransition`. | ||
|
|
||
| Please note that in order to use those feature, your React Native application **needs to be migrated** to the New Architecture (specifically needs to be rendering on Fabric). |
There was a problem hiding this comment.
Should we add a link to the section migrate-your-app?
There was a problem hiding this comment.
I'd either link to https://reactnative.dev/docs/new-architecture-intro or defer this to once #3029 has been merged
docs/react-18-and-react-native.md
Outdated
| ### Users on React Native 0.69 not yet migrated to the New Architecture | ||
|
|
||
| Please note that users on React Native 0.69, but still on the Old Architecture won't benefit from the new React 18 features. | ||
|
|
||
| While you can still override the `isConcurrentRootEnabled` method, that value will have no effect on your rendering. | ||
| You will still be using the old React rendered, you won't benefit of any concurrent features, and you won't be able to use the new | ||
| `startTransition`/`useTransition` APIs. |
There was a problem hiding this comment.
I'll rephrase this with something more assertive, perhaps even replacing the section with a caution box
| ### Users on React Native 0.69 not yet migrated to the New Architecture | |
| Please note that users on React Native 0.69, but still on the Old Architecture won't benefit from the new React 18 features. | |
| While you can still override the `isConcurrentRootEnabled` method, that value will have no effect on your rendering. | |
| You will still be using the old React rendered, you won't benefit of any concurrent features, and you won't be able to use the new | |
| `startTransition`/`useTransition` APIs. | |
| :::caution | |
| Users on the Old Architecture won't benefit from the new React 18 features, despite being on React Native 0.69. | |
| The `isConcurrentRootEnabled` methods are ignored when running on the new architecture. | |
| ::: |
I think that the box will catch more the attention of the user.
What do you think?
There was a problem hiding this comment.
How do you feel about the current wording?
### Users on React Native 0.69 not yet migrated to the New Architecture
Note: Users on React Native 0.69, but still on the Old Architecture will still use React 17 mode even if React 18 is installed in the `package.json` file.
Overriding the `isConcurrentRootEnabled` method will have no effect on your app.
|
Thanks for the comments @cipolleschi @Simek 🙏 Just to follow up here, @rickhanlonii is going to push some updates to this branch to simplify the page a bit 👍 |
|
routing should be platform independent |
How is this related to this PR @Nikunj262 ? |
Co-authored-by: Riccardo <cipolleschi@fb.com>
I'm adding a page about React 18 and Concurrent React to the New Architecture section.
Feedbacks are welcome as always 👍
Fixes #787