Merge pull request #111 from reactjs/sync-56df8af5

Sync with react.dev @ 56df8af

src/content/blog/2024/04/25/react-19-upgrade-guide.md

@@ -70,7 +70,13 @@ We expect most apps will not be affected since the transform is enabled in most
 To install the latest version of React and React DOM:
 
 ```bash
-npm install react@rc react-dom@rc
+npm install --save-exact react@rc react-dom@rc
+```
+
+Or, if you're using Yarn:
+
+```bash
+yarn add --exact react@rc react-dom@rc
 ```
 
 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`:

src/content/community/conferences.md

@@ -10,46 +10,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences {/*upcoming-conferences*/}
 
-### React Paris 2024 {/*react-paris-2024*/}
-March 22, 2024. In-person in Paris, France + Remote (hybrid)
-
-[Website](https://react.paris/) - [Twitter](https://twitter.com/BeJS_) - [LinkedIn](https://www.linkedin.com/events/7150816372074192900/comments/)
-
-### Epic Web Conf 2024 {/*epic-web-2024*/}
-April 10 - 11, 2024. In-person in Park City, UT, USA
-
-[Website](https://www.epicweb.dev/conf) - [YouTube](https://www.youtube.com/@EpicWebDev)
-
-### React Miami 2024 {/*react-miami-2024*/}
-April 19 - 20, 2024. In-person in Miami, FL, USA
-
-[Website](https://reactmiami.com/) - [Twitter](https://twitter.com/ReactMiamiConf)
-
-### React Connection 2024 {/*react-connection-2024*/}
-April 22, 2024. In-person in Paris, France 
-
-[Website](https://reactconnection.io/) - [Twitter](https://twitter.com/ReactConn)
-
-### React Native Connection 2024 {/*react-native-connection-2024*/}
-April 23, 2024. In-person in Paris, France 
-
-[Website](https://reactnativeconnection.io/) - [Twitter](https://twitter.com/ReactNativeConn)
-
-### React Conf 2024 {/*react-conf-2024*/}
-May 15 - 16, 2024. In-person in Henderson, NV, USA + remote
-
-[Website](https://conf.react.dev) - [Twitter](https://twitter.com/reactjs)
-
-### App.js Conf 2024 {/*appjs-conf-2024*/}
-May 22 - 24, 2024. In-person in Kraków, Poland + remote
-
-[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
-
-### Frontend Nation 2024 {/*frontend-nation-2024*/}
-June 4 - 7, 2024. Online
-
-[Website](https://frontendnation.com/) - [Twitter](https://twitter.com/frontendnation)
-
 ### React Summit 2024 {/*react-summit-2024*/}
 June 14 & 18, 2024. In-person in Amsterdam, Netherlands + remote (hybrid event)
 
@@ -103,6 +63,41 @@ October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - re
 
 ## Past Conferences {/*past-conferences*/}
 
+### Frontend Nation 2024 {/*frontend-nation-2024*/}
+June 4 - 7, 2024. Online
+
+[Website](https://frontendnation.com/) - [Twitter](https://twitter.com/frontendnation)
+
+### App.js Conf 2024 {/*appjs-conf-2024*/}
+May 22 - 24, 2024. In-person in Kraków, Poland + remote
+
+[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
+
+### React Conf 2024 {/*react-conf-2024*/}
+May 15 - 16, 2024. In-person in Henderson, NV, USA + remote
+
+[Website](https://conf.react.dev) - [Twitter](https://twitter.com/reactjs)
+
+### React Native Connection 2024 {/*react-native-connection-2024*/}
+April 23, 2024. In-person in Paris, France 
+
+[Website](https://reactnativeconnection.io/) - [Twitter](https://twitter.com/ReactNativeConn)
+
+### React Miami 2024 {/*react-miami-2024*/}
+April 19 - 20, 2024. In-person in Miami, FL, USA
+
+[Website](https://reactmiami.com/) - [Twitter](https://twitter.com/ReactMiamiConf)
+
+### Epic Web Conf 2024 {/*epic-web-2024*/}
+April 10 - 11, 2024. In-person in Park City, UT, USA
+
+[Website](https://www.epicweb.dev/conf) - [YouTube](https://www.youtube.com/@EpicWebDev)
+
+### React Paris 2024 {/*react-paris-2024*/}
+March 22, 2024. In-person in Paris, France + Remote (hybrid)
+
+[Website](https://react.paris/) - [Twitter](https://twitter.com/BeJS_) - [LinkedIn](https://www.linkedin.com/events/7150816372074192900/comments/)
+
 ### React Day Berlin 2023 {/*react-day-berlin-2023*/}
 December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity (hybrid event)
 

src/content/learn/installation.md

@@ -37,7 +37,7 @@ export default function App() {
 
 You can edit it directly or open it in a new tab by pressing the "Fork" button in the upper right corner.
 
-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)
+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)
 
 ### Try React locally {/*try-react-locally*/}
 

src/content/reference/react-dom/components/script.md

@@ -68,12 +68,10 @@ Props that are **not recommended** for use with React:
 
 #### Special rendering behavior {/*special-rendering-behavior*/}
 
-React can move `<script>` components to the document's `<head>`, de-duplicate identical scripts, and [suspend](/reference/react/Suspense) while the script is loading.
+React can move `<script>` components to the document's `<head>` and de-duplicate identical scripts.
 
 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.
 
-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.
-
 This special treatment comes with two caveats:
 
 * 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:
 ### Rendering an external script {/*rendering-an-external-script*/}
 
 If a component depends on certain scripts in order to be displayed correctly, you can render a `<script>` within the component.
+However, the component might be committed before the script has finished loading.
+You can start depending on the script content once the `load` event is fired e.g. by using the `onLoad` prop.
 
-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.
+React will de-duplicate scripts that have the same `src`, inserting only one of them into the DOM even if multiple components render it.
 
 <SandpackWithHTMLOutput>
 
@@ -97,7 +97,7 @@ import ShowRenderedHTML from './ShowRenderedHTML.js';
 function Map({lat, long}) {
   return (
     <>
-      <script async src="map-api.js" />
+      <script async src="map-api.js" onLoad={() => console.log('script loaded')} />
       <div id="map" data-lat={lat} data-long={long} />
     </>
   );
@@ -120,7 +120,7 @@ When you want to use a script, it can be beneficial to call the [preinit](/refer
 
 ### Rendering an inline script {/*rendering-an-inline-script*/}
 
-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.
+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>`.
 
 <SandpackWithHTMLOutput>
 

src/content/reference/react-dom/preinit.md

@@ -20,7 +20,7 @@ The `preinit` function is currently only available in React's Canary and experim
 `preinit` lets you eagerly fetch and evaluate a stylesheet or external script.
 
 ```js
-preinit("https://example.com/script.js", {as: "style"});
+preinit("https://example.com/script.js", {as: "script"});
 ```
 
 </Intro>

src/content/reference/react/act.md

@@ -109,7 +109,7 @@ it('can render and update a counter', async () => {
 });
 ```
 
-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.
+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.
 
 Using `act` ensures that all updates have been applied before we make assertions.
 

src/content/reference/react/cache.md

@@ -226,7 +226,7 @@ By caching a long-running data fetch, you can kick off asynchronous work prior t
 ```jsx [[2, 6, "await getUser(id)"], [1, 17, "getUser(id)"]]
 const getUser = cache(async (id) => {
   return await db.user.query(id);
-}
+})
 
 async function Profile({id}) {
   const user = await getUser(id);