From cfce15f29b6772599dcdd0e47359551c7798c2a1 Mon Sep 17 00:00:00 2001
From: Rick Hanlon <rickhanlonii@fb.com>
Date: Tue, 29 Apr 2025 17:59:34 -0400
Subject: [PATCH 1/2] fix useOptimistic example

---
 src/content/reference/react/useOptimistic.md | 29 ++++++++++++--------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/content/reference/react/useOptimistic.md b/src/content/reference/react/useOptimistic.md
index d191bbb551c..a831011e21c 100644
--- a/src/content/reference/react/useOptimistic.md
+++ b/src/content/reference/react/useOptimistic.md
@@ -66,15 +66,15 @@ For example, when a user types a message into the form and hits the "Send" butto
 
 
 ```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,
@@ -89,16 +89,17 @@ function Thread({ messages, sendMessage }) {
 
   return (
     <>
+      <form action={formAction} ref={formRef}>
+        <input type="text" name="message" placeholder="Hello!" />
+        <button type="submit">Send</button>
+      </form>
       {optimisticMessages.map((message, index) => (
         <div key={index}>
           {message.text}
           {!!message.sending && <small> (Sending...)</small>}
         </div>
       ))}
-      <form action={formAction} ref={formRef}>
-        <input type="text" name="message" placeholder="Hello!" />
-        <button type="submit">Send</button>
-      </form>
+      
     </>
   );
 }
@@ -107,11 +108,15 @@ export default function App() {
   const [messages, setMessages] = useState([
     { text: "Hello there!", 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) => [...messages, { text: sentMessage }]);
+      })
+    })
   }
-  return <Thread messages={messages} sendMessage={sendMessage} />;
+  return <Thread messages={messages} sendMessageAction={sendMessageAction} />;
 }
 ```
 

From 15c80cbd3ca1f70d3bab0cfafe8c441700e18acd Mon Sep 17 00:00:00 2001
From: Rick Hanlon <rickhanlonii@fb.com>
Date: Tue, 29 Apr 2025 18:04:09 -0400
Subject: [PATCH 2/2] prepend messages

---
 src/content/reference/react/useOptimistic.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/content/reference/react/useOptimistic.md b/src/content/reference/react/useOptimistic.md
index a831011e21c..54c3dbcd06b 100644
--- a/src/content/reference/react/useOptimistic.md
+++ b/src/content/reference/react/useOptimistic.md
@@ -79,11 +79,11 @@ function Thread({ messages, sendMessageAction }) {
   const [optimisticMessages, addOptimisticMessage] = useOptimistic(
     messages,
     (state, newMessage) => [
-      ...state,
       {
         text: newMessage,
         sending: true
-      }
+      },
+      ...state,
     ]
   );
 
@@ -112,7 +112,7 @@ export default function App() {
     startTransition(async () => {
       const sentMessage = await deliverMessage(formData.get("message"));
       startTransition(() => {
-        setMessages((messages) => [...messages, { text: sentMessage }]);
+        setMessages((messages) => [{ text: sentMessage }, ...messages]);
       })
     })
   }