From a3e9466dfeea700696211533a3570bc48d7bc3d3 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Wed, 30 Apr 2025 10:18:55 -0400
Subject: [PATCH 1/2] fix action pattern in useTransition / useOptimistic
 (#7796)

* fix action pattern in useOptimistic

* update useTransition too
---
 src/content/reference/react/useOptimistic.md | 14 +++---
 src/content/reference/react/useTransition.md | 49 +++++++++++++-------
 2 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/src/content/reference/react/useOptimistic.md b/src/content/reference/react/useOptimistic.md
index 54c3dbcd06..b69a532f05 100644
--- a/src/content/reference/react/useOptimistic.md
+++ b/src/content/reference/react/useOptimistic.md
@@ -74,7 +74,9 @@ function Thread({ messages, sendMessageAction }) {
   function formAction(formData) {
     addOptimisticMessage(formData.get("message"));
     formRef.current.reset();
-    sendMessageAction(formData);
+    startTransition(async () => {
+      await sendMessageAction(formData);
+    });
   }
   const [optimisticMessages, addOptimisticMessage] = useOptimistic(
     messages,
@@ -108,12 +110,10 @@ export default function App() {
   const [messages, setMessages] = useState([
     { text: "Hello there!", sending: false, key: 1 }
   ]);
-  function sendMessageAction(formData) {
-    startTransition(async () => {
-      const sentMessage = await deliverMessage(formData.get("message"));
-      startTransition(() => {
-        setMessages((messages) => [{ text: sentMessage }, ...messages]);
-      })
+  async function sendMessageAction(formData) {
+    const sentMessage = await deliverMessage(formData.get("message"));
+    startTransition(() => {
+      setMessages((messages) => [{ text: sentMessage }, ...messages]);
     })
   }
   return <Thread messages={messages} sendMessageAction={sendMessageAction} />;
diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index 6b7c511e7c..e891466b21 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -77,8 +77,8 @@ function SubmitButton({ submitAction }) {
     <button
       disabled={isPending}
       onClick={() => {
-        startTransition(() => {
-          submitAction();
+        startTransition(async () => {
+          await submitAction();
         });
       }}
     >
@@ -227,9 +227,9 @@ import { startTransition } from "react";
 
 export default function Item({action}) {
   function handleChange(event) {
-    // To expose an action prop, call the callback in startTransition.
+    // To expose an action prop, await the callback in startTransition.
     startTransition(async () => {
-      action(event.target.value);
+      await action(event.target.value);
     })
   }
   return (
@@ -585,10 +585,9 @@ This solution makes the app feel slow, because the user must wait each time they
 
 You can expose an `action` prop from a component to allow a parent to call an Action.
 
-
 For example, this `TabButton` component wraps its `onClick` logic in an `action` prop:
 
-```js {8-10}
+```js {8-12}
 export default function TabButton({ action, children, isActive }) {
   const [isPending, startTransition] = useTransition();
   if (isActive) {
@@ -596,8 +595,10 @@ export default function TabButton({ action, children, isActive }) {
   }
   return (
     <button onClick={() => {
-      startTransition(() => {
-        action();
+      startTransition(async () => {
+        // await the action that's passed in.
+        // This allows it to be either sync or async. 
+        await action();
       });
     }}>
       {children}
@@ -656,10 +657,15 @@ export default function TabButton({ action, children, isActive }) {
   if (isActive) {
     return <b>{children}</b>
   }
+  if (isPending) {
+    return <b className="pending">{children}</b>;
+  }
   return (
-    <button onClick={() => {
-      startTransition(() => {
-        action();
+    <button onClick={async () => {
+      startTransition(async () => {
+        // await the action that's passed in.
+        // This allows it to be either sync or async. 
+        await action();
       });
     }}>
       {children}
@@ -729,10 +735,19 @@ export default function ContactTab() {
 ```css
 button { margin-right: 10px }
 b { display: inline-block; margin-right: 10px; }
+.pending { color: #777; }
 ```
 
 </Sandpack>
 
+<Note>
+
+When exposing an `action` prop from a component, you should `await` it inside the transition. 
+
+This allows the `action` callback to be either synchronous or asynchronous without requiring an additional `startTransition` to wrap the `await` in the action.
+
+</Note>
+
 ---
 
 ### Displaying a pending visual state {/*displaying-a-pending-visual-state*/}
@@ -804,8 +819,8 @@ export default function TabButton({ action, children, isActive }) {
   }
   return (
     <button onClick={() => {
-      startTransition(() => {
-        action();
+      startTransition(async () => {
+        await action();
       });
     }}>
       {children}
@@ -1095,8 +1110,8 @@ export default function TabButton({ action, children, isActive }) {
   }
   return (
     <button onClick={() => {
-      startTransition(() => {
-        action();
+      startTransition(async () => {
+        await action();
       });
     }}>
       {children}
@@ -1822,8 +1837,8 @@ import {startTransition} from 'react';
 export default function Item({action}) {
   function handleChange(e) {
     // Update the quantity in an Action.
-    startTransition(() => {
-      action(e.target.value);
+    startTransition(async () => {
+      await action(e.target.value);
     });
   }  
   return (

From 243c6a6286593a4f719a3397d14fe324e6693a36 Mon Sep 17 00:00:00 2001
From: Xleine <xleine@qq.com>
Date: Thu, 8 May 2025 10:11:53 +0800
Subject: [PATCH 2/2] fix conflict

---
 src/content/reference/react/useTransition.md | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index 8a7f5388af..65156c6a03 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -585,11 +585,7 @@ export async function updateQuantity(newQuantity) {
 
 你可以通过组件暴露一个 `action` 属性，允许父组件调用一个 Action。
 
-<<<<<<< HEAD
-例如，这个 `TabButton` 组件将其点击事件逻辑封装到 `action` 属性中：
-=======
-For example, this `TabButton` component wraps its `onClick` logic in an `action` prop:
->>>>>>> a3e9466dfeea700696211533a3570bc48d7bc3d3
+例如，这个 `TabButton` 组件将 `onClick` 事件逻辑封装到 `action` 属性中：
 
 ```js {8-12}
 export default function TabButton({ action, children, isActive }) {