docs(en): merge reactjs.org/main into zh-hans.reactjs.org/main @ d6c4c0fe

src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md

@@ -51,9 +51,9 @@ You can try them by upgrading React packages to the most recent experimental ver
 
 Read on to learn how to use these features in your app, or check out the newly published docs:
 
-- [`<ViewTransition>`](/reference/react/ViewTransition): A component lets you activate an animation for a Transition.
+- [`<ViewTransition>`](/reference/react/ViewTransition): A component that lets you activate an animation for a Transition.
 - [`addTransitionType`](/reference/react/addTransitionType): A function that allows you to specify the cause of a Transition.
-- [`<Activity>`](/reference/react/Activity): A component that lets you hide and show part of the UI.
+- [`<Activity>`](/reference/react/Activity): A component that lets you hide and show parts of the UI.
 
 ## View Transitions {/*view-transitions*/}
 
@@ -14355,4 +14355,4 @@ This research is still early. We'll share more, and what the new APIs will look
 
 ---
 
-_Thanks to [Aurora Scharff](https://bsky.app/profile/aurorascharff.no), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Eli White](https://twitter.com/Eli_White), [Lauren Tan](https://bsky.app/profile/no.lol), [Luna Wei](https://github.com/lunaleaps), [Matt Carroll](https://twitter.com/mattcarrollcode), [Jack Pope](https://jackpope.me), [Jason Bonta](https://threads.net/someextent), [Jordan Brown](https://github.com/jbrown215), [Jordan Eldredge](https://bsky.app/profile/capt.dev), [Mofei Zhang](https://threads.net/z_mofei), [Sebastien Lorber](https://bsky.app/profile/sebastienlorber.com), [Sebastian Markbåge](https://bsky.app/profile/sebmarkbage.calyptus.eu), and [Tim Yung](https://github.com/yungsters) for reviewing this post._
+_Thanks to [Aurora Scharff](https://bsky.app/profile/aurorascharff.no), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Eli White](https://twitter.com/Eli_White), [Lauren Tan](https://bsky.app/profile/no.lol), [Luna Wei](https://github.com/lunaleaps), [Matt Carroll](https://twitter.com/mattcarrollcode), [Jack Pope](https://jackpope.me), [Jason Bonta](https://threads.net/someextent), [Jordan Brown](https://github.com/jbrown215), [Jordan Eldredge](https://bsky.app/profile/capt.dev), [Mofei Zhang](https://threads.net/z_mofei), [Sebastien Lorber](https://bsky.app/profile/sebastienlorber.com), [Sebastian Markbåge](https://bsky.app/profile/sebmarkbage.calyptus.eu), and [Tim Yung](https://github.com/yungsters) for reviewing this post._

src/content/reference/react/useOptimistic.md

@@ -66,39 +66,40 @@ function AppContainer() {
 
 
 ```js src/App.js
-import { useOptimistic, useState, useRef } from "react";
+import { useOptimistic, useState, useRef, startTransition } from "react";
 import { deliverMessage } from "./actions.js";
 
-function Thread({ messages, sendMessage }) {
+function Thread({ messages, sendMessageAction }) {
   const formRef = useRef();
-  async function formAction(formData) {
+  function formAction(formData) {
     addOptimisticMessage(formData.get("message"));
     formRef.current.reset();
-    await sendMessage(formData);
+    sendMessageAction(formData);
   }
   const [optimisticMessages, addOptimisticMessage] = useOptimistic(
     messages,
     (state, newMessage) => [
-      ...state,
       {
         text: newMessage,
         sending: true
-      }
+      },
+      ...state,
     ]
   );
 
   return (
     <>
+      <form action={formAction} ref={formRef}>
+        <input type="text" name="message" placeholder="你好！" />
+        <button type="submit">发送</button>
+      </form>
       {optimisticMessages.map((message, index) => (
         <div key={index}>
           {message.text}
           {!!message.sending && <small>（发送中……）</small>}
         </div>
       ))}
-      <form action={formAction} ref={formRef}>
-        <input type="text" name="message" placeholder="你好！" />
-        <button type="submit">发送</button>
-      </form>
+
     </>
   );
 }
@@ -107,11 +108,15 @@ export default function App() {
   const [messages, setMessages] = useState([
     { text: "你好，在这儿！", sending: false, key: 1 }
   ]);
-  async function sendMessage(formData) {
-    const sentMessage = await deliverMessage(formData.get("message"));
-    setMessages((messages) => [...messages, { text: sentMessage }]);
+  function sendMessageAction(formData) {
+    startTransition(async () => {
+      const sentMessage = await deliverMessage(formData.get("message"));
+      startTransition(() => {
+        setMessages((messages) => [{ text: sentMessage }, ...messages]);
+      })
+    })
   }
-  return <Thread messages={messages} sendMessage={sendMessage} />;
+  return <Thread messages={messages} sendMessageAction={sendMessageAction} />;
 }
 ```