diff --git a/src/content/blog/2024/04/01/react-19.md b/src/content/blog/2024/04/01/react-19.md index 9d6d1bc1e..e9b9bc82d 100644 --- a/src/content/blog/2024/04/01/react-19.md +++ b/src/content/blog/2024/04/01/react-19.md @@ -74,6 +74,10 @@ const submitAction = async () => { By convention, functions that use async transitions are called "Actions". Actions will immediately set the `isPending` state to true, make the async request(s), and render any state updates as transitions. This allows you to keep the current UI responsive and interactive while the data is changing. +For more information, see the docs for [`useTransition`](/reference/react/useTransition). + +### New Hook: `useActionState` {/*new-hook-useactionstate*/} + You can always create an Action by dropping down to `useTransition`, but to make the common cases easier we've added a new hook called `useActionState`: ```js {2,6} @@ -85,32 +89,13 @@ const [submitAction, data, isPending] = useActionState(async () => { }); ``` -Actions are enabled by default with the new `
-) -``` - -Actions compose, so to access the pending state of ` +); +``` +The `useOptimisitc` hook will immediately render the `optimisticName` while the `updateName` request is in progress. When the update finishes, React will automatically switch back to the original `name` value. + +For more information, see the docs for [`useOptimistic`](/reference/react/useOptimistic). + +### New Feature: Server Actions {/*new-feature-server-actions*/} + +TODO + +