Bug: hydration fails when using Promise values with React Server Components

[lazarv]

React version: [email protected]

Steps To Reproduce

1. use inlined Promise values in JSX
2. hydration fails

Link to code example: https://stackblitz.com/edit/stackblitz-starters-u9soom?file=app%2Fpage.jsx

The current behavior

While rendering of HTML is correct and HTML and flight response seems to be ok, hydration fails.
Maybe the issue correlates with ordering and timing replacing of suspended fragments in the DOM tree and processing the flight response for hydration.

The expected behavior

React tree gets hydrated correctly.

[sophiebits]

@gnoff Thoughts? The code looks legit to me at a glance.

[lazarv]

Thanks for checking this out @sophiebits!

This might be a super edge-case, but is it not concerning to have an issue like this in React core? First I thought I implemented SSR in my experimental meta-framework wrong, then I counter checked it with next.js and while the React versions were roughly the same, this is still reproducible with next.js 13.5+.

Is there anything not supported by React in the example, that should be avoided? If the AsyncComponent is changed to be a non-async function and promises are wrapped in use() this works, but that changes how is this getting rendered as Promise values are no longer references, but primitive values as children.

I updated the example to include both use case.

[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!

[eps1lon]

Also reproduces with just

import { Suspense } from 'react';

const child1 = new Promise((resolve) =>
  setTimeout(() => resolve('Lorem ipsum 111...'), 100)
);

async function AsyncComponent() {
  return <div>{child1}</div>;
}

export default function App() {
  return (
    <Suspense fallback={null}>
      <AsyncComponent />
    </Suspense>
  );
}

-- https://stackblitz.com/edit/stackblitz-starters-ssafqw?file=app%2Ferror%2Fpage.jsx,app%2Fok%2Fpage.jsx

Need to double check if promise-as-a-child support is complete or if we should warn.

[eps1lon]

I can repro this in our Flight fixture when I checkout the React version that's used by this specific Next.js. However, on main this no longer reproduces in our fixtures since it was fixed in #28284

Closing this in favor of vercel/next.js#56470 to figure out which React version we need in Next.js.