{"patch":"diff --git a\/packages\/react-devtools-shared\/src\/__tests__\/inspectedElement-test.js b\/packages\/react-devtools-shared\/src\/__tests__\/inspectedElement-test.js\nindex eb196e76b4..211cd27b15 100644\n--- a\/packages\/react-devtools-shared\/src\/__tests__\/inspectedElement-test.js\n+++ b\/packages\/react-devtools-shared\/src\/__tests__\/inspectedElement-test.js\n@@ -384,6 +384,67 @@ describe('InspectedElement', () => {\n `);\n });\n \n+ \/\/ See github.com\/facebook\/react\/issues\/22241#issuecomment-931299972\n+ it('should properly recover from a cache miss on the frontend', async () => {\n+ let targetRenderCount = 0;\n+\n+ const Wrapper = ({children}) => children;\n+ const Target = React.memo(props => {\n+ targetRenderCount++;\n+ \/\/ Even though his hook isn't referenced, it's used to observe backend rendering.\n+ React.useState(0);\n+ return null;\n+ });\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ legacyRender(\n+ \n+ \n+ <\/Wrapper>,\n+ container,\n+ ),\n+ );\n+\n+ targetRenderCount = 0;\n+\n+ let inspectedElement = await inspectElementAtIndex(1);\n+ expect(targetRenderCount).toBe(1);\n+ expect(inspectedElement.props).toMatchInlineSnapshot(`\n+ Object {\n+ \"a\": 1,\n+ \"b\": \"abc\",\n+ }\n+ `);\n+\n+ const prevInspectedElement = inspectedElement;\n+\n+ \/\/ This test causes an intermediate error to be logged but we can ignore it.\n+ console.error = () => {};\n+\n+ \/\/ Wait for our check-for-updates poll to get the new data.\n+ jest.runOnlyPendingTimers();\n+ await Promise.resolve();\n+\n+ \/\/ Clear the frontend cache to simulate DevTools being closed and re-opened.\n+ \/\/ The backend still thinks the most recently-inspected element is still cached,\n+ \/\/ so the frontend needs to tell it to resend a full value.\n+ \/\/ We can verify this by asserting that the component is re-rendered again.\n+ testRendererInstance = TestRenderer.create(null, {\n+ unstable_isConcurrent: true,\n+ });\n+\n+ const {\n+ clearCacheForTests,\n+ } = require('react-devtools-shared\/src\/inspectedElementMutableSource');\n+ clearCacheForTests();\n+\n+ targetRenderCount = 0;\n+ inspectedElement = await inspectElementAtIndex(1);\n+ expect(targetRenderCount).toBe(1);\n+ expect(inspectedElement).toEqual(prevInspectedElement);\n+ });\n+\n it('should temporarily disable console logging when re-running a component to inspect its hooks', async () => {\n let targetRenderCount = 0;\n \ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/agent.js b\/packages\/react-devtools-shared\/src\/backend\/agent.js\nindex 9eea501cbd..fdd46bf9c8 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/agent.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/agent.js\n@@ -72,6 +72,7 @@ type CopyElementParams = {|\n |};\n \n type InspectElementParams = {|\n+ forceFullData: boolean,\n id: number,\n path: Array | null,\n rendererID: number,\n@@ -346,6 +347,7 @@ export default class Agent extends EventEmitter<{|\n };\n \n inspectElement = ({\n+ forceFullData,\n id,\n path,\n rendererID,\n@@ -357,7 +359,7 @@ export default class Agent extends EventEmitter<{|\n } else {\n this._bridge.send(\n 'inspectedElement',\n- renderer.inspectElement(requestID, id, path),\n+ renderer.inspectElement(requestID, id, path, forceFullData),\n );\n \n \/\/ When user selects an element, stop trying to restore the selection,\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/legacy\/renderer.js b\/packages\/react-devtools-shared\/src\/backend\/legacy\/renderer.js\nindex 1f0aed4040..d799ce72a2 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/legacy\/renderer.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/legacy\/renderer.js\n@@ -694,8 +694,9 @@ export function attach(\n requestID: number,\n id: number,\n path: Array | null,\n+ forceFullData: boolean,\n ): InspectedElementPayload {\n- if (currentlyInspectedElementID !== id) {\n+ if (forceFullData || currentlyInspectedElementID !== id) {\n currentlyInspectedElementID = id;\n currentlyInspectedPaths = {};\n }\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/renderer.js b\/packages\/react-devtools-shared\/src\/backend\/renderer.js\nindex a2469577a0..011f055e50 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/renderer.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/renderer.js\n@@ -3439,12 +3439,13 @@ export function attach(\n requestID: number,\n id: number,\n path: Array | null,\n+ forceFullData: boolean,\n ): InspectedElementPayload {\n if (path !== null) {\n mergeInspectedPaths(path);\n }\n \n- if (isMostRecentlyInspectedElement(id)) {\n+ if (isMostRecentlyInspectedElement(id) && !forceFullData) {\n if (!hasElementUpdatedSinceLastInspected) {\n if (path !== null) {\n let secondaryCategory = null;\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/types.js b\/packages\/react-devtools-shared\/src\/backend\/types.js\nindex 2206dd94fb..bbf574ed21 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/types.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/types.js\n@@ -339,6 +339,7 @@ export type RendererInterface = {\n requestID: number,\n id: number,\n inspectedPaths: Object,\n+ forceFullData: boolean,\n ) => InspectedElementPayload,\n logElementToConsole: (id: number) => void,\n overrideError: (id: number, forceError: boolean) => void,\ndiff --git a\/packages\/react-devtools-shared\/src\/backendAPI.js b\/packages\/react-devtools-shared\/src\/backendAPI.js\nindex 5e0ac663fe..2aa5b30cd2 100644\n--- a\/packages\/react-devtools-shared\/src\/backendAPI.js\n+++ b\/packages\/react-devtools-shared\/src\/backendAPI.js\n@@ -86,11 +86,13 @@ export function copyInspectedElementPath({\n \n export function inspectElement({\n bridge,\n+ forceFullData,\n id,\n path,\n rendererID,\n }: {|\n bridge: FrontendBridge,\n+ forceFullData: boolean,\n id: number,\n path: Array | null,\n rendererID: number,\n@@ -103,6 +105,7 @@ export function inspectElement({\n );\n \n bridge.send('inspectElement', {\n+ forceFullData,\n id,\n path,\n rendererID,\ndiff --git a\/packages\/react-devtools-shared\/src\/bridge.js b\/packages\/react-devtools-shared\/src\/bridge.js\nindex ae5abf7c4f..e67f6cee95 100644\n--- a\/packages\/react-devtools-shared\/src\/bridge.js\n+++ b\/packages\/react-devtools-shared\/src\/bridge.js\n@@ -138,6 +138,7 @@ type ViewAttributeSourceParams = {|\n \n type InspectElementParams = {|\n ...ElementAndRendererID,\n+ forceFullData: boolean,\n path: Array | null,\n requestID: number,\n |};\ndiff --git a\/packages\/react-devtools-shared\/src\/inspectedElementMutableSource.js b\/packages\/react-devtools-shared\/src\/inspectedElementMutableSource.js\nindex d0c2880005..9302cd782a 100644\n--- a\/packages\/react-devtools-shared\/src\/inspectedElementMutableSource.js\n+++ b\/packages\/react-devtools-shared\/src\/inspectedElementMutableSource.js\n@@ -62,8 +62,15 @@ export function inspectElement({\n rendererID: number,\n |}): Promise {\n const {id} = element;\n+\n+ \/\/ This could indicate that the DevTools UI has been closed and reopened.\n+ \/\/ The in-memory cache will be clear but the backend still thinks we have cached data.\n+ \/\/ In this case, we need to tell it to resend the full data.\n+ const forceFullData = !inspectedElementCache.has(id);\n+\n return inspectElementAPI({\n bridge,\n+ forceFullData,\n id,\n path,\n rendererID,\n@@ -74,7 +81,7 @@ export function inspectElement({\n switch (type) {\n case 'no-change':\n \/\/ This is a no-op for the purposes of our cache.\n- inspectedElement = inspectedElementCache.get(element.id);\n+ inspectedElement = inspectedElementCache.get(id);\n if (inspectedElement != null) {\n return [inspectedElement, type];\n }\n@@ -85,7 +92,7 @@ export function inspectElement({\n case 'not-found':\n \/\/ This is effectively a no-op.\n \/\/ If the Element is still in the Store, we can eagerly remove it from the Map.\n- inspectedElementCache.remove(element.id);\n+ inspectedElementCache.remove(id);\n \n throw Error(`Element \"${id}\" not found`);\n \n@@ -98,7 +105,7 @@ export function inspectElement({\n fullData.value,\n );\n \n- inspectedElementCache.set(element.id, inspectedElement);\n+ inspectedElementCache.set(id, inspectedElement);\n \n return [inspectedElement, type];\n \n@@ -108,7 +115,7 @@ export function inspectElement({\n \n \/\/ A path has been hydrated.\n \/\/ Merge it with the latest copy we have locally and resolve with the merged value.\n- inspectedElement = inspectedElementCache.get(element.id) || null;\n+ inspectedElement = inspectedElementCache.get(id) || null;\n if (inspectedElement !== null) {\n \/\/ Clone element\n inspectedElement = {...inspectedElement};\n@@ -121,7 +128,7 @@ export function inspectElement({\n hydrateHelper(value, ((path: any): Path)),\n );\n \n- inspectedElementCache.set(element.id, inspectedElement);\n+ inspectedElementCache.set(id, inspectedElement);\n \n return [inspectedElement, type];\n }\n@@ -140,3 +147,7 @@ export function inspectElement({\n throw Error(`Unable to inspect element with id \"${id}\"`);\n });\n }\n+\n+export function clearCacheForTests(): void {\n+ inspectedElementCache.reset();\n+}\n","files":[{"path":"packages\/react-devtools-shared\/src\/__tests__\/inspectedElement-test.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/backend\/agent.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/backend\/legacy\/renderer.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/backend\/renderer.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/backend\/types.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/backendAPI.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/bridge.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/inspectedElementMutableSource.js","status":"M"}],"commit":{"authorEmail":"bvaughn@fb.com","revision":"47177247f8c792fbb9a33328c913e246ff139a2d","authoredAt":"2021-09-30T12:48:53-04:00","shortRevision":"47177247f8","authorName":"Brian Vaughn","subject":"DevTools: Fixed potential cache miss when insepcting elements (#22472)"},"body":"","parents":["7d38e4fd896911f7204165853236e1b7f2786a60"]}

dillon1000/react

Files changed