From fafcbdc740d4e30153bdaf1e93b5c07a250663a3 Mon Sep 17 00:00:00 2001 From: Rick Hanlon Date: Thu, 25 Apr 2024 21:46:17 -0400 Subject: [PATCH 1/2] Better use(Promise) example in 19 blog --- src/content/blog/2024/04/25/react-19.md | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/content/blog/2024/04/25/react-19.md b/src/content/blog/2024/04/25/react-19.md index 52a8e1ec3d1..56a907b017d 100644 --- a/src/content/blog/2024/04/25/react-19.md +++ b/src/content/blog/2024/04/25/react-19.md @@ -247,10 +247,19 @@ For example, you can read a promise with `use`, and React will Suspend until the import {use} from 'react'; function Comments({commentsPromise}) { - // NOTE: this will resume the promise from the server. - // It will suspend until the data is available. + // `use` will suspend until the promise resolves. const comments = use(commentsPromise); - return comments.map(comment =>

{comment}

); + return comments.map(comment =>

{comment}

); +} + +function Page({commentsPromise}) { + // When `use` suspends in Comments, + // this Suspense boundary will be shown. + return ( + Loading...}> + + + ) } ``` From 2a3d26275d633e3d5783fd2ee24c9b05091bee8e Mon Sep 17 00:00:00 2001 From: Rick Hanlon Date: Thu, 25 Apr 2024 21:46:17 -0400 Subject: [PATCH 2/2] Better use(Promise) example in 19 blog --- src/content/blog/2024/04/25/react-19.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/blog/2024/04/25/react-19.md b/src/content/blog/2024/04/25/react-19.md index 56a907b017d..21784ca2135 100644 --- a/src/content/blog/2024/04/25/react-19.md +++ b/src/content/blog/2024/04/25/react-19.md @@ -243,7 +243,7 @@ In React 19 we're introducing a new API to read resources in render: `use`. For example, you can read a promise with `use`, and React will Suspend until the promise resolves: -```js {1,6} +```js {1,5} import {use} from 'react'; function Comments({commentsPromise}) {