From bff3403cb68f949a56ed6269fef381b93aea7e74 Mon Sep 17 00:00:00 2001 From: Aurora Scharff Date: Tue, 22 Apr 2025 21:29:19 +0200 Subject: [PATCH 1/2] Update "Deep Dive" in reusing-logic-with-custom-hooks.md with link to and example of the use API --- .../learn/reusing-logic-with-custom-hooks.md | 23 ++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md index ea8d0a31322..141845e051c 100644 --- a/src/content/learn/reusing-logic-with-custom-hooks.md +++ b/src/content/learn/reusing-logic-with-custom-hooks.md @@ -1419,10 +1419,31 @@ Similar to a [design system,](https://uxdesign.cc/everything-you-need-to-know-ab #### Will React provide any built-in solution for data fetching? {/*will-react-provide-any-built-in-solution-for-data-fetching*/} +Today, with the [`use`](/reference/react/use#streaming-data-from-server-to-client) API, data can be streamed from the server to the client by passing a Promise as a prop from a [Server Component](/reference/rsc/server-components) and resolving it in a [Client Component](/reference/rsc/use-client): + +```js {3,6,13} +"use client"; + +import { use, Suspense } from "react"; + +function Message({ messagePromise }) { + const messageContent = use(messagePromise); + return

Here is the message: {messageContent}

; +} + +export function MessageContainer({ messagePromise }) { + return ( + ⌛Downloading message...

}> + + + ); +} +``` + We're still working out the details, but we expect that in the future, you'll write data fetching like this: ```js {1,4,6} -import { use } from 'react'; // Not available yet! +import { use } from 'react'; function ShippingForm({ country }) { const cities = use(fetch(`/api/cities?country=${country}`)); From 85c9ff36daba1d0b6989ff2b1def79fc096fe2d2 Mon Sep 17 00:00:00 2001 From: Aurora Scharff Date: Fri, 25 Apr 2025 13:33:43 +0200 Subject: [PATCH 2/2] Remove mention of Server Components when explaining the use API --- src/content/learn/reusing-logic-with-custom-hooks.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md index 141845e051c..ecf1bd846d0 100644 --- a/src/content/learn/reusing-logic-with-custom-hooks.md +++ b/src/content/learn/reusing-logic-with-custom-hooks.md @@ -1419,11 +1419,9 @@ Similar to a [design system,](https://uxdesign.cc/everything-you-need-to-know-ab #### Will React provide any built-in solution for data fetching? {/*will-react-provide-any-built-in-solution-for-data-fetching*/} -Today, with the [`use`](/reference/react/use#streaming-data-from-server-to-client) API, data can be streamed from the server to the client by passing a Promise as a prop from a [Server Component](/reference/rsc/server-components) and resolving it in a [Client Component](/reference/rsc/use-client): +Today, with the [`use`](/reference/react/use#streaming-data-from-server-to-client) API, data can be streamed from the server to the client by passing a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) as a prop: ```js {3,6,13} -"use client"; - import { use, Suspense } from "react"; function Message({ messagePromise }) {