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 <[email protected]>

* fix: Correct which lines are highlighted in code example

---------

Co-authored-by: Ricky <[email protected]>

Author: aurorascharff

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}`));