From 4314b49a64735a0be00931e0f2f692acc47afb2f Mon Sep 17 00:00:00 2001 From: Mayada <115709272+Maddily@users.noreply.github.com> Date: Tue, 29 Apr 2025 20:58:00 +0300 Subject: [PATCH 1/3] Improve grammar in component descriptions (#7788) --- .../04/23/react-labs-view-transitions-activity-and-more.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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._ From d6c4c0fee514d06e329d08774bf2f37a7e4e594e Mon Sep 17 00:00:00 2001 From: Ricky Date: Tue, 29 Apr 2025 18:07:34 -0400 Subject: [PATCH 2/3] Fix useOptimistic example (#7792) * fix useOptimistic example * prepend messages --- src/content/reference/react/useOptimistic.md | 33 +++++++++++--------- 1 file changed, 19 insertions(+), 14 deletions(-) diff --git a/src/content/reference/react/useOptimistic.md b/src/content/reference/react/useOptimistic.md index d191bbb551..54c3dbcd06 100644 --- a/src/content/reference/react/useOptimistic.md +++ b/src/content/reference/react/useOptimistic.md @@ -66,39 +66,40 @@ 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, (state, newMessage) => [ - ...state, { text: newMessage, sending: true - } + }, + ...state, ] ); return ( <> +
+ + +
{optimisticMessages.map((message, index) => (
{message.text} {!!message.sending && (Sending...)}
))} -
- - -
+ ); } @@ -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) => [{ text: sentMessage }, ...messages]); + }) + }) } - return ; + return ; } ``` From 05a231ddcec75cae8cd05e3ec1722f2a1ceb5be6 Mon Sep 17 00:00:00 2001 From: Xleine Date: Wed, 30 Apr 2025 11:49:41 +0800 Subject: [PATCH 3/3] fix conflict --- src/content/reference/react/useOptimistic.md | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/content/reference/react/useOptimistic.md b/src/content/reference/react/useOptimistic.md index 6a71e667b0..ca695eff90 100644 --- a/src/content/reference/react/useOptimistic.md +++ b/src/content/reference/react/useOptimistic.md @@ -90,8 +90,8 @@ function Thread({ messages, sendMessageAction }) { return ( <>
- - + +
{optimisticMessages.map((message, index) => (
@@ -99,14 +99,7 @@ function Thread({ messages, sendMessageAction }) { {!!message.sending && （发送中……）}
))} -<<<<<<< HEAD -
- - -
-======= ->>>>>>> d6c4c0fee514d06e329d08774bf2f37a7e4e594e ); }