Sync with react.dev @ 265fa26e

package.json

@@ -24,7 +24,7 @@
     "textlint-staged": "cd textlint && yarn --frozen-lockfile && yarn textlint-staged --"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "2.6.0",
+    "@codesandbox/sandpack-react": "2.13.4",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.7.0",

src/components/MDX/Sandpack/SandpackRoot.tsx

@@ -88,7 +88,7 @@ function SandpackRoot(props: SandpackProps) {
           autorun,
           initMode: 'user-visible',
           initModeObserverOptions: {rootMargin: '1400px 0px'},
-          bundlerURL: 'https://1e4ad8f7.sandpack-bundler-4bw.pages.dev',
+          bundlerURL: 'https://786946de.sandpack-bundler-4bw.pages.dev',
           logLevel: SandpackLogLevel.None,
         }}>
         <CustomPreset providedFiles={Object.keys(files)} />

src/content/community/conferences.md

@@ -70,6 +70,22 @@ July 17-19, 2024. In-person in Portland, OR, USA
 
 [Website](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf)
 
+### The Geek Conf 2024 {/*the-geek-conf-2024*/}
+July 25, 2024. In-person in Berlin, Germany + remote (hybrid event)
+
+[Website](https://thegeekconf.com) - [Twitter](https://twitter.com/thegeekconf)
+
+### React Universe Conf 2024 {/*react-universe-conf-2024*/}
+September 5-6, 2024. Wrocław, Poland.
+
+[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/)
+
+### React Alicante 2024 {/*react-alicante-2024*/}
+September 19-21, 2024. Alicante, Spain.
+
+[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w)
+
+
 ### React India 2024 {/*react-india-2024*/}
 October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day
 

src/content/community/team.md

@@ -22,7 +22,7 @@ React コアチームのメンバーは、コアコンポーネントの API、R
     Andrey はデザイナとしてキャリアをスタートした後、徐々にウェブ開発へと移行しました。Meta の React Data チームに参加した後は、Relay にインクリメンタル JavaScript コンパイラを追加する作業に取り組み、のちにそのコンパイラを Relay から削除する作業に取り組みました。仕事以外の時間では音楽を演奏したり、さまざまなスポーツをしたりしています。
 </TeamMember>
 
-<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" twitter="dan_abramov" title="Engineer at Meta">
+<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" twitter="dan_abramov2" title="Independent Engineer">
     Dan は Microsoft PowerPoint の中に偶然 Visual Basic を発見したことからプログラミングを始めました。[Sebastian](#sebastian-markbåge) のツイートを長文のブログ投稿に翻訳することが真の使命であると感じています。Fortnite では、ゲームが終わるまで茂みの中に隠れて勝利することがあります。
 </TeamMember>
 

src/content/learn/choosing-the-state-structure.md

@@ -554,8 +554,6 @@ button { margin-top: 10px; }
 
 </Sandpack>
 
-（または、選択されたインデックスを state に保持することもできます。）
-
 以前は state がこのように重複していました。
 
 * `items = [{ id: 0, title: 'pretzels'}, ...]`

src/content/learn/typescript.md

@@ -22,7 +22,7 @@ TypeScript は JavaScript コードベースに型定義を追加するための
 
 すべての[本番環境向け React フレームワーク](/learn/start-a-new-react-project#production-grade-react-frameworks)は TypeScript の使用をサポートしています。フレームワーク個別のガイドに従ってインストールを行ってください。
 
-- [Next.js](https://nextjs.org/docs/pages/building-your-application/configuring/typescript)
+- [Next.js](https://nextjs.org/docs/app/building-your-application/configuring/typescript)
 - [Remix](https://remix.run/docs/en/1.19.2/guides/typescript)
 - [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/)
 - [Expo](https://docs.expo.dev/guides/typescript/)

src/content/reference/react-dom/hooks/useFormStatus.md

@@ -182,47 +182,32 @@ import {useFormStatus} from 'react-dom';
 export default function UsernameForm() {
   const {pending, data} = useFormStatus();
 
-  const [showSubmitted, setShowSubmitted] = useState(false);
-  const submittedUsername = useRef(null);
-  const timeoutId = useRef(null);
-
-  useMemo(() => {
-    if (pending) {
-      submittedUsername.current = data?.get('username');
-      if (timeoutId.current != null) {
-        clearTimeout(timeoutId.current);
-      }
-
-      timeoutId.current = setTimeout(() => {
-        timeoutId.current = null;
-        setShowSubmitted(false);
-      }, 2000);
-      setShowSubmitted(true);
-    }
-  }, [pending, data]);
-
   return (
-    <>
-      <label>Request a Username: </label><br />
-      <input type="text" name="username" />
+    <div>
+      <h3>Request a Username: </h3>
+      <input type="text" name="username" disabled={pending}/>
       <button type="submit" disabled={pending}>
-        {pending ? 'Submitting...' : 'Submit'}
+        Submit
       </button>
-      {showSubmitted ? (
-        <p>Submitted request for username: {submittedUsername.current}</p>
-      ) : null}
-    </>
+      <br />
+      <p>{data ? `Requesting ${data?.get("username")}...`: ''}</p>
+    </div>
   );
 }
 ```
 
 ```js src/App.js
 import UsernameForm from './UsernameForm';
 import { submitForm } from "./actions.js";
+import {useRef} from 'react';
 
 export default function App() {
+  const ref = useRef(null);
   return (
-    <form action={submitForm}>
+    <form ref={ref} action={async (formData) => {
+      await submitForm(formData);
+      ref.current.reset();
+    }}>
       <UsernameForm />
     </form>
   );
@@ -231,8 +216,22 @@ export default function App() {
 
 ```js src/actions.js hidden
 export async function submitForm(query) {
-    await new Promise((res) => setTimeout(res, 1000));
+    await new Promise((res) => setTimeout(res, 2000));
+}
+```
+
+```css
+p {
+    height: 14px;
+    padding: 0;
+    margin: 2px 0 0 0 ;
+    font-size: 14px
+}
+
+button {
+    margin-left: 2px;
 }
+
 ```
 
 ```json package.json hidden

src/content/reference/react-dom/server/renderToNodeStream.md

@@ -13,7 +13,7 @@ title: renderToNodeStream
 `renderToNodeStream` は、React のツリーを [Node.js の Readable ストリーム](https://nodejs.org/api/stream.html#readable-streams)にレンダーします。
 
 ```js
-const stream = renderToNodeStream(reactNode)
+const stream = renderToNodeStream(reactNode, options?)
 ```
 
 </Intro>
@@ -24,7 +24,7 @@ const stream = renderToNodeStream(reactNode)
 
 ## リファレンス {/*reference*/}
 
-### `renderToNodeStream(reactNode)` {/*rendertonodestream*/}
+### `renderToNodeStream(reactNode, options?)` {/*rendertonodestream*/}
 
 サーバ上において、`renderToNodeStream` を呼び出して、レスポンスにパイプすることができる [Node.js の Readable ストリーム](https://nodejs.org/api/stream.html#readable-streams)を取得します。
 

src/content/reference/react-dom/server/renderToStaticMarkup.md

@@ -7,7 +7,7 @@ title: renderToStaticMarkup
 `renderToStaticMarkup` は、非インタラクティブな React ツリーを HTML 文字列にレンダーします。
 
 ```js
-const html = renderToStaticMarkup(reactNode)
+const html = renderToStaticMarkup(reactNode, options?)
 ```
 
 </Intro>
@@ -18,7 +18,7 @@ const html = renderToStaticMarkup(reactNode)
 
 ## リファレンス {/*reference*/}
 
-### `renderToStaticMarkup(reactNode)` {/*rendertostaticmarkup*/}
+### `renderToStaticMarkup(reactNode, options?)` {/*rendertostaticmarkup*/}
 
 サーバ上において、`renderToStaticMarkup` を呼び出してアプリを HTML にレンダーします。
 

src/content/reference/react-dom/server/renderToStaticNodeStream.md

@@ -7,7 +7,7 @@ title: renderToStaticNodeStream
 `renderToStaticNodeStream` は、非インタラクティブな React ツリーを [Node.js の Readable ストリーム](https://nodejs.org/api/stream.html#readable-streams) にレンダーします。
 
 ```js
-const stream = renderToStaticNodeStream(reactNode)
+const stream = renderToStaticNodeStream(reactNode, options?)
 ```
 
 </Intro>
@@ -18,7 +18,7 @@ const stream = renderToStaticNodeStream(reactNode)
 
 ## リファレンス {/*reference*/}
 
-### `renderToStaticNodeStream(reactNode)` {/*rendertostaticnodestream*/}
+### `renderToStaticNodeStream(reactNode, options?)` {/*rendertostaticnodestream*/}
 
 サーバ上において、`renderToStaticNodeStream` を呼び出して [Node.js の Readable ストリーム](https://nodejs.org/api/stream.html#readable-streams)を取得します。
 

src/content/reference/react-dom/server/renderToString.md

@@ -13,7 +13,7 @@ title: renderToString
 `renderToString` は React ツリーを HTML 文字列にレンダーします。
 
 ```js
-const html = renderToString(reactNode)
+const html = renderToString(reactNode, options?)
 ```
 
 </Intro>
@@ -24,7 +24,7 @@ const html = renderToString(reactNode)
 
 ## リファレンス {/*reference*/}
 
-### `renderToString(reactNode)` {/*rendertostring*/}
+### `renderToString(reactNode, options?)` {/*rendertostring*/}
 
 サーバ上において、`renderToString` を呼び出してあなたのアプリを HTML にレンダーします。
 

src/styles/sandpack.css

@@ -608,3 +608,7 @@ html.dark .sp-devtools > div {
     }
   }
 }
+
+.sp-loading .sp-icon-standalone span {
+  display: none;
+}

vercel.json

@@ -13,6 +13,137 @@
       "source": "/learn/meet-the-team",
       "destination": "/community/team",
       "permanent": true
+    },
+    {
+      "source": "/link/warning-keys",
+      "destination": "/learn/rendering-lists#keeping-list-items-in-order-with-key",
+      "permanent": false
+    },
+
+    {
+      "source": "/link/invalid-hook-call",
+      "destination": "/warnings/invalid-hook-call-warning",
+      "permanent": false
+    },
+    {
+      "source": "/link/hooks-data-fetching",
+      "destination": "/reference/react/useEffect#fetching-data-with-effects",
+      "permanent": false
+    },
+    {
+      "source": "/link/special-props",
+      "destination": "/warnings/special-props",
+      "permanent": false
+    },
+    {
+      "source": "/link/dangerously-set-inner-html",
+      "destination": "/reference/react-dom/components/common#dangerously-setting-the-inner-html",
+      "permanent": false
+    },
+    {
+      "source": "/link/controlled-components",
+      "destination": "/reference/react-dom/components/input#controlling-an-input-with-a-state-variable",
+      "permanent": false
+    },
+    {
+      "source": "/link/react-devtools",
+      "destination": "/learn/react-developer-tools",
+      "permanent": false
+    },
+    {
+      "source": "/link/invalid-aria-props",
+      "destination": "/warnings/invalid-aria-prop",
+      "permanent": false
+    },
+    {
+      "source": "/link/switch-to-createroot",
+      "destination": "/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis",
+      "permanent": false
+    },
+    {
+      "source": "/link/error-boundaries",
+      "destination": "/reference/react/Component#catching-rendering-errors-with-an-error-boundary",
+      "permanent": false
+    },
+    {
+      "source": "/link/strict-mode-find-node",
+      "destination": "/reference/react-dom/findDOMNode#alternatives",
+      "permanent": false
+    },
+    {
+      "source": "/link/rules-of-hooks",
+      "destination": "/warnings/invalid-hook-call-warning",
+      "permanent": false
+    },
+    {
+      "source": "/link/event-pooling",
+      "destination": "https://legacy.reactjs.org/docs/legacy-event-pooling.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/legacy-context",
+      "destination": "https://legacy.reactjs.org/docs/legacy-context.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/crossorigin-error",
+      "destination": "https://legacy.reactjs.org/docs/cross-origin-errors.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/react-polyfills",
+      "destination": "https://legacy.reactjs.org/docs/javascript-environment-requirements.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/wrap-tests-with-act",
+      "destination": "https://legacy.reactjs.org/docs/test-utils.html#act",
+      "permanent": false
+    },
+    {
+      "source": "/link/refs-must-have-owner",
+      "destination": "https://legacy.reactjs.org/warnings/refs-must-have-owner.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/derived-state",
+      "destination": "https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/strict-mode-string-ref",
+      "destination": "https://legacy.reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs",
+      "permanent": false
+    },
+    {
+      "source": "/link/perf-use-production-build",
+      "destination": "https://legacy.reactjs.org/docs/optimizing-performance.html#use-the-production-build",
+      "permanent": false
+    },
+    {
+      "source": "/link/unsafe-component-lifecycles",
+      "destination": "https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/test-utils-mock-component",
+      "destination": "https://gist.github.com/bvaughn/fbf41b3f895bf2d297935faa5525eee9",
+      "permanent": false
+    },
+    {
+      "source": "/link/attribute-behavior",
+      "destination": "https://legacy.reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html#changes-in-detail",
+      "permanent": false
+    },
+    {
+      "source": "/link/react-devtools-faq",
+      "destination": "https://github.com/facebook/react/tree/main/packages/react-devtools#faq",
+      "permanent": false
+    },
+    {
+      "source": "/link/setstate-in-render",
+      "destination": "https://github.com/facebook/react/issues/18178#issuecomment-595846312",
+      "permanent": false
     }
   ],
   "headers": [