` you added to your HTML in the first step and then display the "Like" button React component inside of it.
+Lastly, add three lines to the bottom of **like_button.js**. These three lines of code find the `
` you added to your HTML in the first step, create a React app with it, and then display the "Like" button React component inside of it.
```js
const domContainer = document.getElementById('component-goes-here');
-ReactDOM.render(React.createElement(LikeButton), domContainer);
+const root = ReactDOM.createRoot(domContainer);
+root.render(React.createElement(LikeButton));
```
**Congratulations! You have just rendered your first React component to your website!**
@@ -88,21 +89,21 @@ ReactDOM.render(React.createElement(LikeButton), domContainer);
#### You can reuse components! {/*you-can-reuse-components*/}
-You might want to display a React component in multiple places on the same HTML page. This is most useful while React-powered parts of the page are isolated from each other. You can do this by calling `ReactDOM.render()` multiple times with multiple container elements.
+You might want to display a React component in multiple places on the same HTML page. This is most useful while React-powered parts of the page are isolated from each other. You can do this by calling `ReactDOM.createRoot()` multiple times with multiple container elements.
1. In **index.html**, add an additional container element `
`.
2. In **like_button.js**, add an additional `ReactDOM.render()` for the new container element:
```js {6,7,8,9}
-ReactDOM.render(
- React.createElement(LikeButton),
+const root1 = ReactDOM.createRoot(
document.getElementById('component-goes-here')
);
+root1.render(React.createElement(LikeButton));
-ReactDOM.render(
- React.createElement(LikeButton),
+const root2 = ReactDOM.createRoot(
document.getElementById('component-goes-here-too')
);
+root2.render(React.createElement(LikeButton));
```
Check out [an example that displays the "Like" button three times and passes some data to it](https://gist.github.com/rachelnabors/c0ea05cc33fbe75ad9bbf78e9044d7f8)!
@@ -115,8 +116,8 @@ Unminified JavaScript can significantly slow down page load times for your users
- **If you already minify** your application scripts, your site will be production-ready if you ensure that the deployed HTML loads the versions of React ending in `production.min.js` like so:
```html
-
-
+
+
```
## Try React with JSX {/*try-react-with-jsx*/}
@@ -144,8 +145,8 @@ The quickest way to try JSX in your project is to add the Babel compiler to your
```html {6}
-
-
+
+
@@ -157,8 +158,8 @@ Now you can use JSX in any `
```
diff --git a/beta/src/pages/learn/choosing-the-state-structure.md b/beta/src/pages/learn/choosing-the-state-structure.md
index 0a874ae85..ebc6e3cd0 100644
--- a/beta/src/pages/learn/choosing-the-state-structure.md
+++ b/beta/src/pages/learn/choosing-the-state-structure.md
@@ -2019,7 +2019,7 @@ export default function App() {
### Fix a broken packing list {/*fix-a-broken-packing-list*/}
-This packing list has a footer that shows how many items are packed, and how many items there are overall. It seems to work at first, but it is buggy. For example, if you mark a place as completed and then delete it, the counter will not be updated correctly. Fix the counter so that it's always correct.
+This packing list has a footer that shows how many items are packed, and how many items there are overall. It seems to work at first, but it is buggy. For example, if you mark an item as packed and then delete it, the counter will not be updated correctly. Fix the counter so that it's always correct.
diff --git a/content/authors.yml b/content/authors.yml
index 05ed6c27d..59b758020 100644
--- a/content/authors.yml
+++ b/content/authors.yml
@@ -76,6 +76,9 @@ petehunt:
rachelnabors:
name: Rachel Nabors
url: https://twitter.com/rachelnabors
+reactteam:
+ name: The React Team
+ url: https://reactjs.org/community/team.html
rickhanlonii:
name: Rick Hanlon
url: https://twitter.com/rickhanlonii
diff --git a/content/blog/2022-03-08-react-18-upgrade-guide.md b/content/blog/2022-03-08-react-18-upgrade-guide.md
index 15081e219..d75cb1013 100644
--- a/content/blog/2022-03-08-react-18-upgrade-guide.md
+++ b/content/blog/2022-03-08-react-18-upgrade-guide.md
@@ -1,29 +1,29 @@
---
-title: "How to Upgrade to the React 18 Release Candidate"
+title: "How to Upgrade to React 18"
author: [rickhanlonii]
---
-Our next major version, React 18, is available today as a Release Candidate (RC). As we shared at [React Conf](https://reactjs.org/blog/2021/12/17/react-conf-2021-recap.html), React 18 introduces features powered by our new concurrent renderer, with a gradual adoption strategy for existing applications. In this post, we will guide you through the steps for upgrading to React 18.
+As we shared in the [release post](/blog/2022/03/29/react-v18.html), React 18 introduces features powered by our new concurrent renderer, with a gradual adoption strategy for existing applications. In this post, we will guide you through the steps for upgrading to React 18.
-If you'd like to help us test React 18, follow the steps in this upgrade guide and [report any issues](https://github.com/facebook/react/issues/new/choose) you encounter so we can fix them before the stable release.
+Please [report any issues](https://github.com/facebook/react/issues/new/choose) you encounter while upgrading to React 18.
-*Note for React Native users: React 18 will ship in React Native with the New React Native Architecture. For more information, see the [React Conf keynote here](https://www.youtube.com/watch?v=FZ0cG47msEk&t=1530s).*
+*Note for React Native users: React 18 will ship in a future version of React Native. This is because React 18 relies on the New React Native Architecture to benefit from the new capabilities presented in this blogpost. For more information, see the [React Conf keynote here](https://www.youtube.com/watch?v=FZ0cG47msEk&t=1530s).*
-## Installing
+## Installing {#installing}
-To install the latest React 18 RC, use the `@rc` tag:
+To install the latest version of React:
```bash
-npm install react@rc react-dom@rc
+npm install react react-dom
```
Or if you’re using yarn:
```bash
-yarn add react@rc react-dom@rc
+yarn add react react-dom
```
-## Updates to Client Rendering APIs
+## Updates to Client Rendering APIs {#updates-to-client-rendering-apis}
When you first install React 18, you will see a warning in the console:
@@ -70,7 +70,7 @@ function AppWithCallbackAfterRender() {
console.log('rendered');
});
-return
+ return
}
const container = document.getElementById('app');
@@ -78,7 +78,9 @@ const root = ReactDOM.createRoot(container);
root.render();
```
-> Note: There is no one-to-one replacement for the old render callback API — it depends on your use case. See the working group post for [Replacing render with createRoot](https://github.com/reactwg/react-18/discussions/5) for more information.
+> Note:
+>
+> There is no one-to-one replacement for the old render callback API — it depends on your use case. See the working group post for [Replacing render with createRoot](https://github.com/reactwg/react-18/discussions/5) for more information.
Finally, if your app uses server-side rendering with hydration, upgrade `hydrate` to `hydrateRoot`:
@@ -97,7 +99,11 @@ const root = hydrateRoot(container, );
For more information, see the [working group discussion here](https://github.com/reactwg/react-18/discussions/5).
-## Updates to Server Rendering APIs
+> Note
+>
+> **If your app doesn't work after upgrading, check whether it's wrapped in ``.** [Strict Mode has gotten stricter in React 18](#updates-to-strict-mode), and not all your components may be resilient to the new checks it adds in development mode. If removing Strict Mode fixes your app, you can remove it during the upgrade, and then add it back (either at the top or for a part of the tree) after you fix the issues that it's pointing out.
+
+## Updates to Server Rendering APIs {#updates-to-server-rendering-apis}
In this release, we’re revamping our `react-dom/server` APIs to fully support Suspense on the server and Streaming SSR. As part of these changes, we're deprecating the old Node streaming API, which does not support incremental Suspense streaming on the server.
@@ -120,7 +126,7 @@ Finally, this API will continue to work for rendering e-mails:
For more information on the changes to server rendering APIs, see the working group post on [Upgrading to React 18 on the server](https://github.com/reactwg/react-18/discussions/22), a [deep dive on the new Suspense SSR Architecture](https://github.com/reactwg/react-18/discussions/37), and [Shaundai Person’s](https://twitter.com/shaundai) talk on [Streaming Server Rendering with Suspense](https://www.youtube.com/watch?v=pj5N-Khihgc) at React Conf 2021.
-## Automatic Batching
+## Automatic Batching {#automatic-batching}
React 18 adds out-of-the-box performance improvements by doing more batching by default. Batching is when React groups multiple state updates into a single re-render for better performance. Before React 18, we only batched updates inside React event handlers. Updates inside of promises, setTimeout, native event handlers, or any other event were not batched in React by default:
@@ -179,17 +185,16 @@ function handleClick() {
For more information, see the [Automatic batching deep dive](https://github.com/reactwg/react-18/discussions/21).
-## New APIs for Libraries
+## New APIs for Libraries {#new-apis-for-libraries}
-In the React 18 Working Group we worked with library maintainers to create new APIs needed to support concurrent rendering for use cases specific to their use case in areas like styles, external stores, and accessibility. To support React 18, some libraries may need to switch to one of the following APIs:
+In the React 18 Working Group we worked with library maintainers to create new APIs needed to support concurrent rendering for use cases specific to their use case in areas like styles, and external stores. To support React 18, some libraries may need to switch to one of the following APIs:
-* `useId` is a new hook for generating unique IDs on both the client and server, while avoiding hydration mismatches. This solves an issue that already exists in React 17 and below, but it's even more important in React 18 because of how our streaming server renderer delivers HTML out-of-order. For more information see the [useId post in the working group](https://github.com/reactwg/react-18/discussions/111).
* `useSyncExternalStore` is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. This new API is recommended for any library that integrates with state external to React. For more information, see the [useSyncExternalStore overview post](https://github.com/reactwg/react-18/discussions/70) and [useSyncExternalStore API details](https://github.com/reactwg/react-18/discussions/86).
* `useInsertionEffect` is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you've already built a CSS-in-JS library we don't expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. For more information, see the [Library Upgrade Guide for `