diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md index 7c3ffd7a28..e4bb25a4aa 100644 --- a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md +++ b/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: -- [``](/reference/react/ViewTransition): A component lets you activate an animation for a Transition. +- [``](/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. -- [``](/reference/react/Activity): A component that lets you hide and show part of the UI. +- [``](/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._ \ No newline at end of file +_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._ diff --git a/src/content/reference/react/useOptimistic.md b/src/content/reference/react/useOptimistic.md index f9ba3849bc..ca695eff90 100644 --- a/src/content/reference/react/useOptimistic.md +++ b/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 ( <> +
+ + +
{optimisticMessages.map((message, index) => (
{message.text} {!!message.sending && (发送中……)}
))} -
- - -
+ ); } @@ -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 ; + return ; } ```