{"body":"","commit":{"authorName":"Brian Vaughn","authorEmail":"bvaughn@fb.com","authoredAt":"2019-05-24T07:37:46-07:00","revision":"07db37f0305e06f6d87caf1adff44bbbb5e4156a","subject":"Cache inspected element data until it is updated","shortRevision":"07db37f030"},"patch":"diff --git a\/src\/__tests__\/__snapshots__\/inspectedElementContext-test.js.snap b\/src\/__tests__\/__snapshots__\/inspectedElementContext-test.js.snap\nindex 7834f6842e..cf7a61c3c8 100644\n--- a\/src\/__tests__\/__snapshots__\/inspectedElementContext-test.js.snap\n+++ b\/src\/__tests__\/__snapshots__\/inspectedElementContext-test.js.snap\n@@ -51,6 +51,58 @@ exports[`InspectedElementContext should inspect the currently selected element:\n }\n `;\n \n+exports[`InspectedElementContext should not re-render a function with hooks if it did not update since it was last inspected: 1: mount 1`] = `\n+[root]\n+ ▾ \n+ \n+`;\n+\n+exports[`InspectedElementContext should not re-render a function with hooks if it did not update since it was last inspected: 2: initial render 1`] = `\n+{\n+ \"id\": 3,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"events\": null,\n+ \"hooks\": [\n+ {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"value\": 0,\n+ \"subHooks\": []\n+ }\n+ ],\n+ \"props\": {\n+ \"foo\": 1,\n+ \"bar\": \"abc\"\n+ },\n+ \"state\": null\n+}\n+`;\n+\n+exports[`InspectedElementContext should not re-render a function with hooks if it did not update since it was last inspected: 3: updated state 1`] = `\n+{\n+ \"id\": 3,\n+ \"owners\": null,\n+ \"context\": null,\n+ \"events\": null,\n+ \"hooks\": [\n+ {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"value\": 0,\n+ \"subHooks\": []\n+ }\n+ ],\n+ \"props\": {\n+ \"foo\": 2,\n+ \"bar\": \"def\"\n+ },\n+ \"state\": null\n+}\n+`;\n+\n exports[`InspectedElementContext should poll for updates for the currently selected element: 1: mount 1`] = `\n [root]\n \ndiff --git a\/src\/__tests__\/inspectedElementContext-test.js b\/src\/__tests__\/inspectedElementContext-test.js\nindex bf8d7f8bf7..2ae0b0743c 100644\n--- a\/src\/__tests__\/inspectedElementContext-test.js\n+++ b\/src\/__tests__\/inspectedElementContext-test.js\n@@ -159,4 +159,94 @@ describe('InspectedElementContext', () => {\n \n done();\n });\n+\n+ it('should not re-render a function with hooks if it did not update since it was last inspected', async done => {\n+ let targetRenderCount = 0;\n+\n+ const Wrapper = ({ children }) => children;\n+ const Target = React.memo(props => {\n+ targetRenderCount++;\n+ React.useState(0);\n+ return null;\n+ });\n+\n+ const container = document.createElement('div');\n+ utils.act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ <\/Wrapper>,\n+ container\n+ )\n+ );\n+ expect(store).toMatchSnapshot('1: mount');\n+\n+ const id = ((store.getElementIDAtIndex(1): any): number);\n+\n+ let inspectedElement = null;\n+\n+ function Suspender({ target }) {\n+ const { read } = React.useContext(InspectedElementContext);\n+ inspectedElement = read(target);\n+ return null;\n+ }\n+\n+ targetRenderCount = 0;\n+\n+ let renderer;\n+ await utils.actAsync(\n+ () =>\n+ (renderer = TestRenderer.create(\n+ \n+ \n+ \n+ <\/React.Suspense>\n+ <\/Contexts>\n+ )),\n+ 3\n+ );\n+ expect(targetRenderCount).toBe(1);\n+ expect(inspectedElement).toMatchSnapshot('2: initial render');\n+\n+ const initialInspectedElement = inspectedElement;\n+\n+ targetRenderCount = 0;\n+ inspectedElement = null;\n+ await utils.actAsync(\n+ () =>\n+ renderer.update(\n+ \n+ \n+ \n+ <\/React.Suspense>\n+ <\/Contexts>\n+ ),\n+ 1\n+ );\n+ expect(targetRenderCount).toBe(0);\n+ expect(inspectedElement).toEqual(initialInspectedElement);\n+\n+ targetRenderCount = 0;\n+\n+ await utils.actAsync(() =>\n+ ReactDOM.render(\n+ \n+ \n+ <\/Wrapper>,\n+ container\n+ )\n+ );\n+\n+ \/\/ Target should have been rendered once (by ReactDOM) and once by DevTools for inspection.\n+ expect(targetRenderCount).toBe(2);\n+ expect(inspectedElement).toMatchSnapshot('3: updated state');\n+\n+ done();\n+ });\n });\ndiff --git a\/src\/backend\/renderer.js b\/src\/backend\/renderer.js\nindex b670e6c765..67692034be 100644\n--- a\/src\/backend\/renderer.js\n+++ b\/src\/backend\/renderer.js\n@@ -1102,6 +1102,19 @@ export function attach(\n if (__DEBUG__) {\n debug('updateFiberRecursively()', nextFiber, parentFiber);\n }\n+\n+ if (\n+ mostRecentlyInspectedElement !== null &&\n+ mostRecentlyInspectedElementID ===\n+ getFiberID(getPrimaryFiber(nextFiber)) &&\n+ hasDataChanged(prevFiber, nextFiber)\n+ ) {\n+ \/\/ If this Fiber has updated, clear cached inspected data.\n+ \/\/ If it is inspected again, it may need to be re-run to obtain updated hooks values.\n+ mostRecentlyInspectedElement = null;\n+ mostRecentlyInspectedElementID = null;\n+ }\n+\n const shouldIncludeInTree = !shouldFilterFiber(nextFiber);\n const isSuspense = nextFiber.tag === SuspenseComponent;\n let shouldResetChildren = false;\n@@ -1890,18 +1903,41 @@ export function attach(\n };\n }\n \n+ let mostRecentlyInspectedElementID: number | null = null;\n+ let mostRecentlyInspectedElement: InspectedElement | null = null;\n+\n function inspectElement(id: number): InspectedElement | null {\n- let result = inspectElementRaw(id);\n- if (result === null) {\n+ \/\/ If this element has not been updated since it was last inspected, reuse the last value.\n+ \/\/ This avoids re-invoking a function component with hooks.\n+ \/\/ TODO We could send a special signal (e.g. true) to avoid serialization too.\n+ if (\n+ mostRecentlyInspectedElement !== null &&\n+ mostRecentlyInspectedElementID === id\n+ ) {\n+ return mostRecentlyInspectedElement;\n+ }\n+\n+ mostRecentlyInspectedElementID = id;\n+ mostRecentlyInspectedElement = inspectElementRaw(id);\n+ if (mostRecentlyInspectedElement === null) {\n return null;\n }\n- \/\/ TODO Review sanitization approach for the below inspectable values.\n- result.context = cleanForBridge(result.context);\n- result.events = cleanForBridge(result.events);\n- result.hooks = cleanForBridge(result.hooks);\n- result.props = cleanForBridge(result.props);\n- result.state = cleanForBridge(result.state);\n- return result;\n+ mostRecentlyInspectedElement.context = cleanForBridge(\n+ mostRecentlyInspectedElement.context\n+ );\n+ mostRecentlyInspectedElement.events = cleanForBridge(\n+ mostRecentlyInspectedElement.events\n+ );\n+ mostRecentlyInspectedElement.hooks = cleanForBridge(\n+ mostRecentlyInspectedElement.hooks\n+ );\n+ mostRecentlyInspectedElement.props = cleanForBridge(\n+ mostRecentlyInspectedElement.props\n+ );\n+ mostRecentlyInspectedElement.state = cleanForBridge(\n+ mostRecentlyInspectedElement.state\n+ );\n+ return mostRecentlyInspectedElement;\n }\n \n function logElementToConsole(id) {\n","parents":["408fbee23b24c247df4b3bae2abf1fe0283fc0ab"],"files":[{"path":"src\/__tests__\/__snapshots__\/inspectedElementContext-test.js.snap","status":"M"},{"path":"src\/__tests__\/inspectedElementContext-test.js","status":"M"},{"path":"src\/backend\/renderer.js","status":"M"}]}

dillon1000/react

Files changed