Bug: use() yields incorrect value during first SSR #27731
Description
During the first server-side streamed rendering attempt of a RSC tree including a component that is wrapped in <Suspense> & leverages use(), the owner component does not suspend, and its use() yields an unexpected value.
Subsequent requests / SSR attempts result in the wrapped component suspending as expected, and use() yielding the expected value.
// server-root.jsx
function ServerRoot({ flightResponse }) {
return (
<html>
<body>
{/* use(flightResponse) exhibits same issue */}
{flightResponse}
</body>
</html>
);
}// react-html.js
const flightResponse = createFromNodeStream(...);
const renderStream = renderToPipeableStream(
<ServerRoot flightResponse={flightResponse} />,
options
}
);// app.js server component
import { Suspense } from "react";
import { ClientConsumer } from "./client-consumer";
export function App() {
const promise = new Promise((resolve) =>
setTimeout(() => resolve(["foo", "bar"]), 1_000)
);
return (
<Suspense fallback="loading ...">
<ClientConsumer promise={promise}>hello world</ClientConsumer>
</Suspense>
);
}// client-consumer.js client component
"use client";
import { use } from "react";
export function ClientConsumer({ promise, children }) {
console.log("ClientConsumer before the use()");
const value = use(promise);
console.log("ClientConsumer after the use()", value);
return children;
}React version:
- react: "18.3.0-canary-bbb9cb116-20231117",
- react-dom: "18.3.0-canary-bbb9cb116-20231117",
- react-server-dom-webpack: "18.3.0-canary-bbb9cb116-20231117",
Steps To Reproduce
Link to code example: https://github.com/ziir/rsc-bug-repro
- Clone, set-up & start minimal reproduction
- Navigate to http://localhost:3000
The current behavior
On the first SSR attempt only:
- The
ClientConsumercomponent owning theuse(promise)hook does not suspend while thepromiseis pending. use(promise)yields an unexpected value: a JSX element matching theAppparent server component.
The expected behavior
As in the subsequent SSR requests:
- The
ClientConsumercomponent owning theuse(promise)hook suspends while thepromiseis pending. use(promise)yields the expected fulfilled promise value:['foo', 'bar']
