From 2217f4549d8eec897b0d8a35c02a4481cdb8622a Mon Sep 17 00:00:00 2001
From: Aurora Scharff <66901228+aurorascharff@users.noreply.github.com>
Date: Tue, 2 Sep 2025 21:53:23 +0200
Subject: [PATCH] Update "Deep Dive" in reusing-logic-with-custom-hooks.md with
 link and example of the use API (#7767)

* Update "Deep Dive" in reusing-logic-with-custom-hooks.md with link to and example of the use API

* Remove mention of Server Components when explaining the use API

* Update src/content/learn/reusing-logic-with-custom-hooks.md

Co-authored-by: Ricky <rickhanlonii@gmail.com>

* fix: Correct which lines are highlighted in code example

---------

Co-authored-by: Ricky <rickhanlonii@gmail.com>
---
 .../learn/reusing-logic-with-custom-hooks.md  | 21 ++++++++++++++++++-
 1 file changed, 20 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 b6562e2df..de68dd190 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 read in render by passing a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) to `use`:
+
+```js {1,4,11}
+import { use, Suspense } from "react";
+
+function Message({ messagePromise }) {
+  const messageContent = use(messagePromise);
+  return <p>Here is the message: {messageContent}</p>;
+}
+
+export function MessageContainer({ messagePromise }) {
+  return (
+    <Suspense fallback={<p>⌛Downloading message...</p>}>
+      <Message messagePromise={messagePromise} />
+    </Suspense>
+  );
+}
+```
+
 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}`));