\n Rendered at<\/label>: {listItems}\n <\/div>\n <\/Fragment>\n );\n }\n+\n+type WhatChangedProps = {|\n+ commitIndex: number,\n+ fiberID: number,\n+ profilerStore: ProfilerStore,\n+ rootID: number,\n+|};\n+\n+function WhatChanged({\n+ commitIndex,\n+ fiberID,\n+ profilerStore,\n+ rootID,\n+}: WhatChangedProps) {\n+ const { changeDescriptions } = profilerStore.getCommitData(\n+ ((rootID: any): number),\n+ commitIndex\n+ );\n+ if (changeDescriptions === null) {\n+ return null;\n+ }\n+\n+ const changeDescription = changeDescriptions.get(fiberID);\n+ if (changeDescription == null) {\n+ return null;\n+ }\n+\n+ const changes = [];\n+ if (changeDescription.didHooksChange) {\n+ changes.push(\n+

\n+ • Hooks\n+ <\/div>\n+ );\n+ }\n+ if (changeDescription.props.length !== 0) {\n+ changes.push(\n+

\n+ • Props\n+ {changeDescription.props.map(key => (\n+ \n+ {key}\n+ <\/span>\n+ ))}\n+ <\/div>\n+ );\n+ }\n+ if (changeDescription.state.length !== 0) {\n+ changes.push(\n+

\n+ • State\n+ {changeDescription.state.map(key => (\n+ \n+ {key}\n+ <\/span>\n+ ))}\n+ <\/div>\n+ );\n+ }\n+\n+ if (changes.length === 0) {\n+ changes.push(

Nothing<\/div>);\n+ }\n+\n+ return (\n+

\n+ What changed?<\/label>\n+ {changes}\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/types.js b\/src\/devtools\/views\/Profiler\/types.js\nindex 9af30779be..667ab54ce3 100644\n--- a\/src\/devtools\/views\/Profiler\/types.js\n+++ b\/src\/devtools\/views\/Profiler\/types.js\n@@ -31,7 +31,17 @@ export type SnapshotNode = {|\n type: ElementType,\n |};\n \n+\/\/ TODO (change descriptions) Is it important to handle context?\n+export type ChangeDescription = {|\n+ didHooksChange: boolean,\n+ props: Array,\n+ state: Array,\n+|};\n+\n export type CommitDataFrontend = {|\n+ \/\/ Map of Fiber (ID) to a description of what changed in this commit.\n+ changeDescriptions: Map | null,\n+\n \/\/ How long was this commit?\n duration: number,\n \n@@ -93,6 +103,7 @@ export type ProfilingDataFrontend = {|\n |};\n \n export type CommitDataExport = {|\n+ changeDescriptions: Array<[number, ChangeDescription]> | null,\n duration: number,\n \/\/ Tuple of fiber ID and actual duration\n fiberActualDurations: Array<[number, number]>,\ndiff --git a\/src\/devtools\/views\/Profiler\/utils.js b\/src\/devtools\/views\/Profiler\/utils.js\nindex f192520f4f..bd4d1e9f31 100644\n--- a\/src\/devtools\/views\/Profiler\/utils.js\n+++ b\/src\/devtools\/views\/Profiler\/utils.js\n@@ -58,6 +58,10 @@ export function prepareProfilingDataFrontendFromBackendAndStore(\n \n dataForRoots.set(rootID, {\n commitData: commitData.map((commitDataBackend, commitIndex) => ({\n+ changeDescriptions:\n+ commitDataBackend.changeDescriptions != null\n+ ? new Map(commitDataBackend.changeDescriptions)\n+ : null,\n duration: commitDataBackend.duration,\n fiberActualDurations: new Map(\n commitDataBackend.fiberActualDurations\n@@ -109,6 +113,7 @@ export function prepareProfilingDataFrontendFromExport(\n dataForRoots.set(rootID, {\n commitData: commitData.map(\n ({\n+ changeDescriptions,\n duration,\n fiberActualDurations,\n fiberSelfDurations,\n@@ -117,6 +122,8 @@ export function prepareProfilingDataFrontendFromExport(\n screenshot,\n timestamp,\n }) => ({\n+ changeDescriptions:\n+ changeDescriptions != null ? new Map(changeDescriptions) : null,\n duration,\n fiberActualDurations: new Map(fiberActualDurations),\n fiberSelfDurations: new Map(fiberSelfDurations),\n@@ -159,6 +166,7 @@ export function prepareProfilingDataExport(\n dataForRoots.push({\n commitData: commitData.map(\n ({\n+ changeDescriptions,\n duration,\n fiberActualDurations,\n fiberSelfDurations,\n@@ -167,6 +175,10 @@ export function prepareProfilingDataExport(\n screenshot,\n timestamp,\n }) => ({\n+ changeDescriptions:\n+ changeDescriptions != null\n+ ? Array.from(changeDescriptions.entries())\n+ : null,\n duration,\n fiberActualDurations: Array.from(fiberActualDurations.entries()),\n fiberSelfDurations: Array.from(fiberSelfDurations.entries()),\ndiff --git a\/src\/devtools\/views\/Settings\/Settings.js b\/src\/devtools\/views\/Settings\/Settings.js\nindex 645ee25422..b53dee04e2 100644\n--- a\/src\/devtools\/views\/Settings\/Settings.js\n+++ b\/src\/devtools\/views\/Settings\/Settings.js\n@@ -1,6 +1,6 @@\n \/\/ @flow\n \n-import React, { useCallback, useContext, useMemo } from 'react';\n+import React, { Fragment, useCallback, useContext, useMemo } from 'react';\n import { useSubscription } from '..\/hooks';\n import { StoreContext } from '..\/context';\n import { SettingsContext } from '.\/SettingsContext';\n@@ -43,6 +43,20 @@ function Settings(_: {||}) {\n collapseNodesByDefaultSubscription\n );\n \n+ const recordChangeDescriptionsSubscription = useMemo(\n+ () => ({\n+ getCurrentValue: () => store.recordChangeDescriptions,\n+ subscribe: (callback: Function) => {\n+ store.addListener('recordChangeDescriptions', callback);\n+ return () => store.removeListener('recordChangeDescriptions', callback);\n+ },\n+ }),\n+ [store]\n+ );\n+ const recordChangeDescriptions = useSubscription(\n+ recordChangeDescriptionsSubscription\n+ );\n+\n const updateDisplayDensity = useCallback(\n ({ currentTarget }) => {\n setDisplayDensity(currentTarget.value);\n@@ -69,6 +83,12 @@ function Settings(_: {||}) {\n },\n [store]\n );\n+ const updateRecordChangeDescriptions = useCallback(\n+ ({ currentTarget }) => {\n+ store.recordChangeDescriptions = currentTarget.checked;\n+ },\n+ [store]\n+ );\n \n return (\n

\n@@ -145,25 +165,37 @@ function Settings(_: {||}) {\n <\/label>\n <\/div>\n \n- {store.supportsCaptureScreenshots && (\n-

\n-

Profiler<\/div>\n- \n- {' '}\n- Capture screenshots while profiling\n- <\/label>\n- {captureScreenshots && (\n-

\n- Screenshots will be throttled in order to reduce the negative\n- impact on performance.\n- <\/div>\n- )}\n- <\/div>\n- )}\n+

\n+

Profiler<\/div>\n+\n+ \n+ {' '}\n+ Record which props\/state\/hooks changed while profiling\n+ <\/label>\n+\n+ {store.supportsCaptureScreenshots && (\n+ \n+ \n+ {' '}\n+ Capture screenshots while profiling\n+ <\/label>\n+ {captureScreenshots && (\n+

\n+ Screenshots will be throttled in order to reduce the negative\n+ impact on performance.\n+ <\/div>\n+ )}\n+ <\/Fragment>\n+ )}\n+ <\/div>\n <\/div>\n );\n }\n","body":""}

dillon1000/react

Files changed