{"files":[{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js"},{"status":"M","path":"packages\/react-server\/src\/ReactFizzServer.js"}],"parents":["19baee813cb08fc5971a3b301814faa6cd530ec8"],"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\nindex 0838371bef..d6d85b96ce 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\n@@ -6340,6 +6340,63 @@ describe('ReactDOMFizzServer', () => {\n expect(getVisibleChildren(container)).toEqual('Hi');\n });\n \n+ it('should correctly handle different promises in React.use() across lazy components', async () => {\n+ let promise1;\n+ let promise2;\n+ let promiseLazy;\n+\n+ function Component1() {\n+ promise1 ??= new Promise(r => setTimeout(() => r('value1'), 50));\n+ const data = React.use(promise1);\n+ return (\n+

\n+ {data}\n+ \n+ <\/div>\n+ );\n+ }\n+\n+ function Component2() {\n+ promise2 ??= new Promise(r => setTimeout(() => r('value2'), 50));\n+ const data = React.use(promise2);\n+ return

{data}<\/div>;\n+ }\n+\n+ const Component2Lazy = React.lazy(async () => {\n+ promiseLazy ??= new Promise(r => setTimeout(r, 50));\n+ await promiseLazy;\n+ return {default: Component2};\n+ });\n+\n+ function App() {\n+ return ;\n+ }\n+\n+ await act(async () => {\n+ const {pipe} = renderToPipeableStream();\n+ pipe(writable);\n+ });\n+\n+ \/\/ Wait for promise to resolve\n+ await act(async () => {\n+ await promise1;\n+ });\n+ await act(async () => {\n+ await promiseLazy;\n+ });\n+ await act(async () => {\n+ await promise2;\n+ });\n+\n+ \/\/ Verify both components received the correct values\n+ expect(getVisibleChildren(container)).toEqual(\n+

\n+ value1\n+

value2<\/div>\n+ <\/div>,\n+ );\n+ });\n+\n it('useActionState hydrates without a mismatch', async () => {\n \/\/ This is testing an implementation detail: useActionState emits comment\n \/\/ nodes into the SSR stream, so this checks that they are handled correctly\ndiff --git a\/packages\/react-server\/src\/ReactFizzServer.js b\/packages\/react-server\/src\/ReactFizzServer.js\nindex 75267e0e4f..b0df51e0bb 100644\n--- a\/packages\/react-server\/src\/ReactFizzServer.js\n+++ b\/packages\/react-server\/src\/ReactFizzServer.js\n@@ -4153,7 +4153,10 @@ function renderNode(\n \/\/ $FlowFixMe[method-unbinding]\n if (typeof x.then === 'function') {\n const wakeable: Wakeable = (x: any);\n- const thenableState = getThenableStateAfterSuspending();\n+ const thenableState =\n+ thrownValue === SuspenseException\n+ ? getThenableStateAfterSuspending()\n+ : null;\n const newTask = spawnNewSuspendedReplayTask(\n request,\n \/\/ $FlowFixMe: Refined.\n@@ -4186,7 +4189,10 @@ function renderNode(\n \/\/ performance but it can lead to stack overflows in extremely deep trees.\n \/\/ We do have the ability to create a trampoile if this happens which makes\n \/\/ this kind of zero-cost.\n- const thenableState = getThenableStateAfterSuspending();\n+ const thenableState =\n+ thrownValue === SuspenseException\n+ ? getThenableStateAfterSuspending()\n+ : null;\n const newTask = spawnNewSuspendedReplayTask(\n request,\n \/\/ $FlowFixMe: Refined.\n@@ -4246,7 +4252,10 @@ function renderNode(\n \/\/ $FlowFixMe[method-unbinding]\n if (typeof x.then === 'function') {\n const wakeable: Wakeable = (x: any);\n- const thenableState = getThenableStateAfterSuspending();\n+ const thenableState =\n+ thrownValue === SuspenseException\n+ ? getThenableStateAfterSuspending()\n+ : null;\n const newTask = spawnNewSuspendedRenderTask(\n request,\n \/\/ $FlowFixMe: Refined.\n@@ -4317,7 +4326,10 @@ function renderNode(\n \/\/ performance but it can lead to stack overflows in extremely deep trees.\n \/\/ We do have the ability to create a trampoile if this happens which makes\n \/\/ this kind of zero-cost.\n- const thenableState = getThenableStateAfterSuspending();\n+ const thenableState =\n+ thrownValue === SuspenseException\n+ ? getThenableStateAfterSuspending()\n+ : null;\n const newTask = spawnNewSuspendedRenderTask(\n request,\n \/\/ $FlowFixMe: Refined.\n@@ -5233,7 +5245,10 @@ function retryRenderTask(\n if (typeof x.then === 'function') {\n \/\/ Something suspended again, let's pick it back up later.\n segment.status = PENDING;\n- task.thenableState = getThenableStateAfterSuspending();\n+ task.thenableState =\n+ thrownValue === SuspenseException\n+ ? getThenableStateAfterSuspending()\n+ : null;\n const ping = task.ping;\n \/\/ We've asserted that x is a thenable above\n (x: any).then(ping, ping);\n@@ -5338,7 +5353,10 @@ function retryReplayTask(request: Request, task: ReplayTask): void {\n \/\/ Something suspended again, let's pick it back up later.\n const ping = task.ping;\n x.then(ping, ping);\n- task.thenableState = getThenableStateAfterSuspending();\n+ task.thenableState =\n+ thrownValue === SuspenseException\n+ ? getThenableStateAfterSuspending()\n+ : null;\n return;\n }\n }\n","commit":{"authoredAt":"2025-07-28T17:36:08+09:00","authorEmail":"hi.ogawa.zz@gmail.com","subject":"fix: `React.use` inside `React.lazy`-ed component on SSR (#33941)","revision":"cc015840ef72d48de86778785894c7ca44f4f856","authorName":"Hiroshi Ogawa","shortRevision":"cc015840ef"},"body":""}

dillon1000/react

Files changed