diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md index ea8d0a31322..ecf1bd846d0 100644 --- a/src/content/learn/reusing-logic-with-custom-hooks.md +++ b/src/content/learn/reusing-logic-with-custom-hooks.md @@ -1419,10 +1419,29 @@ 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) as a prop: + +```js {3,6,13} +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}`));