Merge pull request #543 from reactjs/sync-19aa5b48

Sync with reactjs.org @ 19aa5b4

Author: koba04

beta/.gitignore

@@ -35,6 +35,4 @@ yarn-error.log*
 .vercel
 
 # external fonts
-public/fonts/Optimistic_Display_W_Lt.woff2
-public/fonts/Optimistic_Display_W_Md.woff2
-public/fonts/Optimistic_Display_W_Bd.woff2
+public/fonts/Optimistic_*.woff2

beta/public/images/og-blog.png

@@ -15,3 +15,15 @@ execSync(
 execSync(
   'curl https://conf.reactjs.org/fonts/Optimistic_Display_W_Bd.woff2 --output public/fonts/Optimistic_Display_W_Bd.woff2'
 );
+execSync(
+  'curl https://conf.reactjs.org/fonts/Optimistic_Display_W_SBd.woff2 --output public/fonts/Optimistic_Display_W_SBd.woff2'
+);
+execSync(
+  'curl https://conf.reactjs.org/fonts/Optimistic_Text_W_Rg.woff2 --output public/fonts/Optimistic_Text_W_Rg.woff2'
+);
+execSync(
+  'curl https://conf.reactjs.org/fonts/Optimistic_Text_W_Md.woff2 --output public/fonts/Optimistic_Text_W_Md.woff2'
+);
+execSync(
+  'curl https://conf.reactjs.org/fonts/Optimistic_Text_W_Bd.woff2 --output public/fonts/Optimistic_Text_W_Bd.woff2'
+);

beta/public/images/og-community.png

@@ -44,7 +44,7 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
           <Box className="bg-gray-300 dark:bg-gray-90" width="15px" />
         </div>
         <div className="flex text-sm px-4">
-          <div className="border-b-2 border-gray-300 dark:border-gray-90">
+          <div className="border-b-2 border-gray-300 dark:border-gray-90 dark:text-gray-30 text-gray-50">
             Console
           </div>
           <div className="px-4 py-2 flex">

beta/public/images/og-home.png

@@ -30,11 +30,21 @@ June 2 & 6, 2023. In-person in Amsterdam, Netherlands + remote first interactivi
 
 [Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)
 
+### React Norway 2023 {/*react-norway-2023*/}
+June 16th, 2023. Larvik, Norway
+
+[Website](https://reactnorway.com/) - [Twitter](https://twitter.com/ReactNorway/) - [Facebook](https://www.facebook.com/reactdaynorway/)
+
 ### ReactNext 2023 {/*reactnext-2023*/}
 June 27th, 2023. Tel Aviv, Israel
 
 [Website](https://www.react-next.com/) - [Facebook](https://www.facebook.com/ReactNextConf) - [Youtube](https://www.youtube.com/@ReactNext)
 
+### React Nexus 2023 {/*react-nexus-2023*/}
+July 07 & 08, 2023. Bangalore, India (In-person event)
+
+[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)
+
 ### React India 2023 {/*react-india-2023*/}
 Oct 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day 
 

beta/public/images/og-learn.png

@@ -14,7 +14,7 @@ The React Core team members work full time on the core component APIs, the engin
 
 Current members of the React team are listed in alphabetical order below.
 
-<TeamMember name="Andrew Clark" permalink="andrew-clark" photo="/images/team/acdlite.jpg" github="acdlite" twitter="acdlite" title="Engineer at Meta">
+<TeamMember name="Andrew Clark" permalink="andrew-clark" photo="/images/team/acdlite.jpg" github="acdlite" twitter="acdlite" title="Engineer at Vercel">
     Andrew got started with web development by making sites with WordPress, and eventually tricked himself into doing JavaScript. His favorite pastime is karaoke. Andrew is either a Disney villain or a Disney princess, depending on the day.
 </TeamMember>
 
@@ -38,10 +38,14 @@ Current members of the React team are listed in alphabetical order below.
     Lauren’s programming career peaked when she first discovered the `<marquee>` tag. She’s been chasing that high ever since. When she’s not adding bugs into React, she enjoys dropping cheeky memes in chat, and playing all too many video games with her partner, and her dog Zelda.
 </TeamMember>
 
-<TeamMember name="Luna Ruan" permalink="luna-ruan" photo="/images/team/lunaruan.jpg" github="lunaruan" twitter="lunaruan" title="Engineer at Meta">
+<TeamMember name="Luna Ruan" permalink="luna-ruan" photo="/images/team/lunaruan.jpg" github="lunaruan" twitter="lunaruan" title="Independent Engineer">
     Luna learned programming because she thought it meant creating video games. Instead, she ended up working on the Pinterest web app, and now on React itself. Luna doesn't want to make video games anymore, but she plans to do creative writing if she ever gets bored.
 </TeamMember>
 
+<TeamMember name="Mengdi Chen" permalink="mengdi-chen" photo="/images/team/mengdi-chen.jpg" github="mondaychen" twitter="mengdi_en" title="Engineer at Meta">
+    While working on his Digital Arts degree Mengdi was conceited about his front-end skills because his CSS worked perfectly even on IE6. But soon React opened a new door of programming for him, and he has been dreaming of joining the React team ever since. Outside of work, he is usually busy chasing his two kids around or collecting strange recipes.
+</TeamMember>
+
 <TeamMember name="Mofei Zhang" permalink="mofei-zhang" photo="/images/team/mofei-zhang.png" github="mofeiZ" title="Engineer at Meta">
     Mofei started programming when she realized it can help her cheat in video games. She focused on operating systems in undergrad / grad school, but now finds herself happily tinkering on React. Outside of work, she enjoys debugging bouldering problems and planning her next backpacking trip(s).
 </TeamMember>

beta/public/images/og-reference.png

@@ -212,7 +212,7 @@ If you're coming from an object-oriented programming background, you might assum
 
 </DeepDive>
 
-Now let's say you want to wrap the completed item's text into another HTML tag, like `<del>` to strike it out. You can add even more newlines and parentheses so that it's easier to nest more JSX each of the cases:
+Now let's say you want to wrap the completed item's text into another HTML tag, like `<del>` to strike it out. You can add even more newlines and parentheses so that it's easier to nest more JSX in each of the cases:
 
 <Sandpack>
 

beta/public/images/og-unknown.png

@@ -471,14 +471,14 @@ This is not ideal. You want to re-connect to the chat only if the `roomId` has c
 
 ```js
 import { useState, useEffect } from 'react';
-import { experimental_useEvent as useEvent } from 'react';
+import { experimental_useEffectEvent as useEffectEvent } from 'react';
 import { createConnection, sendMessage } from './chat.js';
 import { showNotification } from './notifications.js';
 
 const serverUrl = 'https://localhost:1234';
 
 function ChatRoom({ roomId, theme }) {
-  const onConnected = useEvent(() => {
+  const onConnected = useEffectEvent(() => {
     showNotification('Connected!', theme);
   });
 

beta/public/images/team/mengdi-chen.jpg

@@ -469,7 +469,7 @@ export default function TodoList() {
 ```css
 body { padding: 0; margin: 0 }
 body > div > div { padding: 20px; }
-.avatar { border-radius: 50%; height: 90px; }
+.avatar { border-radius: 50%; }
 ```
 
 </Sandpack>
@@ -520,7 +520,7 @@ export default function TodoList() {
 ```css
 body { padding: 0; margin: 0 }
 body > div > div { padding: 20px; }
-.avatar { border-radius: 50%; height: 90px; }
+.avatar { border-radius: 50%; }
 ```
 
 </Sandpack>
@@ -575,7 +575,7 @@ export function getImageUrl(person) {
 ```css
 body { padding: 0; margin: 0 }
 body > div > div { padding: 20px; }
-.avatar { border-radius: 50%; height: 90px; }
+.avatar { border-radius: 50%; }
 ```
 
 </Sandpack>
@@ -584,4 +584,4 @@ body > div > div { padding: 20px; }
 
 </Solution>
 
-</Challenges>
+</Challenges>

beta/scripts/downloadFonts.js

@@ -748,7 +748,7 @@ If you have an existing codebase, you might have some Effects that suppress the
 useEffect(() => {
   // ...
   // 🔴 Avoid suppressing the linter like this:
-  // eslint-ignore-next-line react-hooks/exhaustive-dependencies
+  // eslint-ignore-next-line react-hooks/exhaustive-deps
 }, []);
 ```
 

beta/src/components/MDX/ConsoleBlock.tsx

@@ -285,7 +285,7 @@ If you have an existing codebase, you might have some Effects that suppress the
 useEffect(() => {
   // ...
   // 🔴 Avoid suppressing the linter like this:
-  // eslint-ignore-next-line react-hooks/exhaustive-dependencies
+  // eslint-ignore-next-line react-hooks/exhaustive-deps
 }, []);
 ```
 

beta/src/content/community/conferences.md

@@ -1410,7 +1410,7 @@ But wait, there's a problem. Try clicking on the same square multiple times:
 
 The `X` is overwritten by an `O`! While this would add a very interesting twist to the game, we're going to stick to the original rules for now.
 
-When you mark a square with a `X` or a `O` you aren't first checking to see if the square already has a `X` or `O` value. You can fix this by *returning early*. You'll check to see if the square already has a `X` or and `O`. If the square is already filled, you will `return` in the `handleClick` function early--before it tries to update the board state.
+When you mark a square with a `X` or an `O` you aren't first checking to see if the square already has a `X` or `O` value. You can fix this by *returning early*. You'll check to see if the square already has a `X` or an `O`. If the square is already filled, you will `return` in the `handleClick` function early--before it tries to update the board state.
 
 ```js {2,3,4}
 function handleClick(i) {

beta/src/content/community/team.md

@@ -130,6 +130,6 @@ If you remove the call to `flushSync`, then when the print dialog will display `
 
 `flushSync` can significantly hurt performance, and may unexpectedly force pending Suspense boundaries to show their fallback state.
 
-Most of the time, `flushSync` can be avoided, so use `flushSync` as last resort.
+Most of the time, `flushSync` can be avoided, so use `flushSync` as a last resort.
 
 </Pitfall>

beta/src/content/learn/conditional-rendering.md

@@ -167,7 +167,7 @@ const assetMap = {
 
 async function handler(request) {
   const stream = await renderToReadableStream(<App assetMap={assetMap} />, {
-    bootstrapScripts: [assets['/main.js']]
+    bootstrapScripts: [assetMap['/main.js']]
   });
   return new Response(stream, {
     headers: { 'content-type': 'text/html' },
@@ -188,7 +188,7 @@ async function handler(request) {
   const stream = await renderToReadableStream(<App assetMap={assetMap} />, {
     // Careful: It's safe to stringify() this because this data isn't user-generated.
     bootstrapScriptContent: `window.assetMap = ${JSON.stringify(assetMap)};`,
-    bootstrapScripts: [assets['/main.js']],
+    bootstrapScripts: [assetMap['/main.js']],
   });
   return new Response(stream, {
     headers: { 'content-type': 'text/html' },

beta/src/content/learn/escape-hatches.md

@@ -139,7 +139,7 @@ Keep in mind that by exposing a ref to the DOM node inside your component, you'r
 
 #### Focusing a text input {/*focusing-a-text-input*/}
 
-Clicking the button will focus the input. The `Form` component defines a ref and passes it to the `MyInput` component. The `MyInput` component fowards that ref to the browser `<input>`. This lets the `Form` component focus the `<input>`.
+Clicking the button will focus the input. The `Form` component defines a ref and passes it to the `MyInput` component. The `MyInput` component forwards that ref to the browser `<input>`. This lets the `Form` component focus the `<input>`.
 
 <Sandpack>
 

beta/src/content/learn/javascript-in-jsx-with-curly-braces.md

@@ -23,7 +23,7 @@ const isElement = isValidElement(value)
 Call `isValidElement(value)` to check whether `value` is a React element.
 
 ```js
-import { isValidElement } from 'react';
+import { isValidElement, createElement } from 'react';
 
 // ✅ React elements
 console.log(isValidElement(<p />)); // true

beta/src/content/learn/lifecycle-of-reactive-effects.md

@@ -4,7 +4,7 @@ title: "Legacy React APIs"
 
 <Intro>
 
-These APIs are exported from the `react` package, but they are not recommended for use in the newly written code. See the linked individual API pages for the suggested alternatives.
+These APIs are exported from the `react` package, but they are not recommended for use in newly written code. See the linked individual API pages for the suggested alternatives.
 
 </Intro>
 
@@ -31,4 +31,4 @@ These APIs will be removed in a future major version of React.
 
 </Deprecated>
 
-* [`createFactory`](/reference/react/createFactory) lets you create a function that produces React elements of a certain type.
+* [`createFactory`](/reference/react/createFactory) lets you create a function that produces React elements of a certain type.

beta/src/content/learn/removing-effect-dependencies.md

@@ -1337,7 +1337,7 @@ function MyApp() {
 }
 ```
 
-As a result of this change, even if `MyApp` needs to re-render, the components calling `useContext(AuthProvider)` won't need to re-render unless `currentUser` has changed. Read more about [`useMemo`](/reference/react/useMemo#skipping-re-rendering-of-components) and [`useCallback`.](/reference/react/useCallback#skipping-re-rendering-of-components)
+As a result of this change, even if `MyApp` needs to re-render, the components calling `useContext(AuthContext)` won't need to re-render unless `currentUser` has changed. Read more about [`useMemo`](/reference/react/useMemo#skipping-re-rendering-of-components) and [`useCallback`.](/reference/react/useCallback#skipping-re-rendering-of-components)
 
 ---
 

beta/src/content/learn/tutorial-tic-tac-toe.md

@@ -1130,7 +1130,7 @@ If you have an existing codebase, you might have some Effects that suppress the
 useEffect(() => {
   // ...
   // 🔴 Avoid suppressing the linter like this:
-  // eslint-ignore-next-line react-hooks/exhaustive-dependencies
+  // eslint-ignore-next-line react-hooks/exhaustive-deps
 }, []);
 ```
 

beta/src/content/reference/react-dom/flushSync.md

@@ -65,7 +65,7 @@ function Tooltip() {
 
 * Effects **only run on the client.** They don't run during server rendering.
 
-* The code inside `useLayoutEffect` and all state updates scheduled from it **block the browser from repainting the screen.** When used excessively, this can make your app very slow. When possible, prefer [`useEffect`.](/reference/reac/useEffect)
+* The code inside `useLayoutEffect` and all state updates scheduled from it **block the browser from repainting the screen.** When used excessively, this can make your app very slow. When possible, prefer [`useEffect`.](/reference/react/useEffect)
 
 ---
 

beta/src/content/reference/react-dom/server/renderToReadableStream.md

@@ -84,7 +84,7 @@ React will set the next state to the result of calling the `reducer` function yo
 
 * If the new value you provide is identical to the current `state`, as determined by an [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison, React will **skip re-rendering the component and its children.** This is an optimization. React may still need to call your component before ignoring the result, but it shouldn't affect your code.
 
-* React [batches state updates.](/learn/queueing-a-series-of-state-updates) It updates the screen **after all the event handlers have run** and have called their `set` functions. This prevents multiple re-renders during a single event. In the rare case that you need to force React to update the screen earlier, for example to access the DOM, you can use [`flushSync`.](/reference/react-dom/flushsync)
+* React [batches state updates.](/learn/queueing-a-series-of-state-updates) It updates the screen **after all the event handlers have run** and have called their `set` functions. This prevents multiple re-renders during a single event. In the rare case that you need to force React to update the screen earlier, for example to access the DOM, you can use [`flushSync`.](/reference/react-dom/flushSync)
 
 ---
 

beta/src/content/reference/react/forwardRef.md

@@ -12,20 +12,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences {#upcoming-conferences}
 
-### React Global Online Summit 22.2 by Geekle {#react-global-v2-2022}
-November 8 - 9, 2022 - Online Summit
-
-[Website](https://events.geekle.us/react3/) - [LinkedIn](https://www.linkedin.com/posts/geekle-us_event-react-reactjs-activity-6964904611207864320-gpDx?utm_source=share&utm_medium=member_desktop)
-
-### Remix Conf Europe 2022 {#remixconfeu-2022}
-November 18, 2022, 7am PST / 10am EST / 4pm CET - remote event
-
-[Website](https://remixconf.eu/) - [Twitter](https://twitter.com/remixconfeu)
-
-### React Day Berlin 2022 {#react-day-berlin-2022}
-December 2, 2022. In-person in Berlin, Germany + remote (hybrid event)
-
-[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://www.youtube.com/c/ReactConferences)
 
 ### RemixConf 2023 {#remixconf-2023}
 May, 2023. Salt Lake City, UT
@@ -47,6 +33,11 @@ June 2 & 6, 2023. In-person in Amsterdam, Netherlands + remote first interactivi
 
 [Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)
 
+### React Norway 2023 {#react-norway-2023}
+June 16th, 2023. Larvik, Norway
+
+[Website](https://reactnorway.com/) - [Twitter](https://twitter.com/ReactNorway/) - [Facebook](https://www.facebook.com/reactdaynorway/)
+
 ### ReactNext 2023 {#reactnext}
 June 27th, 2023. Tel Aviv, Israel
 
@@ -64,6 +55,21 @@ Oct 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote da
 
 ## Past Conferences {#past-conferences}
 
+### React Day Berlin 2022 {#react-day-berlin-2022}
+December 2, 2022. In-person in Berlin, Germany + remote (hybrid event)
+
+[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://www.youtube.com/c/ReactConferences)
+
+### Remix Conf Europe 2022 {#remixconfeu-2022}
+November 18, 2022, 7am PST / 10am EST / 4pm CET - remote event
+
+[Website](https://remixconf.eu/) - [Twitter](https://twitter.com/remixconfeu)
+
+### React Global Online Summit 22.2 by Geekle {#react-global-v2-2022}
+November 8 - 9, 2022 - Online Summit
+
+[Website](https://events.geekle.us/react3/) - [LinkedIn](https://www.linkedin.com/posts/geekle-us_event-react-reactjs-activity-6964904611207864320-gpDx?utm_source=share&utm_medium=member_desktop)
+
 ### React Advanced 2022 {#react-advanced-2022}
 October 21 & 25, 2022. In-person in London, UK + remote (hybrid event)
 

beta/src/content/reference/react/isValidElement.md

@@ -2,7 +2,7 @@
 id: hello-world
 title: Hello World
 permalink: docs/hello-world.html
-prev: cdn-links.html
+prev: release-channels.html
 next: introducing-jsx.html
 ---
 

beta/src/content/reference/react/legacy.md

@@ -14,7 +14,7 @@ const EnhancedComponent = higherOrderComponent(WrappedComponent);
 
 コンポーネントが props を UI に変換するのに対して、高階コンポーネントはコンポーネントを別のコンポーネントに変換します。
 
-HOC は Redux における [`connect`](https://github.com/reactjs/react-redux/blob/master/docs/api/connect.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) や Relay における [`createFragmentContainer`](https://relay.dev/docs/v10.1.3/fragment-container/#createfragmentcontainer) のように、サードパーティ製の React ライブラリでは一般的なものです。
+HOC は Redux における [`connect`](https://react-redux.js.org/api/connect) や Relay における [`createFragmentContainer`](https://relay.dev/docs/v10.1.3/fragment-container/#createfragmentcontainer) のように、サードパーティ製の React ライブラリでは一般的なものです。
 
 このドキュメントでは、なぜ高階コンポーネントが便利で、自身でどのように記述するのかを説明します。
 

beta/src/content/reference/react/useContext.md

@@ -89,7 +89,7 @@ Issue を解決することにした場合、誰かがすでに修正に取り
 3. バグを修正したり、テストが必要なコードを追加した場合は、テストを追加します。
 4. テストスイートが通ることを確認してください (`yarn test`)。ヒント： `yarn test --watch TestName` コマンドは開発時に役立ちます。
 5. 本番環境でテストするために `yarn test --prod` コマンドを実行します。
-6. デバッガが必要な場合は `yarn debug-test --watch TestName` を実行し `chrome://inspect` を開き "Inspect" を押してください。
+6. デバッガが必要な場合は `yarn test --debug --watch TestName` を実行し `chrome://inspect` を開き "Inspect" を押してください。
 7. [prettier](https://github.com/prettier/prettier) でコードをフォーマットします (`yarn prettier`)。
 8. リントを行います (`yarn lint`)。ヒント： `yarn linc` は変更されたファイルのみに適用できます。
 9. [Flow](https://flowtype.org/) による型チェックを行います (`yarn flow`)。