Bug: `use()` yields incorrect value during first SSR about react

[lubieowoce]

this might be a duplicate of #27729

(i guess it comes up in an RSC scenario because client references are wrapped with Lazy?)

I've been debugging this alongside @ziir, and I've managed to whittle this down to a much smaller repro that doesn't involve RSC at all, just a Thenable<ReactNode> that contains a lazy component with a use() call inside.

https://codesandbox.io/p/sandbox/fizz-promise-leak-between-components-in-use-in-a-lazy-component-ppy4v8?file=%2Fsrc%2Findex.tsx%3A16%2C1-17%2C1

Expected output:

Actual output:

"A nested promise for Use" is what's in the promise that gets use()-ed. But the use() returns a whole chunk of other stuff instead.

I believe this is related to lazy() components, because uncommenting this bit here actually stops the issue from appearing:

const LazyUse = lazy(() => sleep(20).then(() => ({ default: Use })));
// const LazyUse = Use; // fixes the issue!

In summary, the issue seems to go like this:

1. Render a promise (promise1) of JSX as a child of the shell
2. Have a lazy component in that JSX
3. call use(promise2) within that lazy component. use will act as if use(promise1) was called instead, so it returns the wrong thing.

Notably, this only seems to happen on the first request. The codesandbox caches the response so that it's easily viewable (also their preview does two requests, so it's not visible.)

---

Based on some poking around in the react internals, the issue seems to come from an incorrectly restored thenableState. when the Use component runs, thenableState is set to an array containing the promise returned from getAsyncContent instead of null, so use just returns that (via this line in trackUsedThenable). My guess is that this is somehow related to lazy() using the legacy suspense implementation, but that's as far as i've gotten.