{"files":[{"path":"packages\/react-devtools-shared\/src\/__tests__\/store-test.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/backend\/renderer.js","status":"M"}],"body":"","parents":["2d8d133e1756ea50a48e615db0c22870e92f4af6"],"commit":{"authorName":"Brian Vaughn","authorEmail":"bvaughn@fb.com","authoredAt":"2021-05-25T11:49:05-07:00","subject":"DevTools: Support an element mounting before its owner (#21562)","shortRevision":"965fb8be6b","revision":"965fb8be6b9e59d6552231039f3d8c1ff20d2793"},"patch":"diff --git a\/packages\/react-devtools-shared\/src\/__tests__\/store-test.js b\/packages\/react-devtools-shared\/src\/__tests__\/store-test.js\nindex 236a9b0f5e..04f14a41a9 100644\n--- a\/packages\/react-devtools-shared\/src\/__tests__\/store-test.js\n+++ b\/packages\/react-devtools-shared\/src\/__tests__\/store-test.js\n@@ -60,6 +60,45 @@ describe('Store', () => {\n expect(store).toMatchSnapshot('2: add host nodes');\n });\n \n+ \/\/ This test is not the same cause as what's reported on GitHub,\n+ \/\/ but the resulting behavior (owner mounting after descendant) is the same.\n+ \/\/ Thec ase below is admittedly contrived and relies on side effects.\n+ \/\/ I'mnot yet sure of how to reduce the GitHub reported production case to a test though.\n+ \/\/ See https:\/\/github.com\/facebook\/react\/issues\/21445\n+ it('should handle when a component mounts before its owner', () => {\n+ const promise = new Promise(resolve => {});\n+\n+ let Dynamic = null;\n+ const Owner = () => {\n+ Dynamic = ;\n+ throw promise;\n+ };\n+ const Parent = () => {\n+ return Dynamic;\n+ };\n+ const Child = () => null;\n+\n+ const container = document.createElement('div');\n+\n+ act(() =>\n+ ReactDOM.render(\n+ <>\n+ \n+ \n+ <\/React.Suspense>\n+ \n+ <\/>,\n+ container,\n+ ),\n+ );\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ \n+ ▾ \n+ \n+ `);\n+ });\n+\n describe('collapseNodesByDefault:false', () => {\n beforeEach(() => {\n store.collapseNodesByDefault = false;\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/renderer.js b\/packages\/react-devtools-shared\/src\/backend\/renderer.js\nindex c05a9b6a72..b7b8eb6056 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/renderer.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/renderer.js\n@@ -1753,7 +1753,13 @@ export function attach(\n const elementType = getElementTypeForFiber(fiber);\n const {_debugOwner} = fiber;\n \n- const ownerID = _debugOwner != null ? getFiberIDThrows(_debugOwner) : 0;\n+ \/\/ Ideally we should call getFiberIDThrows() for _debugOwner,\n+ \/\/ since owners are almost always higher in the tree (and so have already been processed),\n+ \/\/ but in some (rare) instances reported in open source, a descendant mounts before an owner.\n+ \/\/ Since this is a DEV only field it's probably okay to also just lazily generate and ID here if needed.\n+ \/\/ See https:\/\/github.com\/facebook\/react\/issues\/21445\n+ const ownerID =\n+ _debugOwner != null ? getOrGenerateFiberID(_debugOwner) : 0;\n const parentID = parentFiber ? getFiberIDThrows(parentFiber) : 0;\n \n const displayNameStringID = getStringID(displayName);\n"}

dillon1000/react

Files changed