diff --git a/src/content/reference/rsc/server-functions.md b/src/content/reference/rsc/server-functions.md index 34ef4c00268..9e406d918fb 100644 --- a/src/content/reference/rsc/server-functions.md +++ b/src/content/reference/rsc/server-functions.md @@ -126,11 +126,13 @@ function UpdateName() { const submitAction = async () => { startTransition(async () => { const {error} = await updateName(name); - if (error) { - setError(error); - } else { - setName(''); - } + startTransition(() => { + if (error) { + setError(error); + } else { + setName(''); + } + }); }) } diff --git a/src/content/reference/rsc/use-server.md b/src/content/reference/rsc/use-server.md index 359637aa7dc..27ef9ee3cca 100644 --- a/src/content/reference/rsc/use-server.md +++ b/src/content/reference/rsc/use-server.md @@ -179,7 +179,7 @@ Server Functions are exposed server endpoints and can be called anywhere in clie When using a Server Function outside a [form](/reference/react-dom/components/form), call the Server Function in a [Transition](/reference/react/useTransition), which allows you to display a loading indicator, show [optimistic state updates](/reference/react/useOptimistic), and handle unexpected errors. Forms will automatically wrap Server Functions in transitions. -```js {9-12} +```js {9-14} import incrementLike from './actions'; import { useState, useTransition } from 'react'; @@ -190,7 +190,9 @@ function LikeButton() { const onClick = () => { startTransition(async () => { const currentCount = await incrementLike(); - setLikeCount(currentCount); + startTransition(() => { + setLikeCount(currentCount); + }); }); };