{"body":"","commit":{"subject":"[DevTools] Handle fallback unmount in Suspense update path (#34199)","authorName":"Sebastian \"Sebbie\" Silbermann","shortRevision":"8dba9311e5","authoredAt":"2025-08-15T19:40:35+02:00","authorEmail":"sebastian.silbermann@vercel.com","revision":"8dba9311e581c005af40ca0986155b85e959ae83"},"patch":"diff --git a\/packages\/react-devtools-shared\/src\/__tests__\/store-test.js b\/packages\/react-devtools-shared\/src\/__tests__\/store-test.js\nindex 87524ffd04..a3a428a9d9 100644\n--- a\/packages\/react-devtools-shared\/src\/__tests__\/store-test.js\n+++ b\/packages\/react-devtools-shared\/src\/__tests__\/store-test.js\n@@ -2696,4 +2696,83 @@ describe('Store', () => {\n \n `);\n });\n+\n+ \/\/ @reactVersion >= 18.0\n+ it('can reconcile Suspense in fallback positions', async () => {\n+ let resolveFallback;\n+ const fallbackPromise = new Promise(resolve => {\n+ resolveFallback = resolve;\n+ });\n+ let resolveContent;\n+ const contentPromise = new Promise(resolve => {\n+ resolveContent = resolve;\n+ });\n+\n+ function Component({children, promise}) {\n+ if (promise) {\n+ React.use(promise);\n+ }\n+ return

{children}<\/div>;\n+ }\n+\n+ await actAsync(() =>\n+ render(\n+ \n+ Loading fallback...\n+ <\/Component>\n+ }>\n+ \n+ Loading...\n+ <\/Component>\n+ <\/React.Suspense>\n+ }>\n+ \n+ done\n+ <\/Component>\n+ <\/React.Suspense>,\n+ ),\n+ );\n+\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ ▾ \n+ \n+ [shell]\n+ \n+ \n+ `);\n+\n+ await actAsync(() => {\n+ resolveFallback();\n+ });\n+\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ ▾ \n+ \n+ [shell]\n+ \n+ \n+ `);\n+\n+ await actAsync(() => {\n+ resolveContent();\n+ });\n+\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ \n+ [shell]\n+ \n+ `);\n+ });\n });\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js b\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js\nindex 5e9bcddbfa..439d522801 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js\n@@ -4736,26 +4736,30 @@ export function attach(\n );\n \n shouldMeasureSuspenseNode = false;\n- if (nextFallbackFiber !== null) {\n+ if (prevFallbackFiber !== null || nextFallbackFiber !== null) {\n const fallbackStashedSuspenseParent = reconcilingParentSuspenseNode;\n const fallbackStashedSuspensePrevious =\n previouslyReconciledSiblingSuspenseNode;\n const fallbackStashedSuspenseRemaining =\n remainingReconcilingChildrenSuspenseNodes;\n \/\/ Next, we'll pop back out of the SuspenseNode that we added above and now we'll\n- \/\/ reconcile the fallback, reconciling anything by inserting into the parent SuspenseNode.\n+ \/\/ reconcile the fallback, reconciling anything in the context of the parent SuspenseNode.\n \/\/ Since the fallback conceptually blocks the parent.\n reconcilingParentSuspenseNode = stashedSuspenseParent;\n previouslyReconciledSiblingSuspenseNode = stashedSuspensePrevious;\n remainingReconcilingChildrenSuspenseNodes = stashedSuspenseRemaining;\n try {\n- updateFlags |= updateVirtualChildrenRecursively(\n- nextFallbackFiber,\n- null,\n- prevFallbackFiber,\n- traceNearestHostComponentUpdate,\n- 0,\n- );\n+ if (nextFallbackFiber === null) {\n+ unmountRemainingChildren();\n+ } else {\n+ updateFlags |= updateVirtualChildrenRecursively(\n+ nextFallbackFiber,\n+ null,\n+ prevFallbackFiber,\n+ traceNearestHostComponentUpdate,\n+ 0,\n+ );\n+ }\n } finally {\n reconcilingParentSuspenseNode = fallbackStashedSuspenseParent;\n previouslyReconciledSiblingSuspenseNode =\n@@ -4763,7 +4767,8 @@ export function attach(\n remainingReconcilingChildrenSuspenseNodes =\n fallbackStashedSuspenseRemaining;\n }\n- } else if (nextFiber.memoizedState === null) {\n+ }\n+ if (nextFiber.memoizedState === null) {\n \/\/ Measure this Suspense node in case it changed. We don't update the rect while\n \/\/ we're inside a disconnected subtree nor if we are the Suspense boundary that\n \/\/ is suspended. This lets us keep the rectangle of the displayed content while\n","files":[{"path":"packages\/react-devtools-shared\/src\/__tests__\/store-test.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js","status":"M"}],"parents":["2d98b45d92ee9adc5ec6dbd2a5a270e0fd2607a4"]}

dillon1000/react

Files changed