Next.js Discord

Discord Forum

react renders a promise prop without need of use hook

Unanswered
Cape lion posted this in #help-forum
Open in Discord
Cape lionOP
Hi, I noticed that there is no need to use use on a promise inside a client component. You can see that here https://codesandbox.io/p/sandbox/89vdff, removing use from this line const messageContent = use(messagePromise);. It still works.

What is happening here? I can't find info about this in docs.

2 Replies

Cape lionOP
i mean commenting the use only, not the line itself. I see that using usehook the component suspends until the the promise is resolved, resulting in 1 render only. On the contrary, without using use the component renders every time the promise state changes.
This means that I never knew that one can pass a promise to a component via prop and put it jsx. Maybe someone knows where can I read about this in docs?

function Message({ messagePromise }) {
  const messageContent = use(messagePromise);
  // const messageContent = messagePromise; // without use, it works the same way
  return <p>Here is the message: {messageContent}</p>;
}

export function MessageContainer({ messagePromise }) {
  return (
    <Suspense fallback={<p>⌛Downloading message...</p>}>
      <Message messagePromise={messagePromise} />
    </Suspense>
  );
}