Bug: putting promise into JSX will cause hydration issue

[himself65]

React version: 18.3.0-canary-5dd35968b-20231201

Steps To Reproduce

1. clone https://github.com/himself65/react-hydration-error
2. pnpm install && pnpm run dev

Link to code example:

import { Component } from '@/components/component'

export default function Home () {
  const delayedMessage = new Promise((resolve) => {
    setTimeout(() => resolve('Hello from server!'), 2000)
  })
  return (
    <main>
      <div>
        <Component delayedMessage={delayedMessage}/>
      </div>
    </main>
  )
}

"use client"
export function Component ({
  delayedMessage
}) {
  return (
    <div>
      {delayedMessage}
    </div>
  )
}

The current behavior

The expected behavior

Won't have hydration error

[himself65]

Related downstream repo: wakujs/waku#203

[himself65]

wakujs/waku#202

[himself65]

I think this is a React issue, not next.js. Since our customized react framework has the same error

[NakZMichael]

Prop values passed from a Server Component to Client Component must be serializable.

https://react.dev/reference/react/use-client

I think using async/await works well.

Sorry, Promise is serealizable. I misunderstood.

[NakZMichael]

Values of serialized promises are different between client side and server side.

[godspeed-03]

The issue can be resolved by using useEffect hook .
Head to next js documentation.

• https://nextjs.org/docs/messages/react-hydration-error

[NakZMichael]

I found a workaround for this matter. It is to use use to Promises.
https://github.com/NakZMichael/react-hydration-error

However, looking at the following PR, it appears that this workaround is not supposed to be necessary.
#25634

And it seems to be related to the following Issue discussed in the Next.js repository.
vercel/next.js#56470

[himself65]

Since promise is a valid jsx element, I think it should not cause ssr issues or otherwise should be documented

[MadhuSaini22]

@himself65 , Thanks for reporting the hydration issue with promises in JSX. Putting promises directly in JSX can be tricky in React 18.
Here's a quick fix:

Render a placeholder on the server while the promise resolves on the client (e.g., a loading spinner). Update the DOM with the resolved value once it's available.
Remember to update the server-side HTML with the resolved value for optimal performance.

For more advanced handling, consider Suspense or data fetching libraries like react-query or SWR.

Happy coding!

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[himself65]

bump