e }) {  
    
    
      const messageContent = use(messagePromise);  
    
    
      return <p>Here is the message: {messageContent}</p>;  
    
    
    }

Because  ` Message ` is wrapped in  [ ` Suspense `
](/reference/react/Suspense) , the fallback will be displayed until the
Promise is resolved. When the Promise is resolved, the value will be read by
the  ` use ` Hook and the  ` Message ` component will replace the Suspense
fallback.

message.js

message.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    "use client";
    
    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>
      );
    }
    
    

Show more

###  Note

When passing a Promise from a Server Component to a Client Component, its
resolved value must be serializable to pass between server and client. Data
types like functions aren’t serializable and cannot be the resolved value of
such a Promise.

#####  Deep Dive

####  Should I resolve a Promise in a Server or Client Component?

Show Details

A Promise can be passed from a Server Component to a Client Component and
resolved in the Client Component with the ` use ` Hook. You can also resolve
the Promise in a Server Component with ` await ` and pass the required data to
the Client Component as a prop.

    
    
    export default async function App() {  
    
    
      const messageContent = await fetchMessage();  
    
    
      return <Message messageContent={messageContent} />  
    
    
    }

But using ` await ` in a [ Server Component
](/reference/react/components#server-components) will block its rendering
until the ` await ` statement is finished. Passing a Promise from a Server
Component to a Client Component prevents the Promise from blocking the
rendering of the Server Component.

###  Dealing with rejected Promises

In some cases a Promise passed to ` use ` could be rejected. You can handle
rejected Promises by either:

  1. Displaying an error to users with an error boundary. 
  2. Providing an alternative value with ` Promise.catch `

###  Pitfall

` use ` cannot be called in a try-catch block. Instead of a try-catch block
wrap your component in an Error Boundary  , or  provide an alternative value
to use with the Promise’s ` .catch ` method  .

####  Displaying an error to users with an error boundary

If you’d like to display an error to your users when a Promise is rejected,
you can use an [ error boundary ](/reference/react/Component#catching-
rendering-errors-with-an-error-boundary) . To use an error boundary, wrap the
component where you are calling the ` use ` Hook in an error boundary. If the
Promise passed to ` use ` is rejected the fallback for the error boundary will
be displayed.

message.js

message.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    "use client";
    
    import { use, Suspense } from "react";
    import { ErrorBoundary } from "react-error-boundary";
    
    export function MessageContainer({ messagePromise }) {
      return (
        <ErrorBoundary fallback={<p>⚠️Something went wrong</p>}>
          <Suspense fallback={<p>⌛Downloading message...</p>}>
            <Message messagePromise={messagePromise} />
          </Suspense>
        </ErrorBoundary>
      );
    }
    
    function Message({ messagePromise }) {
      const content = use(messagePromise);
      return <p>Here is the message: {content}</p>;
    }
    
    

Show more

####  Providing an alternative value with ` Promise.catch `

If you’d like to pr