You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: src/content/blog/2024/04/25/react-19-upgrade-guide.md
+7-1
Original file line number
Diff line number
Diff line change
@@ -70,7 +70,13 @@ We expect most apps will not be affected since the transform is enabled in most
70
70
To install the latest version of React and React DOM:
71
71
72
72
```bash
73
-
npm install react@rc react-dom@rc
73
+
npm install --save-exact react@rc react-dom@rc
74
+
```
75
+
76
+
Or, if you're using Yarn:
77
+
78
+
```bash
79
+
yarn add --exact react@rc react-dom@rc
74
80
```
75
81
76
82
If you're using TypeScript, you also need to update the types. Once React 19 is released as stable, you can install the types as usual from `@types/react` and `@types/react-dom`. Until the stable release, the types are available in different packages which need to be enforced in your `package.json`:
Copy file name to clipboardexpand all lines: src/content/learn/installation.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -37,7 +37,7 @@ export default function App() {
37
37
38
38
You can edit it directly or open it in a new tab by pressing the "Fork" button in the upper right corner.
39
39
40
-
Most pages in the React documentation contain sandboxes like this. Outside of the React documentation, there are many online sandboxes that support React: for example, [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), or [CodePen.](https://codepen.io/pen?&editors=0010&layout=left&prefill_data_id=3f4569d1-1b11-4bce-bd46-89090eed5ddb)
40
+
Most pages in the React documentation contain sandboxes like this. Outside of the React documentation, there are many online sandboxes that support React: for example, [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), or [CodePen.](https://codepen.io/pen?template=QWYVwWN)
Copy file name to clipboardexpand all lines: src/content/reference/react-dom/components/script.md
+6-6
Original file line number
Diff line number
Diff line change
@@ -68,12 +68,10 @@ Props that are **not recommended** for use with React:
68
68
69
69
#### Special rendering behavior {/*special-rendering-behavior*/}
70
70
71
-
React can move `<script>` components to the document's `<head>`, de-duplicate identical scripts, and [suspend](/reference/react/Suspense) while the script is loading.
71
+
React can move `<script>` components to the document's `<head>` and de-duplicate identical scripts.
72
72
73
73
To opt into this behavior, provide the `src` and `async={true}` props. React will de-duplicate scripts if they have the same `src`. The `async` prop must be true to allow scripts to be safely moved.
74
74
75
-
If you supply any of the `onLoad` or `onError` props, there is no special behavior, because these props indicate that you are managing the loading of the script manually within your component.
76
-
77
75
This special treatment comes with two caveats:
78
76
79
77
* React will ignore changes to props after the script has been rendered. (React will issue a warning in development if this happens.)
@@ -86,8 +84,10 @@ This special treatment comes with two caveats:
86
84
### Rendering an external script {/*rendering-an-external-script*/}
87
85
88
86
If a component depends on certain scripts in order to be displayed correctly, you can render a `<script>` within the component.
87
+
However, the component might be committed before the script has finished loading.
88
+
You can start depending on the script content once the `load` event is fired e.g. by using the `onLoad` prop.
89
89
90
-
If you supply an `src` and `async` prop, your component will suspend while the script is loading. React will de-duplicate scripts that have the same `src`, inserting only one of them into the DOM even if multiple components render it.
90
+
React will de-duplicate scripts that have the same `src`, inserting only one of them into the DOM even if multiple components render it.
91
91
92
92
<SandpackWithHTMLOutput>
93
93
@@ -97,7 +97,7 @@ import ShowRenderedHTML from './ShowRenderedHTML.js';
@@ -120,7 +120,7 @@ When you want to use a script, it can be beneficial to call the [preinit](/refer
120
120
121
121
### Rendering an inline script {/*rendering-an-inline-script*/}
122
122
123
-
To include an inline script, render the `<script>` component with the script source code as its children. Inline scripts are not de-duplicated or moved to the document `<head>`, and since they don't load any external resources, they will not cause your component to suspend.
123
+
To include an inline script, render the `<script>` component with the script source code as its children. Inline scripts are not de-duplicated or moved to the document `<head>`.
Copy file name to clipboardexpand all lines: src/content/reference/react/act.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -109,7 +109,7 @@ it('can render and update a counter', async () => {
109
109
});
110
110
```
111
111
112
-
Here, wwe create a container, append it to the document, and render the `Counter` component inside `act()`. This ensures that the component is rendered and its effects are applied before making assertions.
112
+
Here, we create a container, append it to the document, and render the `Counter` component inside `act()`. This ensures that the component is rendered and its effects are applied before making assertions.
113
113
114
114
Using `act` ensures that all updates have been applied before we make assertions.
0 commit comments