docs(en): merge reactjs.org/main into zh-hans.reactjs.org/main @ 7ab1969 (#1715)

Author: loveloki

public/fonts/Source-Code-Pro-Bold.woff2

@@ -1,7 +1,7 @@
 export const template = {
   '/src/index.js': {
     hidden: true,
-    code: `import React, { StrictMode } from "react";
+    code: `import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./styles.css";
 

public/fonts/Source-Code-Pro-Regular.woff2

@@ -27,7 +27,6 @@ function PageHeading({
   tags = [],
   breadcrumbs,
 }: PageHeadingProps) {
-  console.log('version', version);
   return (
     <div className="px-5 sm:px-12 pt-3.5">
       <div className="max-w-4xl ms-0 2xl:mx-auto">

public/images/blog/react-labs-april-2025/flip.gif

@@ -124,7 +124,14 @@ export const Seo = withRouter(
         )}
         <link
           rel="preload"
-          href="/fonts/Source-Code-Pro-Regular.woff2"
+          href="https://react.dev/fonts/Source-Code-Pro-Regular.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
+        <link
+          rel="preload"
+          href="https://react.dev/fonts/Source-Code-Pro-Bold.woff2"
           as="font"
           type="font/woff2"
           crossOrigin="anonymous"

src/components/MDX/Sandpack/template.ts

@@ -29,4 +29,4 @@ Stack Overflow 是非常受欢迎的论坛，在论坛中，你可以提出代
 
 ## 新闻 {/*news*/}
 
-关于 React 的最新消息，请在 Twitter 上关注 [**@reactjs**](https://twitter.com/reactjs)，同时关注本站中的 [React 的官方博客](/blog/)。
+关于 React 的最新消息，请在 Twitter 上关注 [**@reactjs**](https://twitter.com/reactjs)、 在 Bluesky 关注 [**@react.dev**](https://bsky.app/profile/react.dev) 以及关注本站的 [React 的官方博客](/blog/)。

src/components/PageHeading.tsx

@@ -38,7 +38,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 
 ## Canada {/*canada*/}
 * [Halifax, NS](https://www.meetup.com/Halifax-ReactJS-Meetup/)
-* [Montreal, QC - React Native](https://www.meetup.com/fr-FR/React-Native-MTL/)
+* [Montreal, QC](https://guild.host/react-montreal/)
 * [Vancouver, BC](https://www.meetup.com/ReactJS-Vancouver-Meetup/)
 * [Ottawa, ON](https://www.meetup.com/Ottawa-ReactJS-Meetup/)
 * [Saskatoon, SK](https://www.meetup.com/saskatoon-react-meetup/)

src/components/Seo.tsx

@@ -116,7 +116,7 @@ React 生态系统中包含许多用于解决这些问题的工具。我们列
 通过路由拆分代码，并与打包和数据获取集成，可以减少应用程序的初始加载时间以及渲染应用程序最大可见内容所需的时间 ([最大内容绘制](https://web.dev/articles/lcp))。
 
 有关代码拆分的说明，请参阅你的构建工具文档:
-- [Vite 构建优化](https://v3.vitejs.dev/guide/features.html#build-optimizations)
+- [Vite 构建优化](https://vite.dev/guide/features.html#build-optimizations)
 - [Parcel 代码拆分](https://parceljs.org/features/code-splitting/)
 - [Rsbuild 代码拆分](https://rsbuild.dev/guide/optimization/code-splitting)
 

src/content/community/index.md

@@ -2016,7 +2016,7 @@ export default function ContactList() {
       <label>
         <input
           type="checkbox"
-          value={reverse}
+          checked={reverse}
           onChange={e => {
             setReverse(e.target.checked)
           }}
@@ -2115,7 +2115,7 @@ export default function ContactList() {
       <label>
         <input
           type="checkbox"
-          value={reverse}
+          checked={reverse}
           onChange={e => {
             setReverse(e.target.checked)
           }}

src/content/community/meetups.md

@@ -2081,7 +2081,6 @@ export function useCounter(delay) {
 <Sandpack>
 
 ```js
-import { useState } from 'react';
 import { useCounter } from './useCounter.js';
 
 export default function Counter() {

src/content/learn/build-a-react-app-from-scratch.md

@@ -439,7 +439,7 @@ function ChatRoom({ roomId, theme }) {
   // ...
 ```
 
-这个方法解决了问题。注意你必须从 Effect 依赖项中 **移除** `onConnected`。**Effect Event 是非响应式的并且必须从依赖项中删除**。
+这个方法解决了问题。注意你必须从 Effect 依赖项中 **移除** `theme`，因为 Effect 中没有使用它。你也不需要 **添加** `onConnected`，因为 **Effect Event 是非响应式的并且必须从依赖项中删除**。
 
 验证新表现是否和你预期的一样：
 

src/content/learn/preserving-and-resetting-state.md

@@ -1949,3 +1949,162 @@ export async function updateQuantity(newName) {
 这是预期内的，因为在 Transition 中的 Action 不保证执行顺序。对于常见用例，React 提供了更高级的抽象，如 [`useActionState`](/reference/react/useActionState) 和 [`<form>` actions](/reference/react-dom/components/form) 来为你处理顺序问题。对于高级用例，你需要自行实现队列和中止逻辑来处理这种情况。
 
 
+Example of `useActionState` handling execution order:
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "beta",
+    "react-dom": "beta"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js src/App.js
+import { useState, useActionState } from "react";
+import { updateQuantity } from "./api";
+import Item from "./Item";
+import Total from "./Total";
+
+export default function App({}) {
+  // Store the actual quantity in separate state to show the mismatch.
+  const [clientQuantity, setClientQuantity] = useState(1);
+  const [quantity, updateQuantityAction, isPending] = useActionState(
+    async (prevState, payload) => {
+      setClientQuantity(payload);
+      const savedQuantity = await updateQuantity(payload);
+      return savedQuantity; // Return the new quantity to update the state
+    },
+    1 // Initial quantity
+  );
+
+  return (
+    <div>
+      <h1>Checkout</h1>
+      <Item action={updateQuantityAction}/>
+      <hr />
+      <Total clientQuantity={clientQuantity} savedQuantity={quantity} isPending={isPending} />
+    </div>
+  );
+}
+
+```
+
+```js src/Item.js
+import {startTransition} from 'react';
+
+export default function Item({action}) {
+  function handleChange(e) {
+    // Update the quantity in an Action.
+    startTransition(() => {
+      action(e.target.value);
+    });
+  }  
+  return (
+    <div className="item">
+      <span>Eras Tour Tickets</span>
+      <label htmlFor="name">Quantity: </label>
+      <input
+        type="number"
+        onChange={handleChange}
+        defaultValue={1}
+        min={1}
+      />
+    </div>
+  )
+}
+```
+
+```js src/Total.js
+const intl = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD"
+});
+
+export default function Total({ clientQuantity, savedQuantity, isPending }) {
+  return (
+    <div className="total">
+      <span>Total:</span>
+      <div>
+        <div>
+          {isPending
+            ? "🌀 Updating..."
+            : `${intl.format(savedQuantity * 9999)}`}
+        </div>
+        <div className="error">
+          {!isPending &&
+            clientQuantity !== savedQuantity &&
+            `Wrong total, expected: ${intl.format(clientQuantity * 9999)}`}
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+```js src/api.js
+let firstRequest = true;
+export async function updateQuantity(newName) {
+  return new Promise((resolve, reject) => {
+    if (firstRequest === true) {
+      firstRequest = false;
+      setTimeout(() => {
+        firstRequest = true;
+        resolve(newName);
+        // Simulate every other request being slower
+      }, 1000);
+    } else {
+      setTimeout(() => {
+        resolve(newName);
+      }, 50);
+    }
+  });
+}
+```
+
+```css
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+
+.item label {
+  flex: 1;
+  text-align: right;
+}
+
+.item input {
+  margin-left: 4px;
+  width: 60px;
+  padding: 4px;
+}
+
+.total {
+  height: 50px;
+  line-height: 25px;
+  display: flex;
+  align-content: center;
+  justify-content: space-between;
+}
+
+.total div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.error {
+  color: red;
+}
+```
+
+</Sandpack>

src/content/learn/reusing-logic-with-custom-hooks.md

@@ -28,7 +28,7 @@ To support Server Functions as a bundler or framework, we recommend pinning to a
 
 </Note>
 
-When a Server Functions is defined with the [`"use server"`](/reference/rsc/use-server) directive, your framework will automatically create a reference to the server function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result.
+When a Server Function is defined with the [`"use server"`](/reference/rsc/use-server) directive, your framework will automatically create a reference to the server function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result.
 
 Server Functions can be created in Server Components and passed as props to Client Components, or they can be imported and used in Client Components.
 

src/content/learn/separating-events-from-effects.md

@@ -2,8 +2,6 @@
 title: react-dom/test-utils Deprecation Warnings
 ---
 
-TODO: update for 19?
-
 ## ReactDOMTestUtils.act() warning {/*reactdomtestutilsact-warning*/}
 
 `act` from `react-dom/test-utils` has been deprecated in favor of `act` from `react`.

src/content/reference/react/useTransition.md

@@ -2,8 +2,6 @@
 title: react-test-renderer Deprecation Warnings
 ---
 
-TODO: Update this for 19?
-
 ## ReactTestRenderer.create() warning {/*reacttestrenderercreate-warning*/}
 
 react-test-renderer is deprecated. A warning will fire whenever calling ReactTestRenderer.create() or ReactShallowRender.render(). The react-test-renderer package will remain available on NPM but will not be maintained and may break with new React features or changes to React's internals.

src/content/reference/rsc/server-functions.md

@@ -12,7 +12,17 @@
     font-style: normal;
     font-weight: 400;
     font-display: swap;
-    src: url('/fonts/Source-Code-Pro-Regular.woff2') format('woff2');
+    src: url('https://react.dev/fonts/Source-Code-Pro-Regular.woff2')
+      format('woff2');
+  }
+
+  @font-face {
+    font-family: 'Source Code Pro';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://react.dev/fonts/Source-Code-Pro-Bold.woff2')
+      format('woff2');
   }
 
   /* Latin */