{"parents":["21c1d51acb2c38b774e254e2a0022b044eacb548"],"patch":"diff --git a\/packages\/react-devtools-shared\/src\/__tests__\/store-test.js b\/packages\/react-devtools-shared\/src\/__tests__\/store-test.js\nindex 9b2b2ae54f..37272ea057 100644\n--- a\/packages\/react-devtools-shared\/src\/__tests__\/store-test.js\n+++ b\/packages\/react-devtools-shared\/src\/__tests__\/store-test.js\n@@ -3298,4 +3298,100 @@ describe('Store', () => {\n \n `);\n });\n+\n+ \/\/ @reactVersion >= 19.0\n+ it('measures rects when reconnecting', async () => {\n+ function Component({children, promise}) {\n+ let content = '';\n+ if (promise) {\n+ const value = readValue(promise);\n+ if (typeof value === 'string') {\n+ content += value;\n+ }\n+ }\n+ return (\n+

\n+ {content}\n+ {children}\n+ <\/div>\n+ );\n+ }\n+\n+ function App({outer, inner}) {\n+ return (\n+ loading outer<\/Component>}>\n+ \n+ outer content\n+ <\/Component>\n+ loading inner<\/Component>\n+ }>\n+ \n+ inner content\n+ <\/Component>\n+ <\/React.Suspense>\n+ <\/React.Suspense>\n+ );\n+ }\n+\n+ await actAsync(() => {\n+ render();\n+ });\n+\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ ▾ \n+ \n+ ▾ \n+ \n+ [suspense-root] rects={[{x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}]}\n+ \n+ \n+ `);\n+\n+ let outerResolve;\n+ const outerPromise = new Promise(resolve => {\n+ outerResolve = resolve;\n+ });\n+\n+ let innerResolve;\n+ const innerPromise = new Promise(resolve => {\n+ innerResolve = resolve;\n+ });\n+ await actAsync(() => {\n+ render();\n+ });\n+\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ ▾ \n+ \n+ [suspense-root] rects={[{x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}, {x:1,y:2,width:13,height:1}]}\n+ \n+ \n+ `);\n+\n+ await actAsync(() => {\n+ outerResolve('..');\n+ innerResolve('.');\n+ });\n+\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ ▾ \n+ \n+ ▾ \n+ \n+ [suspense-root] rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:14,height:1}]}\n+ \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 2cd037f78d..8b7e20dcf0 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js\n@@ -2586,6 +2586,17 @@ export function attach(\n }\n }\n } else {\n+ const suspenseNode = fiberInstance.suspenseNode;\n+ if (suspenseNode !== null && fiber.memoizedState === null) {\n+ \/\/ We're reconnecting an unsuspended Suspense. Measure to see if anything changed.\n+ const prevRects = suspenseNode.rects;\n+ const nextRects = measureInstance(fiberInstance);\n+ if (!areEqualRects(prevRects, nextRects)) {\n+ suspenseNode.rects = nextRects;\n+ recordSuspenseResize(suspenseNode);\n+ }\n+ }\n+\n const {key} = fiber;\n const displayName = getDisplayNameForFiber(fiber);\n const elementType = getElementTypeForFiber(fiber);\n","commit":{"revision":"ce4054ebdd550237cf20a509f8503d4624cbaffa","authorName":"Sebastian \"Sebbie\" Silbermann","authorEmail":"sebastian.silbermann@vercel.com","subject":"[DevTools] Measure when reconnecting Suspense (#35098)","shortRevision":"ce4054ebdd","authoredAt":"2025-11-10T20:55:31+01:00"},"body":"","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"}]}

dillon1000/react

Files changed