{"patch":"diff --git a\/.prettierrc.js b\/.prettierrc.js\nindex df8d863ae4..6e5dcb710f 100644\n--- a\/.prettierrc.js\n+++ b\/.prettierrc.js\n@@ -8,7 +8,7 @@ module.exports = {\n jsxBracketSameLine: true,\n trailingComma: 'es5',\n printWidth: 80,\n- parser: 'babylon',\n+ parser: 'babel',\n \n overrides: [\n {\ndiff --git a\/fixtures\/attribute-behavior\/src\/App.js b\/fixtures\/attribute-behavior\/src\/App.js\nindex 3764349b95..7cb678b587 100644\n--- a\/fixtures\/attribute-behavior\/src\/App.js\n+++ b\/fixtures\/attribute-behavior\/src\/App.js\n@@ -461,9 +461,7 @@ function prepareState(initGlobals) {\n hasSameBehaviorForAll,\n rowPatternHash,\n \/\/ \"Good enough\" id that we can store in localStorage\n- rowIdHash: `${attribute.name} ${attribute.tagName} ${\n- attribute.overrideStringValue\n- }`,\n+ rowIdHash: `${attribute.name} ${attribute.tagName} ${attribute.overrideStringValue}`,\n };\n const rowGroup = rowPatternHashes.get(rowPatternHash) || new Set();\n rowGroup.add(row);\n@@ -866,14 +864,12 @@ class App extends React.Component {\n \/\/ Sort\n switch (sortOrder) {\n case ALPHABETICAL:\n- return filteredAttributes.sort(\n- (attr1, attr2) =>\n- attr1.name.toLowerCase() < attr2.name.toLowerCase() ? -1 : 1\n+ return filteredAttributes.sort((attr1, attr2) =>\n+ attr1.name.toLowerCase() < attr2.name.toLowerCase() ? -1 : 1\n );\n case REV_ALPHABETICAL:\n- return filteredAttributes.sort(\n- (attr1, attr2) =>\n- attr1.name.toLowerCase() < attr2.name.toLowerCase() ? 1 : -1\n+ return filteredAttributes.sort((attr1, attr2) =>\n+ attr1.name.toLowerCase() < attr2.name.toLowerCase() ? 1 : -1\n );\n case GROUPED_BY_ROW_PATTERN: {\n return filteredAttributes.sort((attr1, attr2) => {\ndiff --git a\/fixtures\/dom\/src\/components\/Iframe.js b\/fixtures\/dom\/src\/components\/Iframe.js\nindex 3030d50594..b69f74ef3a 100644\n--- a\/fixtures\/dom\/src\/components\/Iframe.js\n+++ b\/fixtures\/dom\/src\/components\/Iframe.js\n@@ -55,4 +55,4 @@ class IframeSubtree extends React.Component {\n }\n }\n \n-export default (ReactDOM.createPortal ? IframePortal : IframeSubtree);\n+export default ReactDOM.createPortal ? IframePortal : IframeSubtree;\ndiff --git a\/fixtures\/dom\/src\/components\/fixtures\/home.js b\/fixtures\/dom\/src\/components\/fixtures\/home.js\nindex b2f04ef272..b446cf7e61 100644\n--- a\/fixtures\/dom\/src\/components\/fixtures\/home.js\n+++ b\/fixtures\/dom\/src\/components\/fixtures\/home.js\n@@ -33,7 +33,8 @@ export default function Home() {\n \n \n ESR^{†<\/sup>\n- <\/a>, Latest\n+ <\/a>\n+ , Latest\n <\/td>\n <\/tr>\n \ndiff --git a\/fixtures\/dom\/src\/components\/fixtures\/suspense\/index.js b\/fixtures\/dom\/src\/components\/fixtures\/suspense\/index.js\nindex 44b9f33192..ce4c64f30e 100644\n--- a\/fixtures\/dom\/src\/components\/fixtures\/suspense\/index.js\n+++ b\/fixtures\/dom\/src\/components\/fixtures\/suspense\/index.js\n@@ -213,8 +213,8 @@ class TextInputFixtures extends React.Component {\n \n \n \n- React\n- is cool\n+ \n+ React is cool\n <\/SuspendyTree>\n <\/Fixture>\n <\/TestCase>\n@@ -308,7 +308,9 @@ class TextInputFixtures extends React.Component {\n}

\n {Array(20)\n .fill()\n- .map((_, i) =>

{i + 1}<\/h2>)}\n+ .map((_, i) => (\n+

{i + 1}<\/h2>\n+ ))}\n <\/div>\n <\/SuspendyTree>\n <\/Fixture>\ndiff --git a\/fixtures\/dom\/src\/toWarnDev.js b\/fixtures\/dom\/src\/toWarnDev.js\nindex ab4424d735..faa793f416 100644\n--- a\/fixtures\/dom\/src\/toWarnDev.js\n+++ b\/fixtures\/dom\/src\/toWarnDev.js\n@@ -205,9 +205,7 @@ const createMatcherFor = consoleMethod =>\n if (withoutStack !== warningsWithoutComponentStack.length) {\n return {\n message: () =>\n- `Expected ${withoutStack} warnings without a component stack but received ${\n- warningsWithoutComponentStack.length\n- }:\\n` +\n+ `Expected ${withoutStack} warnings without a component stack but received ${warningsWithoutComponentStack.length}:\\n` +\n warningsWithoutComponentStack.map(warning =>\n this.utils.printReceived(warning)\n ),\ndiff --git a\/fixtures\/eslint\/index.js b\/fixtures\/eslint\/index.js\nindex 1052cac180..d534153105 100644\n--- a\/fixtures\/eslint\/index.js\n+++ b\/fixtures\/eslint\/index.js\n@@ -8,22 +8,19 @@ function Comment({comment, commentSource}) {\n const currentUserID = comment.viewer.id;\n const environment = RelayEnvironment.forUser(currentUserID);\n const commentID = nullthrows(comment.id);\n- useEffect(\n- () => {\n- const subscription = SubscriptionCounter.subscribeOnce(\n- `StoreSubscription_${commentID}`,\n- () =>\n- StoreSubscription.subscribe(\n- environment,\n- {\n- comment_id: commentID,\n- },\n- currentUserID,\n- commentSource\n- )\n- );\n- return () => subscription.dispose();\n- },\n- [commentID, commentSource, currentUserID, environment]\n- );\n+ useEffect(() => {\n+ const subscription = SubscriptionCounter.subscribeOnce(\n+ `StoreSubscription_${commentID}`,\n+ () =>\n+ StoreSubscription.subscribe(\n+ environment,\n+ {\n+ comment_id: commentID,\n+ },\n+ currentUserID,\n+ commentSource\n+ )\n+ );\n+ return () => subscription.dispose();\n+ }, [commentID, commentSource, currentUserID, environment]);\n }\ndiff --git a\/fixtures\/fiber-debugger\/src\/App.js b\/fixtures\/fiber-debugger\/src\/App.js\nindex a70e3aee5d..75d74c76b7 100644\n--- a\/fixtures\/fiber-debugger\/src\/App.js\n+++ b\/fixtures\/fiber-debugger\/src\/App.js\n@@ -192,8 +192,7 @@ class App extends Component {\n }\n \/>\n
\n- Step {currentStep}\n- : {friendlyAction} (\n+ Step {currentStep}: {friendlyAction} (\n \n Edit\n <\/a>\ndiff --git a\/fixtures\/fiber-debugger\/src\/Fibers.js b\/fixtures\/fiber-debugger\/src\/Fibers.js\nindex bd5d1b742c..b6b06e59a7 100644\n--- a\/fixtures\/fiber-debugger\/src\/Fibers.js\n+++ b\/fixtures\/fiber-debugger\/src\/Fibers.js\n@@ -330,83 +330,76 @@ export default function Fibers({fibers, show, graphSettings, ...rest}) {\n ]}\n <\/div>\n <\/Vertex>,\n- fiber.child &&\n- show.child && (\n- \n- child\n- <\/Edge>\n- ),\n- fiber.sibling &&\n- show.sibling && (\n- \n- sibling\n- <\/Edge>\n- ),\n- fiber.return &&\n- show.return && (\n- \n- return\n- <\/Edge>\n- ),\n- fiber.nextEffect &&\n- show.fx && (\n- \n- nextFx\n- <\/Edge>\n- ),\n- fiber.firstEffect &&\n- show.fx && (\n- \n- firstFx\n- <\/Edge>\n- ),\n- fiber.lastEffect &&\n- show.fx && (\n- \n- lastFx\n- <\/Edge>\n- ),\n- fiber.alternate &&\n- show.alt && (\n- \n- alt\n- <\/Edge>\n- ),\n+ fiber.child && show.child && (\n+ \n+ child\n+ <\/Edge>\n+ ),\n+ fiber.sibling && show.sibling && (\n+ \n+ sibling\n+ <\/Edge>\n+ ),\n+ fiber.return && show.return && (\n+ \n+ return\n+ <\/Edge>\n+ ),\n+ fiber.nextEffect && show.fx && (\n+ \n+ nextFx\n+ <\/Edge>\n+ ),\n+ fiber.firstEffect && show.fx && (\n+ \n+ firstFx\n+ <\/Edge>\n+ ),\n+ fiber.lastEffect && show.fx && (\n+ \n+ lastFx\n+ <\/Edge>\n+ ),\n+ fiber.alternate && show.alt && (\n+ \n+ alt\n+ <\/Edge>\n+ ),\n ])}\n <\/Graph>\n <\/div>\ndiff --git a\/package.json b\/package.json\nindex dde368a682..356b8fb7bf 100644\n--- a\/package.json\n+++ b\/package.json\n@@ -71,7 +71,7 @@\n \"ncp\": \"^2.0.0\",\n \"object-assign\": \"^4.1.1\",\n \"pacote\": \"^9.5.6\",\n- \"prettier\": \"1.13.7\",\n+ \"prettier\": \"1.19.1\",\n \"prop-types\": \"^15.6.2\",\n \"random-seed\": \"^0.3.0\",\n \"react-lifecycles-compat\": \"^3.0.2\",\ndiff --git a\/packages\/create-subscription\/src\/tests\/createSubscription-test.internal.js b\/packages\/create-subscription\/src\/tests\/createSubscription-test.internal.js\nindex fd74298c59..cd924069ab 100644\n--- a\/packages\/create-subscription\/src\/tests\/createSubscription-test.internal.js\n+++ b\/packages\/create-subscription\/src\/tests\/createSubscription-test.internal.js\n@@ -118,7 +118,10 @@ describe('createSubscription', () => {\n const Subscription = createSubscription({\n getCurrentValue: source => undefined,\n subscribe: (source, callback) => {\n- source.then(value => callback(value), value => callback(value));\n+ source.then(\n+ value => callback(value),\n+ value => callback(value),\n+ );\n \/\/ (Can't unsubscribe from a Promise)\n return () => {};\n },\n@@ -196,7 +199,10 @@ describe('createSubscription', () => {\n const Subscription = createSubscription({\n getCurrentValue: source => undefined,\n subscribe: (source, callback) => {\n- source.then(value => callback(value), value => callback(value));\n+ source.then(\n+ value => callback(value),\n+ value => callback(value),\n+ );\n \/\/ (Can't unsubscribe from a Promise)\n return () => {};\n },\ndiff --git a\/packages\/eslint-plugin-react-hooks\/src\/ExhaustiveDeps.js b\/packages\/eslint-plugin-react-hooks\/src\/ExhaustiveDeps.js\nindex 6e96ecddea..9ec5e56264 100644\n--- a\/packages\/eslint-plugin-react-hooks\/src\/ExhaustiveDeps.js\n+++ b\/packages\/eslint-plugin-react-hooks\/src\/ExhaustiveDeps.js\n@@ -613,21 +613,15 @@ export default {\n context.report({\n node: declaredDependencyNode,\n message:\n- `The ${\n- declaredDependencyNode.raw\n- } literal is not a valid dependency ` +\n+ `The ${declaredDependencyNode.raw} literal is not a valid dependency ` +\n `because it never changes. ` +\n- `Did you mean to include ${\n- declaredDependencyNode.value\n- } in the array instead?`,\n+ `Did you mean to include ${declaredDependencyNode.value} in the array instead?`,\n });\n } else {\n context.report({\n node: declaredDependencyNode,\n message:\n- `The ${\n- declaredDependencyNode.raw\n- } literal is not a valid dependency ` +\n+ `The ${declaredDependencyNode.raw} literal is not a valid dependency ` +\n 'because it never changes. You can safely remove it.',\n });\n }\n@@ -697,22 +691,16 @@ export default {\n bareFunctions.forEach(({fn, suggestUseCallback}) => {\n let message =\n `The '${fn.name.name}' function makes the dependencies of ` +\n- `${reactiveHookName} Hook (at line ${\n- declaredDependenciesNode.loc.start.line\n- }) ` +\n+ `${reactiveHookName} Hook (at line ${declaredDependenciesNode.loc.start.line}) ` +\n `change on every render.`;\n if (suggestUseCallback) {\n message +=\n ` To fix this, ` +\n- `wrap the '${\n- fn.name.name\n- }' definition into its own useCallback() Hook.`;\n+ `wrap the '${fn.name.name}' definition into its own useCallback() Hook.`;\n } else {\n message +=\n ` Move it inside the ${reactiveHookName} callback. ` +\n- `Alternatively, wrap the '${\n- fn.name.name\n- }' definition into its own useCallback() Hook.`;\n+ `Alternatively, wrap the '${fn.name.name}' definition into its own useCallback() Hook.`;\n }\n \/\/ TODO: What if the function needs to change on every render anyway?\n \/\/ Should we suggest removing effect deps as an appropriate fix too?\ndiff --git a\/packages\/legacy-events\/EventPluginUtils.js b\/packages\/legacy-events\/EventPluginUtils.js\nindex bdc5f237d8..abba8e9a3d 100644\n--- a\/packages\/legacy-events\/EventPluginUtils.js\n+++ b\/packages\/legacy-events\/EventPluginUtils.js\n@@ -40,15 +40,15 @@ if (DEV) {\n const listenersLen = listenersIsArr\n ? dispatchListeners.length\n : dispatchListeners\n- ? 1\n- : 0;\n+ ? 1\n+ : 0;\n \n const instancesIsArr = Array.isArray(dispatchInstances);\n const instancesLen = instancesIsArr\n ? dispatchInstances.length\n : dispatchInstances\n- ? 1\n- : 0;\n+ ? 1\n+ : 0;\n \n if (instancesIsArr !== listenersIsArr || instancesLen !== listenersLen) {\n console.error('EventPluginUtils: Invalid `event`.');\ndiff --git a\/packages\/legacy-events\/ReactGenericBatching.js b\/packages\/legacy-events\/ReactGenericBatching.js\nindex 765e44d257..e5f536ee15 100644\n--- a\/packages\/legacy-events\/ReactGenericBatching.js\n+++ b\/packages\/legacy-events\/ReactGenericBatching.js\n@@ -119,7 +119,8 @@ export function flushDiscreteUpdatesIfNeeded(timeStamp: number) {\n if (\n !isInsideEventHandler &&\n (!enableDeprecatedFlareAPI ||\n- (timeStamp === 0 || lastFlushedEventTimeStamp !== timeStamp))\n+ timeStamp === 0 ||\n+ lastFlushedEventTimeStamp !== timeStamp)\n ) {\n lastFlushedEventTimeStamp = timeStamp;\n flushDiscreteUpdatesImpl();\ndiff --git a\/packages\/legacy-events\/ResponderEventPlugin.js b\/packages\/legacy-events\/ResponderEventPlugin.js\nindex ff736b8aea..a5d4fe0251 100644\n--- a\/packages\/legacy-events\/ResponderEventPlugin.js\n+++ b\/packages\/legacy-events\/ResponderEventPlugin.js\n@@ -350,10 +350,10 @@ function setResponderAndExtractTransfer(\n const shouldSetEventType = isStartish(topLevelType)\n ? eventTypes.startShouldSetResponder\n : isMoveish(topLevelType)\n- ? eventTypes.moveShouldSetResponder\n- : topLevelType === TOP_SELECTION_CHANGE\n- ? eventTypes.selectionChangeShouldSetResponder\n- : eventTypes.scrollShouldSetResponder;\n+ ? eventTypes.moveShouldSetResponder\n+ : topLevelType === TOP_SELECTION_CHANGE\n+ ? eventTypes.selectionChangeShouldSetResponder\n+ : eventTypes.scrollShouldSetResponder;\n \n \/\/ TODO: stop one short of the current responder.\n const bubbleShouldSetFrom = !responderInst\n@@ -550,10 +550,10 @@ const ResponderEventPlugin = {\n const incrementalTouch = isResponderTouchStart\n ? eventTypes.responderStart\n : isResponderTouchMove\n- ? eventTypes.responderMove\n- : isResponderTouchEnd\n- ? eventTypes.responderEnd\n- : null;\n+ ? eventTypes.responderMove\n+ : isResponderTouchEnd\n+ ? eventTypes.responderEnd\n+ : null;\n \n if (incrementalTouch) {\n const gesture = ResponderSyntheticEvent.getPooled(\n@@ -577,8 +577,8 @@ const ResponderEventPlugin = {\n const finalTouch = isResponderTerminate\n ? eventTypes.responderTerminate\n : isResponderRelease\n- ? eventTypes.responderRelease\n- : null;\n+ ? eventTypes.responderRelease\n+ : null;\n if (finalTouch) {\n const finalEvent = ResponderSyntheticEvent.getPooled(\n finalTouch,\ndiff --git a\/packages\/legacy-events\/tests\/ResponderEventPlugin-test.internal.js b\/packages\/legacy-events\/tests\/ResponderEventPlugin-test.internal.js\nindex abe96a3808..a290784c95 100644\n--- a\/packages\/legacy-events\/tests\/ResponderEventPlugin-test.internal.js\n+++ b\/packages\/legacy-events\/tests\/ResponderEventPlugin-test.internal.js\n@@ -79,12 +79,12 @@ const _touchConfig = function(\n topType === 'topTouchStart'\n ? allTouchObjects\n : topType === 'topTouchMove'\n- ? allTouchObjects\n- : topType === 'topTouchEnd'\n- ? antiSubsequence(allTouchObjects, changedIndices)\n- : topType === 'topTouchCancel'\n- ? antiSubsequence(allTouchObjects, changedIndices)\n- : null;\n+ ? allTouchObjects\n+ : topType === 'topTouchEnd'\n+ ? antiSubsequence(allTouchObjects, changedIndices)\n+ : topType === 'topTouchCancel'\n+ ? antiSubsequence(allTouchObjects, changedIndices)\n+ : null;\n \n return {\n nativeEvent: touchEvent(\ndiff --git a\/packages\/react-art\/src\/tests\/ReactART-test.js b\/packages\/react-art\/src\/tests\/ReactART-test.js\nindex 1d2435436d..758415ef38 100644\n--- a\/packages\/react-art\/src\/tests\/ReactART-test.js\n+++ b\/packages\/react-art\/src\/tests\/ReactART-test.js\n@@ -214,7 +214,9 @@ describe('ReactART', () => {\n const chars = this.props.chars.split('');\n return (\n \n- {chars.map(text => )}\n+ {chars.map(text => (\n+ \n+ ))}\n <\/Surface>\n );\n }\ndiff --git a\/packages\/react-cache\/src\/tests\/ReactCache-test.internal.js b\/packages\/react-cache\/src\/tests\/ReactCache-test.internal.js\nindex 3a14dcfd9a..0a459fc9d3 100644\n--- a\/packages\/react-cache\/src\/tests\/ReactCache-test.internal.js\n+++ b\/packages\/react-cache\/src\/tests\/ReactCache-test.internal.js\n@@ -33,46 +33,53 @@ describe('ReactCache', () => {\n ReactTestRenderer = require('react-test-renderer');\n Scheduler = require('scheduler');\n \n- TextResource = createResource(([text, ms = 0]) => {\n- let listeners = null;\n- let status = 'pending';\n- let value = null;\n- return {\n- then(resolve, reject) {\n- switch (status) {\n- case 'pending': {\n- if (listeners === null) {\n- listeners = [{resolve, reject}];\n- setTimeout(() => {\n- if (textResourceShouldFail) {\n- Scheduler.unstable_yieldValue(`Promise rejected [${text}]`);\n- status = 'rejected';\n- value = new Error('Failed to load: ' + text);\n- listeners.forEach(listener => listener.reject(value));\n- } else {\n- Scheduler.unstable_yieldValue(`Promise resolved [${text}]`);\n- status = 'resolved';\n- value = text;\n- listeners.forEach(listener => listener.resolve(value));\n- }\n- }, ms);\n- } else {\n- listeners.push({resolve, reject});\n+ TextResource = createResource(\n+ ([text, ms = 0]) => {\n+ let listeners = null;\n+ let status = 'pending';\n+ let value = null;\n+ return {\n+ then(resolve, reject) {\n+ switch (status) {\n+ case 'pending': {\n+ if (listeners === null) {\n+ listeners = [{resolve, reject}];\n+ setTimeout(() => {\n+ if (textResourceShouldFail) {\n+ Scheduler.unstable_yieldValue(\n+ `Promise rejected [${text}]`,\n+ );\n+ status = 'rejected';\n+ value = new Error('Failed to load: ' + text);\n+ listeners.forEach(listener => listener.reject(value));\n+ } else {\n+ Scheduler.unstable_yieldValue(\n+ `Promise resolved [${text}]`,\n+ );\n+ status = 'resolved';\n+ value = text;\n+ listeners.forEach(listener => listener.resolve(value));\n+ }\n+ }, ms);\n+ } else {\n+ listeners.push({resolve, reject});\n+ }\n+ break;\n+ }\n+ case 'resolved': {\n+ resolve(value);\n+ break;\n+ }\n+ case 'rejected': {\n+ reject(value);\n+ break;\n }\n- break;\n- }\n- case 'resolved': {\n- resolve(value);\n- break;\n- }\n- case 'rejected': {\n- reject(value);\n- break;\n }\n- }\n- },\n- };\n- }, ([text, ms]) => text);\n+ },\n+ };\n+ },\n+ ([text, ms]) => text,\n+ );\n \n textResourceShouldFail = false;\n });\n@@ -293,26 +300,29 @@ describe('ReactCache', () => {\n \n it('if a thenable resolves multiple times, does not update the first cached value', () => {\n let resolveThenable;\n- const BadTextResource = createResource(([text, ms = 0]) => {\n- let listeners = null;\n- let value = null;\n- return {\n- then(resolve, reject) {\n- if (value !== null) {\n- resolve(value);\n- } else {\n- if (listeners === null) {\n- listeners = [resolve];\n- resolveThenable = v => {\n- listeners.forEach(listener => listener(v));\n- };\n+ const BadTextResource = createResource(\n+ ([text, ms = 0]) => {\n+ let listeners = null;\n+ let value = null;\n+ return {\n+ then(resolve, reject) {\n+ if (value !== null) {\n+ resolve(value);\n } else {\n- listeners.push(resolve);\n+ if (listeners === null) {\n+ listeners = [resolve];\n+ resolveThenable = v => {\n+ listeners.forEach(listener => listener(v));\n+ };\n+ } else {\n+ listeners.push(resolve);\n+ }\n }\n- }\n- },\n- };\n- }, ([text, ms]) => text);\n+ },\n+ };\n+ },\n+ ([text, ms]) => text,\n+ );\n \n function BadAsyncText(props) {\n const text = props.text;\ndiff --git a\/packages\/react-debug-tools\/src\/ReactDebugHooks.js b\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\nindex 34c3e43b81..0ff4d4278b 100644\n--- a\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\n+++ b\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\n@@ -116,8 +116,8 @@ function useState(\n hook !== null\n ? hook.memoizedState\n : typeof initialState === 'function'\n- ? initialState()\n- : initialState;\n+ ? initialState()\n+ : initialState;\n hookLog.push({primitive: 'State', stackError: new Error(), value: state});\n return [state, (action: BasicStateAction) => {}];\n }\ndiff --git a\/packages\/react-devtools-core\/src\/backend.js b\/packages\/react-devtools-core\/src\/backend.js\nindex df8cb0c07e..f90a68d0d2 100644\n--- a\/packages\/react-devtools-core\/src\/backend.js\n+++ b\/packages\/react-devtools-core\/src\/backend.js\n@@ -33,9 +33,7 @@ installHook(window);\n \n const hook: DevToolsHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK;\n \n-let savedComponentFilters: Array<\n- ComponentFilter,\n-> = getDefaultComponentFilters();\n+let savedComponentFilters: Array = getDefaultComponentFilters();\n \n function debug(methodName: string, ...args) {\n if (DEBUG) {\n@@ -56,8 +54,7 @@ export function connectToDevTools(options: ?ConnectOptions) {\n websocket,\n resolveRNStyle = null,\n isAppActive = () => true,\n- } =\n- options || {};\n+ } = options || {};\n \n let retryTimeoutID: TimeoutID | null = null;\n \ndiff --git a\/packages\/react-devtools-shared\/src\/tests\/inspectedElementContext-test.js b\/packages\/react-devtools-shared\/src\/tests\/inspectedElementContext-test.js\nindex f8691a5f39..82a2c5bb19 100644\n--- a\/packages\/react-devtools-shared\/src\/tests\/inspectedElementContext-test.js\n+++ b\/packages\/react-devtools-shared\/src\/tests\/inspectedElementContext-test.js\n@@ -520,9 +520,15 @@ describe('InspectedElementContext', () => {\n const exampleFunction = () => {};\n const exampleDateISO = '2019-12-31T23:42:42.000Z';\n const setShallow = new Set(['abc', 123]);\n- const mapShallow = new Map([['name', 'Brian'], ['food', 'sushi']]);\n+ const mapShallow = new Map([\n+ ['name', 'Brian'],\n+ ['food', 'sushi'],\n+ ]);\n const setOfSets = new Set([new Set(['a', 'b', 'c']), new Set([1, 2, 3])]);\n- const mapOfMaps = new Map([['first', mapShallow], ['second', mapShallow]]);\n+ const mapOfMaps = new Map([\n+ ['first', mapShallow],\n+ ['second', mapShallow],\n+ ]);\n const objectOfObjects = {\n inner: {string: 'abc', number: 123, boolean: true},\n };\ndiff --git a\/packages\/react-devtools-shared\/src\/tests\/legacy\/inspectElement-test.js b\/packages\/react-devtools-shared\/src\/tests\/legacy\/inspectElement-test.js\nindex 90b835ad23..8c0937ab9d 100644\n--- a\/packages\/react-devtools-shared\/src\/tests\/legacy\/inspectElement-test.js\n+++ b\/packages\/react-devtools-shared\/src\/tests\/legacy\/inspectElement-test.js\n@@ -151,9 +151,15 @@ describe('InspectedElementContext', () => {\n const div = document.createElement('div');\n const exampleFunction = () => {};\n const setShallow = new Set(['abc', 123]);\n- const mapShallow = new Map([['name', 'Brian'], ['food', 'sushi']]);\n+ const mapShallow = new Map([\n+ ['name', 'Brian'],\n+ ['food', 'sushi'],\n+ ]);\n const setOfSets = new Set([new Set(['a', 'b', 'c']), new Set([1, 2, 3])]);\n- const mapOfMaps = new Map([['first', mapShallow], ['second', mapShallow]]);\n+ const mapOfMaps = new Map([\n+ ['first', mapShallow],\n+ ['second', mapShallow],\n+ ]);\n const objectOfObjects = {\n inner: {string: 'abc', number: 123, boolean: true},\n };\ndiff --git a\/packages\/react-devtools-shared\/src\/tests\/legacy\/storeLegacy-v15-test.js b\/packages\/react-devtools-shared\/src\/tests\/legacy\/storeLegacy-v15-test.js\nindex ccc0d89580..fb67785213 100644\n--- a\/packages\/react-devtools-shared\/src\/tests\/legacy\/storeLegacy-v15-test.js\n+++ b\/packages\/react-devtools-shared\/src\/tests__\/legacy\/storeLegacy-v15-test.js\n@@ -63,7 +63,9 @@ describe('Store (legacy)', () => {\n );\n const Parent = ({count}) => (\n
\n- {new Array(count).fill(true).map((_, index) => )}\n+ {new Array(count).fill(true).map((_, index) => (\n+ \n+ ))}\n <\/div>\n );\n const Child = () => Hi!<\/div>;\n@@ -83,7 +85,9 @@ describe('Store (legacy)', () => {\n it('should support mount and update operations for multiple roots', () => {\n const Parent = ({count}) => (\n
\n- {new Array(count).fill(true).map((_, index) => )}\n+ {new Array(count).fill(true).map((_, index) => (\n+ \n+ ))}\n <\/div>\n );\n const Child = () =>
Hi!<\/div>;\n@@ -155,7 +159,9 @@ describe('Store (legacy)', () => {\n );\n const Parent = ({count}) => (\n
\n- {new Array(count).fill(true).map((_, index) => )}\n+ {new Array(count).fill(true).map((_, index) => (\n+ \n+ ))}\n <\/div>\n );\n const Child = () =>
Hi!<\/div>;\n@@ -261,7 +267,9 @@ describe('Store (legacy)', () => {\n it('should support mount and update operations', () => {\n const Parent = ({count}) => (\n
\n- {new Array(count).fill(true).map((_, index) => )}\n+ {new Array(count).fill(true).map((_, index) => (\n+ \n+ ))}\n <\/div>\n );\n const Child = () =>
Hi!<\/div>;\n@@ -297,7 +305,9 @@ describe('Store (legacy)', () => {\n it('should support mount and update operations for multiple roots', () => {\n const Parent = ({count}) => (\n
\n- {new Array(count).fill(true).map((_, index) => )}\n+ {new Array(count).fill(true).map((_, index) => (\n+ \n+ ))}\n <\/div>\n );\n const Child = () =>
Hi!<\/div>;\n@@ -375,7 +385,9 @@ describe('Store (legacy)', () => {\n );\n const Parent = ({count}) => (\n
\n- {new Array(count).fill(true).map((_, index) => )}\n+ {new Array(count).fill(true).map((_, index) => (\n+ \n+ ))}\n <\/div>\n );\n const Child = () =>
Hi!<\/div>;\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/views\/Highlighter\/index.js b\/packages\/react-devtools-shared\/src\/backend\/views\/Highlighter\/index.js\nindex 2080ed4d78..720e74e239 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/views\/Highlighter\/index.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/views\/Highlighter\/index.js\n@@ -103,9 +103,9 @@ export default function setupHighlighter(\n \n let nodes: ?Array = null;\n if (renderer !== null) {\n- nodes = ((renderer.findNativeNodesForFiberID(id): any): ?Array<\n- HTMLElement,\n- >);\n+ nodes = ((renderer.findNativeNodesForFiberID(\n+ id,\n+ ): any): ?Array);\n }\n \n if (nodes != null && nodes[0] != null) {\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/ContextMenu\/ContextMenu.js b\/packages\/react-devtools-shared\/src\/devtools\/ContextMenu\/ContextMenu.js\nindex 616cd4b586..891d24c051 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/ContextMenu\/ContextMenu.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/ContextMenu\/ContextMenu.js\n@@ -74,55 +74,49 @@ export default function ContextMenu({children, id}: Props) {\n };\n }, []);\n \n- useEffect(\n- () => {\n- const showMenu = ({data, pageX, pageY}) => {\n- setState({data, isVisible: true, pageX, pageY});\n- };\n- const hideMenu = () => setState(HIDDEN_STATE);\n- return registerMenu(id, showMenu, hideMenu);\n- },\n- [id],\n- );\n-\n- useLayoutEffect(\n- () => {\n- if (!state.isVisible) {\n- return;\n- }\n+ useEffect(() => {\n+ const showMenu = ({data, pageX, pageY}) => {\n+ setState({data, isVisible: true, pageX, pageY});\n+ };\n+ const hideMenu = () => setState(HIDDEN_STATE);\n+ return registerMenu(id, showMenu, hideMenu);\n+ }, [id]);\n \n- const menu = menuRef.current;\n+ useLayoutEffect(() => {\n+ if (!state.isVisible) {\n+ return;\n+ }\n \n- const hideUnlessContains = event => {\n- if (!menu.contains(event.target)) {\n- setState(HIDDEN_STATE);\n- }\n- };\n+ const menu = menuRef.current;\n \n- const hide = event => {\n+ const hideUnlessContains = event => {\n+ if (!menu.contains(event.target)) {\n setState(HIDDEN_STATE);\n- };\n+ }\n+ };\n \n- const ownerDocument = containerRef.current.ownerDocument;\n- ownerDocument.addEventListener('mousedown', hideUnlessContains);\n- ownerDocument.addEventListener('touchstart', hideUnlessContains);\n- ownerDocument.addEventListener('keydown', hideUnlessContains);\n+ const hide = event => {\n+ setState(HIDDEN_STATE);\n+ };\n \n- const ownerWindow = ownerDocument.defaultView;\n- ownerWindow.addEventListener('resize', hide);\n+ const ownerDocument = containerRef.current.ownerDocument;\n+ ownerDocument.addEventListener('mousedown', hideUnlessContains);\n+ ownerDocument.addEventListener('touchstart', hideUnlessContains);\n+ ownerDocument.addEventListener('keydown', hideUnlessContains);\n \n- respositionToFit(menu, state.pageX, state.pageY);\n+ const ownerWindow = ownerDocument.defaultView;\n+ ownerWindow.addEventListener('resize', hide);\n \n- return () => {\n- ownerDocument.removeEventListener('mousedown', hideUnlessContains);\n- ownerDocument.removeEventListener('touchstart', hideUnlessContains);\n- ownerDocument.removeEventListener('keydown', hideUnlessContains);\n+ respositionToFit(menu, state.pageX, state.pageY);\n \n- ownerWindow.removeEventListener('resize', hide);\n- };\n- },\n- [state],\n- );\n+ return () => {\n+ ownerDocument.removeEventListener('mousedown', hideUnlessContains);\n+ ownerDocument.removeEventListener('touchstart', hideUnlessContains);\n+ ownerDocument.removeEventListener('keydown', hideUnlessContains);\n+\n+ ownerWindow.removeEventListener('resize', hide);\n+ };\n+ }, [state]);\n \n if (!state.isVisible) {\n return
;\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/ContextMenu\/useContextMenu.js b\/packages\/react-devtools-shared\/src\/devtools\/ContextMenu\/useContextMenu.js\nindex 1237d6c08b..1639befc76 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/ContextMenu\/useContextMenu.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/ContextMenu\/useContextMenu.js\n@@ -23,29 +23,24 @@ export default function useContextMenu({\n |}) {\n const {showMenu} = useContext(RegistryContext);\n \n- useEffect(\n- () => {\n- if (ref.current !== null) {\n- const handleContextMenu = event => {\n- event.preventDefault();\n- event.stopPropagation();\n-\n- const pageX =\n- event.pageX || (event.touches && event.touches[0].pageX);\n- const pageY =\n- event.pageY || (event.touches && event.touches[0].pageY);\n-\n- showMenu({data, id, pageX, pageY});\n- };\n-\n- const trigger = ref.current;\n- trigger.addEventListener('contextmenu', handleContextMenu);\n-\n- return () => {\n- trigger.removeEventListener('contextmenu', handleContextMenu);\n- };\n- }\n- },\n- [data, id, showMenu],\n- );\n+ useEffect(() => {\n+ if (ref.current !== null) {\n+ const handleContextMenu = event => {\n+ event.preventDefault();\n+ event.stopPropagation();\n+\n+ const pageX = event.pageX || (event.touches && event.touches[0].pageX);\n+ const pageY = event.pageY || (event.touches && event.touches[0].pageY);\n+\n+ showMenu({data, id, pageX, pageY});\n+ };\n+\n+ const trigger = ref.current;\n+ trigger.addEventListener('contextmenu', handleContextMenu);\n+\n+ return () => {\n+ trigger.removeEventListener('contextmenu', handleContextMenu);\n+ };\n+ }\n+ }, [data, id, showMenu]);\n }\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/store.js b\/packages\/react-devtools-shared\/src\/devtools\/store.js\nindex 5cb23a4d2e..ad46873c35 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/store.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/store.js\n@@ -364,9 +364,7 @@ export default class Store extends EventEmitter<{|\n getElementAtIndex(index: number): Element | null {\n if (index < 0 || index >= this.numElements) {\n console.warn(\n- `Invalid index ${index} specified; store contains ${\n- this.numElements\n- } items.`,\n+ `Invalid index ${index} specified; store contains ${this.numElements} items.`,\n );\n \n return null;\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/utils.js b\/packages\/react-devtools-shared\/src\/devtools\/utils.js\nindex e7e8d9137c..c5a07f3146 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/utils.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/utils.js\n@@ -90,9 +90,7 @@ export function printStore(store: Store, includeWeight: boolean = false) {\n \/\/ Make sure the pretty-printed test align with the Store's reported number of total rows.\n if (rootWeight !== store.numElements) {\n throw Error(\n- `Inconsistent Store state. Individual root weights (${rootWeight}) do not match total weight (${\n- store.numElements\n- })`,\n+ `Inconsistent Store state. Individual root weights (${rootWeight}) do not match total weight (${store.numElements})`,\n );\n }\n \ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Element.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Element.js\nindex 5658711247..9f3aaed2d6 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Element.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Element.js\n@@ -193,12 +193,9 @@ type DisplayNameProps = {|\n \n function DisplayName({displayName, id}: DisplayNameProps) {\n const {searchIndex, searchResults, searchText} = useContext(TreeStateContext);\n- const isSearchResult = useMemo(\n- () => {\n- return searchResults.includes(id);\n- },\n- [id, searchResults],\n- );\n+ const isSearchResult = useMemo(() => {\n+ return searchResults.includes(id);\n+ }, [id, searchResults]);\n const isCurrentResult =\n searchIndex !== null && id === searchResults[searchIndex];\n \ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectHostNodesToggle.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectHostNodesToggle.js\nindex 2bbb704e52..7740542881 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectHostNodesToggle.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectHostNodesToggle.js\n@@ -29,15 +29,12 @@ export default function InspectHostNodesToggle() {\n [bridge],\n );\n \n- useEffect(\n- () => {\n- const onStopInspectingNative = () => setIsInspecting(false);\n- bridge.addListener('stopInspectingNative', onStopInspectingNative);\n- return () =>\n- bridge.removeListener('stopInspectingNative', onStopInspectingNative);\n- },\n- [bridge],\n- );\n+ useEffect(() => {\n+ const onStopInspectingNative = () => setIsInspecting(false);\n+ bridge.addListener('stopInspectingNative', onStopInspectingNative);\n+ return () =>\n+ bridge.removeListener('stopInspectingNative', onStopInspectingNative);\n+ }, [bridge]);\n \n return (\n (null);\n \n \/\/ This effect handler invalidates the suspense cache and schedules rendering updates with React.\n- useEffect(\n- () => {\n- const onInspectedElement = (data: InspectedElementPayload) => {\n- const {id} = data;\n-\n- let element;\n-\n- switch (data.type) {\n- case 'no-change':\n- case 'not-found':\n- \/\/ No-op\n- break;\n- case 'hydrated-path':\n- \/\/ Merge new data into previous object and invalidate cache\n- element = store.getElementByID(id);\n- if (element !== null) {\n- if (currentlyInspectedElement != null) {\n- const value = hydrateHelper(data.value, data.path);\n- const inspectedElement = {...currentlyInspectedElement};\n-\n- fillInPath(inspectedElement, data.value, data.path, value);\n-\n- resource.write(element, inspectedElement);\n-\n- \/\/ Schedule update with React if the curently-selected element has been invalidated.\n- if (id === selectedElementID) {\n- setCurrentlyInspectedElement(inspectedElement);\n- }\n+ useEffect(() => {\n+ const onInspectedElement = (data: InspectedElementPayload) => {\n+ const {id} = data;\n+\n+ let element;\n+\n+ switch (data.type) {\n+ case 'no-change':\n+ case 'not-found':\n+ \/\/ No-op\n+ break;\n+ case 'hydrated-path':\n+ \/\/ Merge new data into previous object and invalidate cache\n+ element = store.getElementByID(id);\n+ if (element !== null) {\n+ if (currentlyInspectedElement != null) {\n+ const value = hydrateHelper(data.value, data.path);\n+ const inspectedElement = {...currentlyInspectedElement};\n+\n+ fillInPath(inspectedElement, data.value, data.path, value);\n+\n+ resource.write(element, inspectedElement);\n+\n+ \/\/ Schedule update with React if the curently-selected element has been invalidated.\n+ if (id === selectedElementID) {\n+ setCurrentlyInspectedElement(inspectedElement);\n }\n }\n- break;\n- case 'full-data':\n- const {\n- canEditFunctionProps,\n- canEditHooks,\n- canToggleSuspense,\n- canViewSource,\n- hasLegacyContext,\n- source,\n- type,\n- owners,\n- context,\n- hooks,\n- props,\n- state,\n- } = ((data.value: any): InspectedElementBackend);\n-\n- const inspectedElement: InspectedElementFrontend = {\n- canEditFunctionProps,\n- canEditHooks,\n- canToggleSuspense,\n- canViewSource,\n- hasLegacyContext,\n- id,\n- source,\n- type,\n- owners:\n- owners === null\n- ? null\n- : owners.map(owner => {\n- const [\n- displayName,\n- hocDisplayNames,\n- ] = separateDisplayNameAndHOCs(\n- owner.displayName,\n- owner.type,\n- );\n- return {\n- ...owner,\n- displayName,\n- hocDisplayNames,\n- };\n- }),\n- context: hydrateHelper(context),\n- hooks: hydrateHelper(hooks),\n- props: hydrateHelper(props),\n- state: hydrateHelper(state),\n- };\n-\n- element = store.getElementByID(id);\n- if (element !== null) {\n- const request = inProgressRequests.get(element);\n- if (request != null) {\n- inProgressRequests.delete(element);\n- batchedUpdates(() => {\n- request.resolveFn(inspectedElement);\n- setCurrentlyInspectedElement(inspectedElement);\n- });\n- } else {\n- resource.write(element, inspectedElement);\n-\n- \/\/ Schedule update with React if the curently-selected element has been invalidated.\n- if (id === selectedElementID) {\n- setCurrentlyInspectedElement(inspectedElement);\n- }\n+ }\n+ break;\n+ case 'full-data':\n+ const {\n+ canEditFunctionProps,\n+ canEditHooks,\n+ canToggleSuspense,\n+ canViewSource,\n+ hasLegacyContext,\n+ source,\n+ type,\n+ owners,\n+ context,\n+ hooks,\n+ props,\n+ state,\n+ } = ((data.value: any): InspectedElementBackend);\n+\n+ const inspectedElement: InspectedElementFrontend = {\n+ canEditFunctionProps,\n+ canEditHooks,\n+ canToggleSuspense,\n+ canViewSource,\n+ hasLegacyContext,\n+ id,\n+ source,\n+ type,\n+ owners:\n+ owners === null\n+ ? null\n+ : owners.map(owner => {\n+ const [\n+ displayName,\n+ hocDisplayNames,\n+ ] = separateDisplayNameAndHOCs(\n+ owner.displayName,\n+ owner.type,\n+ );\n+ return {\n+ ...owner,\n+ displayName,\n+ hocDisplayNames,\n+ };\n+ }),\n+ context: hydrateHelper(context),\n+ hooks: hydrateHelper(hooks),\n+ props: hydrateHelper(props),\n+ state: hydrateHelper(state),\n+ };\n+\n+ element = store.getElementByID(id);\n+ if (element !== null) {\n+ const request = inProgressRequests.get(element);\n+ if (request != null) {\n+ inProgressRequests.delete(element);\n+ batchedUpdates(() => {\n+ request.resolveFn(inspectedElement);\n+ setCurrentlyInspectedElement(inspectedElement);\n+ });\n+ } else {\n+ resource.write(element, inspectedElement);\n+\n+ \/\/ Schedule update with React if the curently-selected element has been invalidated.\n+ if (id === selectedElementID) {\n+ setCurrentlyInspectedElement(inspectedElement);\n }\n }\n- break;\n- default:\n- break;\n- }\n- };\n+ }\n+ break;\n+ default:\n+ break;\n+ }\n+ };\n \n- bridge.addListener('inspectedElement', onInspectedElement);\n- return () =>\n- bridge.removeListener('inspectedElement', onInspectedElement);\n- },\n- [bridge, currentlyInspectedElement, selectedElementID, store],\n- );\n+ bridge.addListener('inspectedElement', onInspectedElement);\n+ return () => bridge.removeListener('inspectedElement', onInspectedElement);\n+ }, [bridge, currentlyInspectedElement, selectedElementID, store]);\n \n \/\/ This effect handler polls for updates on the currently selected element.\n- useEffect(\n- () => {\n- if (selectedElementID === null) {\n- return () => {};\n- }\n+ useEffect(() => {\n+ if (selectedElementID === null) {\n+ return () => {};\n+ }\n \n- const rendererID = store.getRendererIDForElement(selectedElementID);\n+ const rendererID = store.getRendererIDForElement(selectedElementID);\n \n- let timeoutID: TimeoutID | null = null;\n+ let timeoutID: TimeoutID | null = null;\n \n- const sendRequest = () => {\n- timeoutID = null;\n+ const sendRequest = () => {\n+ timeoutID = null;\n \n- if (rendererID !== null) {\n- bridge.send('inspectElement', {id: selectedElementID, rendererID});\n- }\n- };\n-\n- \/\/ Send the initial inspection request.\n- \/\/ We'll poll for an update in the response handler below.\n- sendRequest();\n-\n- const onInspectedElement = (data: InspectedElementPayload) => {\n- \/\/ If this is the element we requested, wait a little bit and then ask for another update.\n- if (data.id === selectedElementID) {\n- switch (data.type) {\n- case 'no-change':\n- case 'full-data':\n- case 'hydrated-path':\n- if (timeoutID !== null) {\n- clearTimeout(timeoutID);\n- }\n- timeoutID = setTimeout(sendRequest, 1000);\n- break;\n- default:\n- break;\n- }\n+ if (rendererID !== null) {\n+ bridge.send('inspectElement', {id: selectedElementID, rendererID});\n+ }\n+ };\n+\n+ \/\/ Send the initial inspection request.\n+ \/\/ We'll poll for an update in the response handler below.\n+ sendRequest();\n+\n+ const onInspectedElement = (data: InspectedElementPayload) => {\n+ \/\/ If this is the element we requested, wait a little bit and then ask for another update.\n+ if (data.id === selectedElementID) {\n+ switch (data.type) {\n+ case 'no-change':\n+ case 'full-data':\n+ case 'hydrated-path':\n+ if (timeoutID !== null) {\n+ clearTimeout(timeoutID);\n+ }\n+ timeoutID = setTimeout(sendRequest, 1000);\n+ break;\n+ default:\n+ break;\n }\n- };\n+ }\n+ };\n \n- bridge.addListener('inspectedElement', onInspectedElement);\n+ bridge.addListener('inspectedElement', onInspectedElement);\n \n- return () => {\n- bridge.removeListener('inspectedElement', onInspectedElement);\n+ return () => {\n+ bridge.removeListener('inspectedElement', onInspectedElement);\n \n- if (timeoutID !== null) {\n- clearTimeout(timeoutID);\n- }\n- };\n- },\n- [bridge, selectedElementID, store],\n- );\n+ if (timeoutID !== null) {\n+ clearTimeout(timeoutID);\n+ }\n+ };\n+ }, [bridge, selectedElementID, store]);\n \n const value = useMemo(\n () => ({\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/KeyValue.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/KeyValue.js\nindex f199078005..e45a5488c4 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/KeyValue.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/KeyValue.js\n@@ -55,20 +55,17 @@ export default function KeyValue({\n value[meta.inspectable] &&\n value[meta.size] !== 0;\n \n- useEffect(\n- () => {\n- if (\n- isInspectable &&\n- isOpen &&\n- !prevIsOpenRef.current &&\n- typeof inspectPath === 'function'\n- ) {\n- inspectPath(path);\n- }\n- prevIsOpenRef.current = isOpen;\n- },\n- [inspectPath, isInspectable, isOpen, path],\n- );\n+ useEffect(() => {\n+ if (\n+ isInspectable &&\n+ isOpen &&\n+ !prevIsOpenRef.current &&\n+ typeof inspectPath === 'function'\n+ ) {\n+ inspectPath(path);\n+ }\n+ prevIsOpenRef.current = isOpen;\n+ }, [inspectPath, isInspectable, isOpen, path]);\n \n const toggleIsOpen = () => setIsOpen(prevIsOpen => !prevIsOpen);\n \ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/NativeStyleEditor\/AutoSizeInput.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/NativeStyleEditor\/AutoSizeInput.js\nindex 4adcae74fb..03d6b47b51 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/NativeStyleEditor\/AutoSizeInput.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/NativeStyleEditor\/AutoSizeInput.js\n@@ -65,27 +65,24 @@ export default function AutoSizeInput({\n }, []);\n \n \/\/ Resize input any time text changes\n- useLayoutEffect(\n- () => {\n- if (hiddenDivRef.current === null) {\n- return;\n- }\n+ useLayoutEffect(() => {\n+ if (hiddenDivRef.current === null) {\n+ return;\n+ }\n \n- const scrollWidth = hiddenDivRef.current.getBoundingClientRect().width;\n- if (!scrollWidth) {\n- return;\n- }\n+ const scrollWidth = hiddenDivRef.current.getBoundingClientRect().width;\n+ if (!scrollWidth) {\n+ return;\n+ }\n \n- \/\/ Adding an extra pixel avoids a slight horizontal scroll when changing text selection\/cursor.\n- \/\/ Not sure why this is, but the old DevTools did a similar thing.\n- const targetWidth = Math.ceil(scrollWidth) + 1;\n+ \/\/ Adding an extra pixel avoids a slight horizontal scroll when changing text selection\/cursor.\n+ \/\/ Not sure why this is, but the old DevTools did a similar thing.\n+ const targetWidth = Math.ceil(scrollWidth) + 1;\n \n- if (inputRef.current !== null) {\n- inputRef.current.style.width = `${targetWidth}px`;\n- }\n- },\n- [value],\n- );\n+ if (inputRef.current !== null) {\n+ inputRef.current.style.width = `${targetWidth}px`;\n+ }\n+ }, [value]);\n \n const isEmpty = value === '' || value === '\"\"';\n \ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/NativeStyleEditor\/context.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/NativeStyleEditor\/context.js\nindex 52b1a285dd..2542957f88 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/NativeStyleEditor\/context.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/NativeStyleEditor\/context.js\n@@ -102,94 +102,88 @@ function NativeStyleContextController({children}: Props) {\n ] = useState(null);\n \n \/\/ This effect handler invalidates the suspense cache and schedules rendering updates with React.\n- useEffect(\n- () => {\n- const onStyleAndLayout = ({id, layout, style}: StyleAndLayoutBackend) => {\n- let element = store.getElementByID(id);\n- if (element !== null) {\n- const styleAndLayout: StyleAndLayoutFrontend = {\n- layout,\n- style,\n- };\n- const request = inProgressRequests.get(element);\n- if (request != null) {\n- inProgressRequests.delete(element);\n- batchedUpdates(() => {\n- request.resolveFn(styleAndLayout);\n- setCurrentStyleAndLayout(styleAndLayout);\n- });\n- } else {\n- resource.write(element, styleAndLayout);\n-\n- \/\/ Schedule update with React if the currently-selected element has been invalidated.\n- if (id === selectedElementID) {\n- setCurrentStyleAndLayout(styleAndLayout);\n- }\n+ useEffect(() => {\n+ const onStyleAndLayout = ({id, layout, style}: StyleAndLayoutBackend) => {\n+ let element = store.getElementByID(id);\n+ if (element !== null) {\n+ const styleAndLayout: StyleAndLayoutFrontend = {\n+ layout,\n+ style,\n+ };\n+ const request = inProgressRequests.get(element);\n+ if (request != null) {\n+ inProgressRequests.delete(element);\n+ batchedUpdates(() => {\n+ request.resolveFn(styleAndLayout);\n+ setCurrentStyleAndLayout(styleAndLayout);\n+ });\n+ } else {\n+ resource.write(element, styleAndLayout);\n+\n+ \/\/ Schedule update with React if the currently-selected element has been invalidated.\n+ if (id === selectedElementID) {\n+ setCurrentStyleAndLayout(styleAndLayout);\n }\n }\n- };\n-\n- bridge.addListener('NativeStyleEditor_styleAndLayout', onStyleAndLayout);\n- return () =>\n- bridge.removeListener(\n- 'NativeStyleEditor_styleAndLayout',\n- onStyleAndLayout,\n- );\n- },\n- [bridge, currentStyleAndLayout, selectedElementID, store],\n- );\n-\n- \/\/ This effect handler polls for updates on the currently selected element.\n- useEffect(\n- () => {\n- if (selectedElementID === null) {\n- return () => {};\n }\n+ };\n \n- const rendererID = store.getRendererIDForElement(selectedElementID);\n-\n- let timeoutID: TimeoutID | null = null;\n+ bridge.addListener('NativeStyleEditor_styleAndLayout', onStyleAndLayout);\n+ return () =>\n+ bridge.removeListener(\n+ 'NativeStyleEditor_styleAndLayout',\n+ onStyleAndLayout,\n+ );\n+ }, [bridge, currentStyleAndLayout, selectedElementID, store]);\n \n- const sendRequest = () => {\n- timeoutID = null;\n+ \/\/ This effect handler polls for updates on the currently selected element.\n+ useEffect(() => {\n+ if (selectedElementID === null) {\n+ return () => {};\n+ }\n \n- if (rendererID !== null) {\n- bridge.send('NativeStyleEditor_measure', {\n- id: selectedElementID,\n- rendererID,\n- });\n- }\n- };\n+ const rendererID = store.getRendererIDForElement(selectedElementID);\n \n- \/\/ Send the initial measurement request.\n- \/\/ We'll poll for an update in the response handler below.\n- sendRequest();\n+ let timeoutID: TimeoutID | null = null;\n \n- const onStyleAndLayout = ({id}: StyleAndLayoutBackend) => {\n- \/\/ If this is the element we requested, wait a little bit and then ask for another update.\n- if (id === selectedElementID) {\n- if (timeoutID !== null) {\n- clearTimeout(timeoutID);\n- }\n- timeoutID = setTimeout(sendRequest, 1000);\n- }\n- };\n+ const sendRequest = () => {\n+ timeoutID = null;\n \n- bridge.addListener('NativeStyleEditor_styleAndLayout', onStyleAndLayout);\n+ if (rendererID !== null) {\n+ bridge.send('NativeStyleEditor_measure', {\n+ id: selectedElementID,\n+ rendererID,\n+ });\n+ }\n+ };\n \n- return () => {\n- bridge.removeListener(\n- 'NativeStyleEditor_styleAndLayout',\n- onStyleAndLayout,\n- );\n+ \/\/ Send the initial measurement request.\n+ \/\/ We'll poll for an update in the response handler below.\n+ sendRequest();\n \n+ const onStyleAndLayout = ({id}: StyleAndLayoutBackend) => {\n+ \/\/ If this is the element we requested, wait a little bit and then ask for another update.\n+ if (id === selectedElementID) {\n if (timeoutID !== null) {\n clearTimeout(timeoutID);\n }\n- };\n- },\n- [bridge, selectedElementID, store],\n- );\n+ timeoutID = setTimeout(sendRequest, 1000);\n+ }\n+ };\n+\n+ bridge.addListener('NativeStyleEditor_styleAndLayout', onStyleAndLayout);\n+\n+ return () => {\n+ bridge.removeListener(\n+ 'NativeStyleEditor_styleAndLayout',\n+ onStyleAndLayout,\n+ );\n+\n+ if (timeoutID !== null) {\n+ clearTimeout(timeoutID);\n+ }\n+ };\n+ }, [bridge, selectedElementID, store]);\n \n const value = useMemo(\n () => ({getStyleAndLayout}),\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/OwnersListContext.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/OwnersListContext.js\nindex c1faab02da..aae74b4f84 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/OwnersListContext.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/OwnersListContext.js\n@@ -73,60 +73,51 @@ function OwnersListContextController({children}: Props) {\n [store],\n );\n \n- useEffect(\n- () => {\n- const onOwnersList = (ownersList: OwnersList) => {\n- const id = ownersList.id;\n-\n- const element = store.getElementByID(id);\n- if (element !== null) {\n- const request = inProgressRequests.get(element);\n- if (request != null) {\n- inProgressRequests.delete(element);\n-\n- request.resolveFn(\n- ownersList.owners === null\n- ? null\n- : ownersList.owners.map(owner => {\n- const [\n- displayNameWithoutHOCs,\n- hocDisplayNames,\n- ] = separateDisplayNameAndHOCs(\n- owner.displayName,\n- owner.type,\n- );\n-\n- return {\n- ...owner,\n- displayName: displayNameWithoutHOCs,\n- hocDisplayNames,\n- };\n- }),\n- );\n- }\n+ useEffect(() => {\n+ const onOwnersList = (ownersList: OwnersList) => {\n+ const id = ownersList.id;\n+\n+ const element = store.getElementByID(id);\n+ if (element !== null) {\n+ const request = inProgressRequests.get(element);\n+ if (request != null) {\n+ inProgressRequests.delete(element);\n+\n+ request.resolveFn(\n+ ownersList.owners === null\n+ ? null\n+ : ownersList.owners.map(owner => {\n+ const [\n+ displayNameWithoutHOCs,\n+ hocDisplayNames,\n+ ] = separateDisplayNameAndHOCs(owner.displayName, owner.type);\n+\n+ return {\n+ ...owner,\n+ displayName: displayNameWithoutHOCs,\n+ hocDisplayNames,\n+ };\n+ }),\n+ );\n }\n- };\n+ }\n+ };\n \n- bridge.addListener('ownersList', onOwnersList);\n- return () => bridge.removeListener('ownersList', onOwnersList);\n- },\n- [bridge, store],\n- );\n+ bridge.addListener('ownersList', onOwnersList);\n+ return () => bridge.removeListener('ownersList', onOwnersList);\n+ }, [bridge, store]);\n \n \/\/ This effect requests an updated owners list any time the selected owner changes\n- useEffect(\n- () => {\n- if (ownerID !== null) {\n- const rendererID = store.getRendererIDForElement(ownerID);\n- if (rendererID !== null) {\n- bridge.send('getOwnersList', {id: ownerID, rendererID});\n- }\n+ useEffect(() => {\n+ if (ownerID !== null) {\n+ const rendererID = store.getRendererIDForElement(ownerID);\n+ if (rendererID !== null) {\n+ bridge.send('getOwnersList', {id: ownerID, rendererID});\n }\n+ }\n \n- return () => {};\n- },\n- [bridge, ownerID, store],\n- );\n+ return () => {};\n+ }, [bridge, ownerID, store]);\n \n return (\n \ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/OwnersStack.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/OwnersStack.js\nindex 669a12e349..fa627299fb 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/OwnersStack.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/OwnersStack.js\n@@ -128,30 +128,27 @@ export default function OwnerStack() {\n \n const selectedOwner = owners[selectedIndex];\n \n- useLayoutEffect(\n- () => {\n- \/\/ If we're already overflowing, then we don't need to re-measure items.\n- \/\/ That's because once the owners stack is open, it can only get larger (by driling in).\n- \/\/ A totally new stack can only be reached by exiting this mode and re-entering it.\n- if (elementsBarRef.current === null || isOverflowing) {\n- return () => {};\n- }\n-\n- let totalWidth = 0;\n- for (let i = 0; i < owners.length; i++) {\n- const element = elementsBarRef.current.children[i];\n- const computedStyle = getComputedStyle(element);\n-\n- totalWidth +=\n- element.offsetWidth +\n- parseInt(computedStyle.marginLeft, 10) +\n- parseInt(computedStyle.marginRight, 10);\n- }\n-\n- setElementsTotalWidth(totalWidth);\n- },\n- [elementsBarRef, isOverflowing, owners.length],\n- );\n+ useLayoutEffect(() => {\n+ \/\/ If we're already overflowing, then we don't need to re-measure items.\n+ \/\/ That's because once the owners stack is open, it can only get larger (by driling in).\n+ \/\/ A totally new stack can only be reached by exiting this mode and re-entering it.\n+ if (elementsBarRef.current === null || isOverflowing) {\n+ return () => {};\n+ }\n+\n+ let totalWidth = 0;\n+ for (let i = 0; i < owners.length; i++) {\n+ const element = elementsBarRef.current.children[i];\n+ const computedStyle = getComputedStyle(element);\n+\n+ totalWidth +=\n+ element.offsetWidth +\n+ parseInt(computedStyle.marginLeft, 10) +\n+ parseInt(computedStyle.marginRight, 10);\n+ }\n+\n+ setElementsTotalWidth(totalWidth);\n+ }, [elementsBarRef, isOverflowing, owners.length]);\n \n return (\n
\n@@ -255,14 +252,11 @@ function ElementView({isSelected, owner, selectOwner}: ElementViewProps) {\n const {displayName, hocDisplayNames, type} = owner;\n const isInStore = store.containsElement(owner.id);\n \n- const handleChange = useCallback(\n- () => {\n- if (isInStore) {\n- selectOwner(owner);\n- }\n- },\n- [isInStore, selectOwner, owner],\n- );\n+ const handleChange = useCallback(() => {\n+ if (isInStore) {\n+ selectOwner(owner);\n+ }\n+ }, [isInStore, selectOwner, owner]);\n \n return (\n {\n- if (inputRef.current === null) {\n- return () => {};\n- }\n+ useEffect(() => {\n+ if (inputRef.current === null) {\n+ return () => {};\n+ }\n \n- const handleWindowKey = (event: KeyboardEvent) => {\n- const {key, metaKey} = event;\n- if (key === 'f' && metaKey) {\n- if (inputRef.current !== null) {\n- inputRef.current.focus();\n- event.preventDefault();\n- event.stopPropagation();\n- }\n+ const handleWindowKey = (event: KeyboardEvent) => {\n+ const {key, metaKey} = event;\n+ if (key === 'f' && metaKey) {\n+ if (inputRef.current !== null) {\n+ inputRef.current.focus();\n+ event.preventDefault();\n+ event.stopPropagation();\n }\n- };\n+ }\n+ };\n \n- \/\/ It's important to listen to the ownerDocument to support the browser extension.\n- \/\/ Here we use portals to render individual tabs (e.g. Profiler),\n- \/\/ and the root document might belong to a different window.\n- const ownerDocument = inputRef.current.ownerDocument;\n- ownerDocument.addEventListener('keydown', handleWindowKey);\n+ \/\/ It's important to listen to the ownerDocument to support the browser extension.\n+ \/\/ Here we use portals to render individual tabs (e.g. Profiler),\n+ \/\/ and the root document might belong to a different window.\n+ const ownerDocument = inputRef.current.ownerDocument;\n+ ownerDocument.addEventListener('keydown', handleWindowKey);\n \n- return () =>\n- ownerDocument.removeEventListener('keydown', handleWindowKey);\n- },\n- [inputRef],\n- );\n+ return () => ownerDocument.removeEventListener('keydown', handleWindowKey);\n+ }, [inputRef]);\n \n return (\n
\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/SelectedElement.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/SelectedElement.js\nindex 055378efca..432f5a5436 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/SelectedElement.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/SelectedElement.js\n@@ -72,51 +72,42 @@ export default function SelectedElement(_: Props) {\n const inspectedElement =\n inspectedElementID != null ? getInspectedElement(inspectedElementID) : null;\n \n- const highlightElement = useCallback(\n- () => {\n- if (element !== null && inspectedElementID !== null) {\n- const rendererID = store.getRendererIDForElement(inspectedElementID);\n- if (rendererID !== null) {\n- bridge.send('highlightNativeElement', {\n- displayName: element.displayName,\n- hideAfterTimeout: true,\n- id: inspectedElementID,\n- openNativeElementsPanel: true,\n- rendererID,\n- scrollIntoView: true,\n- });\n- }\n- }\n- },\n- [bridge, element, inspectedElementID, store],\n- );\n-\n- const logElement = useCallback(\n- () => {\n- if (inspectedElementID !== null) {\n- const rendererID = store.getRendererIDForElement(inspectedElementID);\n- if (rendererID !== null) {\n- bridge.send('logElementToConsole', {\n- id: inspectedElementID,\n- rendererID,\n- });\n- }\n+ const highlightElement = useCallback(() => {\n+ if (element !== null && inspectedElementID !== null) {\n+ const rendererID = store.getRendererIDForElement(inspectedElementID);\n+ if (rendererID !== null) {\n+ bridge.send('highlightNativeElement', {\n+ displayName: element.displayName,\n+ hideAfterTimeout: true,\n+ id: inspectedElementID,\n+ openNativeElementsPanel: true,\n+ rendererID,\n+ scrollIntoView: true,\n+ });\n }\n- },\n- [bridge, inspectedElementID, store],\n- );\n+ }\n+ }, [bridge, element, inspectedElementID, store]);\n \n- const viewSource = useCallback(\n- () => {\n- if (viewElementSourceFunction != null && inspectedElement !== null) {\n- viewElementSourceFunction(\n- inspectedElement.id,\n- ((inspectedElement: any): InspectedElement),\n- );\n+ const logElement = useCallback(() => {\n+ if (inspectedElementID !== null) {\n+ const rendererID = store.getRendererIDForElement(inspectedElementID);\n+ if (rendererID !== null) {\n+ bridge.send('logElementToConsole', {\n+ id: inspectedElementID,\n+ rendererID,\n+ });\n }\n- },\n- [inspectedElement, viewElementSourceFunction],\n- );\n+ }\n+ }, [bridge, inspectedElementID, store]);\n+\n+ const viewSource = useCallback(() => {\n+ if (viewElementSourceFunction != null && inspectedElement !== null) {\n+ viewElementSourceFunction(\n+ inspectedElement.id,\n+ ((inspectedElement: any): InspectedElement),\n+ );\n+ }\n+ }, [inspectedElement, viewElementSourceFunction]);\n \n \/\/ In some cases (e.g. FB internal usage) the standalone shell might not be able to view the source.\n \/\/ To detect this case, we defer to an injected helper function (if present).\n@@ -137,56 +128,53 @@ export default function SelectedElement(_: Props) {\n inspectedElement != null && inspectedElement.canToggleSuspense;\n \n \/\/ TODO (suspense toggle) Would be nice to eventually use a two setState pattern here as well.\n- const toggleSuspended = useCallback(\n- () => {\n- let nearestSuspenseElement = null;\n- let currentElement = element;\n- while (currentElement !== null) {\n- if (currentElement.type === ElementTypeSuspense) {\n- nearestSuspenseElement = currentElement;\n- break;\n- } else if (currentElement.parentID > 0) {\n- currentElement = store.getElementByID(currentElement.parentID);\n- } else {\n- currentElement = null;\n- }\n+ const toggleSuspended = useCallback(() => {\n+ let nearestSuspenseElement = null;\n+ let currentElement = element;\n+ while (currentElement !== null) {\n+ if (currentElement.type === ElementTypeSuspense) {\n+ nearestSuspenseElement = currentElement;\n+ break;\n+ } else if (currentElement.parentID > 0) {\n+ currentElement = store.getElementByID(currentElement.parentID);\n+ } else {\n+ currentElement = null;\n }\n+ }\n \n- \/\/ If we didn't find a Suspense ancestor, we can't suspend.\n- \/\/ Instead we can show a warning to the user.\n- if (nearestSuspenseElement === null) {\n- modalDialogDispatch({\n- type: 'SHOW',\n- content: ,\n+ \/\/ If we didn't find a Suspense ancestor, we can't suspend.\n+ \/\/ Instead we can show a warning to the user.\n+ if (nearestSuspenseElement === null) {\n+ modalDialogDispatch({\n+ type: 'SHOW',\n+ content: ,\n+ });\n+ } else {\n+ const nearestSuspenseElementID = nearestSuspenseElement.id;\n+\n+ \/\/ If we're suspending from an arbitary (non-Suspense) component, select the nearest Suspense element in the Tree.\n+ \/\/ This way when the fallback UI is shown and the current element is hidden, something meaningful is selected.\n+ if (nearestSuspenseElement !== element) {\n+ dispatch({\n+ type: 'SELECT_ELEMENT_BY_ID',\n+ payload: nearestSuspenseElementID,\n });\n- } else {\n- const nearestSuspenseElementID = nearestSuspenseElement.id;\n-\n- \/\/ If we're suspending from an arbitary (non-Suspense) component, select the nearest Suspense element in the Tree.\n- \/\/ This way when the fallback UI is shown and the current element is hidden, something meaningful is selected.\n- if (nearestSuspenseElement !== element) {\n- dispatch({\n- type: 'SELECT_ELEMENT_BY_ID',\n- payload: nearestSuspenseElementID,\n- });\n- }\n-\n- const rendererID = store.getRendererIDForElement(\n- nearestSuspenseElementID,\n- );\n-\n- \/\/ Toggle suspended\n- if (rendererID !== null) {\n- bridge.send('overrideSuspense', {\n- id: nearestSuspenseElementID,\n- rendererID,\n- forceFallback: !isSuspended,\n- });\n- }\n }\n- },\n- [bridge, dispatch, element, isSuspended, modalDialogDispatch, store],\n- );\n+\n+ const rendererID = store.getRendererIDForElement(\n+ nearestSuspenseElementID,\n+ );\n+\n+ \/\/ Toggle suspended\n+ if (rendererID !== null) {\n+ bridge.send('overrideSuspense', {\n+ id: nearestSuspenseElementID,\n+ rendererID,\n+ forceFallback: !isSuspended,\n+ });\n+ }\n+ }\n+ }, [bridge, dispatch, element, isSuspended, modalDialogDispatch, store]);\n \n if (element === null) {\n return (\n@@ -417,23 +405,21 @@ function InspectedElementView({\n \n \n \n- {ownerID === null &&\n- owners !== null &&\n- owners.length > 0 && (\n-
\n-
rendered by<\/div>\n- {owners.map(owner => (\n- \n- ))}\n- <\/div>\n- )}\n+ {ownerID === null && owners !== null && owners.length > 0 && (\n+
\n+
rendered by<\/div>\n+ {owners.map(owner => (\n+ \n+ ))}\n+ <\/div>\n+ )}\n \n {source !== null && (\n \ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Tree.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Tree.js\nindex 2c65df8fa1..fe03d443ff 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Tree.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/Tree.js\n@@ -89,22 +89,16 @@ export default function Tree(props: Props) {\n \n \/\/ Picking an element in the inspector should put focus into the tree.\n \/\/ This ensures that keyboard navigation works right after picking a node.\n- useEffect(\n- () => {\n- function handleStopInspectingNative(didSelectNode) {\n- if (didSelectNode && focusTargetRef.current !== null) {\n- focusTargetRef.current.focus();\n- }\n+ useEffect(() => {\n+ function handleStopInspectingNative(didSelectNode) {\n+ if (didSelectNode && focusTargetRef.current !== null) {\n+ focusTargetRef.current.focus();\n }\n- bridge.addListener('stopInspectingNative', handleStopInspectingNative);\n- return () =>\n- bridge.removeListener(\n- 'stopInspectingNative',\n- handleStopInspectingNative,\n- );\n- },\n- [bridge],\n- );\n+ }\n+ bridge.addListener('stopInspectingNative', handleStopInspectingNative);\n+ return () =>\n+ bridge.removeListener('stopInspectingNative', handleStopInspectingNative);\n+ }, [bridge]);\n \n \/\/ This ref is passed down the context to elements.\n \/\/ It lets them avoid autoscrolling to the same item many times\n@@ -112,93 +106,87 @@ export default function Tree(props: Props) {\n const lastScrolledIDRef = useRef(null);\n \n \/\/ Navigate the tree with up\/down arrow keys.\n- useEffect(\n- () => {\n- if (treeRef.current === null) {\n- return () => {};\n+ useEffect(() => {\n+ if (treeRef.current === null) {\n+ return () => {};\n+ }\n+\n+ const handleKeyDown = (event: KeyboardEvent) => {\n+ if ((event: any).target.tagName === 'INPUT' || event.defaultPrevented) {\n+ return;\n }\n \n- const handleKeyDown = (event: KeyboardEvent) => {\n- if ((event: any).target.tagName === 'INPUT' || event.defaultPrevented) {\n- return;\n- }\n-\n- \/\/ TODO We should ignore arrow keys if the focus is outside of DevTools.\n- \/\/ Otherwise the inline (embedded) DevTools might change selection unexpectedly,\n- \/\/ e.g. when a text input or a select has focus.\n-\n- let element;\n- switch (event.key) {\n- case 'ArrowDown':\n- event.preventDefault();\n- dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'});\n- break;\n- case 'ArrowLeft':\n- event.preventDefault();\n- element =\n- selectedElementID !== null\n- ? store.getElementByID(selectedElementID)\n- : null;\n- if (element !== null) {\n- if (element.children.length > 0 && !element.isCollapsed) {\n- store.toggleIsCollapsed(element.id, true);\n- } else {\n- dispatch({type: 'SELECT_PARENT_ELEMENT_IN_TREE'});\n- }\n+ \/\/ TODO We should ignore arrow keys if the focus is outside of DevTools.\n+ \/\/ Otherwise the inline (embedded) DevTools might change selection unexpectedly,\n+ \/\/ e.g. when a text input or a select has focus.\n+\n+ let element;\n+ switch (event.key) {\n+ case 'ArrowDown':\n+ event.preventDefault();\n+ dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'});\n+ break;\n+ case 'ArrowLeft':\n+ event.preventDefault();\n+ element =\n+ selectedElementID !== null\n+ ? store.getElementByID(selectedElementID)\n+ : null;\n+ if (element !== null) {\n+ if (element.children.length > 0 && !element.isCollapsed) {\n+ store.toggleIsCollapsed(element.id, true);\n+ } else {\n+ dispatch({type: 'SELECT_PARENT_ELEMENT_IN_TREE'});\n }\n- break;\n- case 'ArrowRight':\n- event.preventDefault();\n- element =\n- selectedElementID !== null\n- ? store.getElementByID(selectedElementID)\n- : null;\n- if (element !== null) {\n- if (element.children.length > 0 && element.isCollapsed) {\n- store.toggleIsCollapsed(element.id, false);\n- } else {\n- dispatch({type: 'SELECT_CHILD_ELEMENT_IN_TREE'});\n- }\n+ }\n+ break;\n+ case 'ArrowRight':\n+ event.preventDefault();\n+ element =\n+ selectedElementID !== null\n+ ? store.getElementByID(selectedElementID)\n+ : null;\n+ if (element !== null) {\n+ if (element.children.length > 0 && element.isCollapsed) {\n+ store.toggleIsCollapsed(element.id, false);\n+ } else {\n+ dispatch({type: 'SELECT_CHILD_ELEMENT_IN_TREE'});\n }\n- break;\n- case 'ArrowUp':\n- event.preventDefault();\n- dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'});\n- break;\n- default:\n- return;\n- }\n- setIsNavigatingWithKeyboard(true);\n- };\n-\n- \/\/ It's important to listen to the ownerDocument to support the browser extension.\n- \/\/ Here we use portals to render individual tabs (e.g. Profiler),\n- \/\/ and the root document might belong to a different window.\n- const ownerDocument = treeRef.current.ownerDocument;\n- ownerDocument.addEventListener('keydown', handleKeyDown);\n-\n- return () => {\n- ownerDocument.removeEventListener('keydown', handleKeyDown);\n- };\n- },\n- [dispatch, selectedElementID, store],\n- );\n+ }\n+ break;\n+ case 'ArrowUp':\n+ event.preventDefault();\n+ dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'});\n+ break;\n+ default:\n+ return;\n+ }\n+ setIsNavigatingWithKeyboard(true);\n+ };\n+\n+ \/\/ It's important to listen to the ownerDocument to support the browser extension.\n+ \/\/ Here we use portals to render individual tabs (e.g. Profiler),\n+ \/\/ and the root document might belong to a different window.\n+ const ownerDocument = treeRef.current.ownerDocument;\n+ ownerDocument.addEventListener('keydown', handleKeyDown);\n+\n+ return () => {\n+ ownerDocument.removeEventListener('keydown', handleKeyDown);\n+ };\n+ }, [dispatch, selectedElementID, store]);\n \n \/\/ Focus management.\n const handleBlur = useCallback(() => setTreeFocused(false), []);\n- const handleFocus = useCallback(\n- () => {\n- setTreeFocused(true);\n-\n- if (selectedElementIndex === null && numElements > 0) {\n- dispatch({\n- type: 'SELECT_ELEMENT_AT_INDEX',\n- payload: 0,\n- });\n- }\n- },\n- [dispatch, numElements, selectedElementIndex],\n- );\n+ const handleFocus = useCallback(() => {\n+ setTreeFocused(true);\n+\n+ if (selectedElementIndex === null && numElements > 0) {\n+ dispatch({\n+ type: 'SELECT_ELEMENT_AT_INDEX',\n+ payload: 0,\n+ });\n+ }\n+ }, [dispatch, numElements, selectedElementIndex]);\n \n const handleKeyPress = useCallback(\n event => {\n@@ -237,34 +225,31 @@ export default function Tree(props: Props) {\n \/\/ If we switch the selected element while using the keyboard,\n \/\/ start highlighting it in the DOM instead of the last hovered node.\n const searchRef = useRef({searchIndex, searchResults});\n- useEffect(\n- () => {\n- let didSelectNewSearchResult = false;\n- if (\n- searchRef.current.searchIndex !== searchIndex ||\n- searchRef.current.searchResults !== searchResults\n- ) {\n- searchRef.current.searchIndex = searchIndex;\n- searchRef.current.searchResults = searchResults;\n- didSelectNewSearchResult = true;\n- }\n- if (isNavigatingWithKeyboard || didSelectNewSearchResult) {\n- if (selectedElementID !== null) {\n- highlightNativeElement(selectedElementID);\n- } else {\n- bridge.send('clearNativeElementHighlight');\n- }\n+ useEffect(() => {\n+ let didSelectNewSearchResult = false;\n+ if (\n+ searchRef.current.searchIndex !== searchIndex ||\n+ searchRef.current.searchResults !== searchResults\n+ ) {\n+ searchRef.current.searchIndex = searchIndex;\n+ searchRef.current.searchResults = searchResults;\n+ didSelectNewSearchResult = true;\n+ }\n+ if (isNavigatingWithKeyboard || didSelectNewSearchResult) {\n+ if (selectedElementID !== null) {\n+ highlightNativeElement(selectedElementID);\n+ } else {\n+ bridge.send('clearNativeElementHighlight');\n }\n- },\n- [\n- bridge,\n- isNavigatingWithKeyboard,\n- highlightNativeElement,\n- searchIndex,\n- searchResults,\n- selectedElementID,\n- ],\n- );\n+ }\n+ }, [\n+ bridge,\n+ isNavigatingWithKeyboard,\n+ highlightNativeElement,\n+ searchIndex,\n+ searchResults,\n+ selectedElementID,\n+ ]);\n \n \/\/ Highlight last hovered element.\n const handleElementMouseEnter = useCallback(\n@@ -284,12 +269,9 @@ export default function Tree(props: Props) {\n setIsNavigatingWithKeyboard(false);\n }, []);\n \n- const handleMouseLeave = useCallback(\n- () => {\n- bridge.send('clearNativeElementHighlight');\n- },\n- [bridge],\n- );\n+ const handleMouseLeave = useCallback(() => {\n+ bridge.send('clearNativeElementHighlight');\n+ }, [bridge]);\n \n \/\/ Let react-window know to re-render any time the underlying tree data changes.\n \/\/ This includes the owner context, since it controls a filtered view of the tree.\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/TreeContext.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/TreeContext.js\nindex 54738bf3d4..bdd1fc04cf 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/TreeContext.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/TreeContext.js\n@@ -718,65 +718,56 @@ function TreeContextController({\n );\n \n \/\/ Listen for host element selections.\n- useEffect(\n- () => {\n- const handleSelectFiber = (id: number) =>\n- dispatchWrapper({type: 'SELECT_ELEMENT_BY_ID', payload: id});\n- bridge.addListener('selectFiber', handleSelectFiber);\n- return () => bridge.removeListener('selectFiber', handleSelectFiber);\n- },\n- [bridge, dispatchWrapper],\n- );\n+ useEffect(() => {\n+ const handleSelectFiber = (id: number) =>\n+ dispatchWrapper({type: 'SELECT_ELEMENT_BY_ID', payload: id});\n+ bridge.addListener('selectFiber', handleSelectFiber);\n+ return () => bridge.removeListener('selectFiber', handleSelectFiber);\n+ }, [bridge, dispatchWrapper]);\n \n \/\/ If a newly-selected search result or inspection selection is inside of a collapsed subtree, auto expand it.\n \/\/ This needs to be a layout effect to avoid temporarily flashing an incorrect selection.\n const prevSelectedElementID = useRef(null);\n- useLayoutEffect(\n- () => {\n- if (state.selectedElementID !== prevSelectedElementID.current) {\n- prevSelectedElementID.current = state.selectedElementID;\n-\n- if (state.selectedElementID !== null) {\n- let element = store.getElementByID(state.selectedElementID);\n- if (element !== null && element.parentID > 0) {\n- store.toggleIsCollapsed(element.parentID, false);\n- }\n+ useLayoutEffect(() => {\n+ if (state.selectedElementID !== prevSelectedElementID.current) {\n+ prevSelectedElementID.current = state.selectedElementID;\n+\n+ if (state.selectedElementID !== null) {\n+ let element = store.getElementByID(state.selectedElementID);\n+ if (element !== null && element.parentID > 0) {\n+ store.toggleIsCollapsed(element.parentID, false);\n }\n }\n- },\n- [state.selectedElementID, store],\n- );\n+ }\n+ }, [state.selectedElementID, store]);\n \n \/\/ Mutations to the underlying tree may impact this context (e.g. search results, selection state).\n- useEffect(\n- () => {\n- const handleStoreMutated = ([addedElementIDs, removedElementIDs]: [\n- Array,\n- Map,\n- ]) => {\n- dispatchWrapper({\n- type: 'HANDLE_STORE_MUTATION',\n- payload: [addedElementIDs, removedElementIDs],\n- });\n- };\n-\n- \/\/ Since this is a passive effect, the tree may have been mutated before our initial subscription.\n- if (store.revision !== initialRevision) {\n- \/\/ At the moment, we can treat this as a mutation.\n- \/\/ We don't know which Elements were newly added\/removed, but that should be okay in this case.\n- \/\/ It would only impact the search state, which is unlikely to exist yet at this point.\n- dispatchWrapper({\n- type: 'HANDLE_STORE_MUTATION',\n- payload: [[], new Map()],\n- });\n- }\n+ useEffect(() => {\n+ const handleStoreMutated = ([addedElementIDs, removedElementIDs]: [\n+ Array,\n+ Map,\n+ ]) => {\n+ dispatchWrapper({\n+ type: 'HANDLE_STORE_MUTATION',\n+ payload: [addedElementIDs, removedElementIDs],\n+ });\n+ };\n+\n+ \/\/ Since this is a passive effect, the tree may have been mutated before our initial subscription.\n+ if (store.revision !== initialRevision) {\n+ \/\/ At the moment, we can treat this as a mutation.\n+ \/\/ We don't know which Elements were newly added\/removed, but that should be okay in this case.\n+ \/\/ It would only impact the search state, which is unlikely to exist yet at this point.\n+ dispatchWrapper({\n+ type: 'HANDLE_STORE_MUTATION',\n+ payload: [[], new Map()],\n+ });\n+ }\n \n- store.addListener('mutated', handleStoreMutated);\n+ store.addListener('mutated', handleStoreMutated);\n \n- return () => store.removeListener('mutated', handleStoreMutated);\n- },\n- [dispatchWrapper, initialRevision, store],\n- );\n+ return () => store.removeListener('mutated', handleStoreMutated);\n+ }, [dispatchWrapper, initialRevision, store]);\n \n return (\n \ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js\nindex f05cdd54e7..3d19c9390e 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js\n@@ -126,18 +126,15 @@ export default function DevTools({\n [enabledInspectedElementContextMenu, viewAttributeSourceFunction],\n );\n \n- useEffect(\n- () => {\n- return () => {\n- try {\n- bridge.shutdown();\n- } catch (error) {\n- \/\/ Attempting to use a disconnected port.\n- }\n- };\n- },\n- [bridge],\n- );\n+ useEffect(() => {\n+ return () => {\n+ try {\n+ bridge.shutdown();\n+ } catch (error) {\n+ \/\/ Attempting to use a disconnected port.\n+ }\n+ };\n+ }, [bridge]);\n \n return (\n \ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/ModalDialog.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/ModalDialog.js\nindex bf9eada1ef..34aa4b8525 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/ModalDialog.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/ModalDialog.js\n@@ -111,14 +111,11 @@ function ModalDialogImpl(_: {||}) {\n const {canBeDismissed, content, dispatch, title} = useContext(\n ModalDialogContext,\n );\n- const dismissModal = useCallback(\n- () => {\n- if (canBeDismissed) {\n- dispatch({type: 'HIDE'});\n- }\n- },\n- [canBeDismissed, dispatch],\n- );\n+ const dismissModal = useCallback(() => {\n+ if (canBeDismissed) {\n+ dispatch({type: 'HIDE'});\n+ }\n+ }, [canBeDismissed, dispatch]);\n const dialogRef = useRef(null);\n \n \/\/ It's important to trap click events within the dialog,\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\nindex bade150224..f58d18d5c5 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\n@@ -94,32 +94,26 @@ function CommitFlamegraph({chartData, commitTree, height, width}: Props) {\n const {lineHeight} = useContext(SettingsContext);\n const {selectFiber, selectedFiberID} = useContext(ProfilerContext);\n \n- const selectedChartNodeIndex = useMemo(\n- () => {\n- if (selectedFiberID === null) {\n- return 0;\n- }\n- \/\/ The selected node might not be in the tree for this commit,\n- \/\/ so it's important that we have a fallback plan.\n- const depth = chartData.idToDepthMap.get(selectedFiberID);\n- return depth !== undefined ? depth - 1 : 0;\n- },\n- [chartData, selectedFiberID],\n- );\n-\n- const selectedChartNode = useMemo(\n- () => {\n- if (selectedFiberID !== null) {\n- return (\n- chartData.rows[selectedChartNodeIndex].find(\n- chartNode => chartNode.id === selectedFiberID,\n- ) || null\n- );\n- }\n- return null;\n- },\n- [chartData, selectedFiberID, selectedChartNodeIndex],\n- );\n+ const selectedChartNodeIndex = useMemo(() => {\n+ if (selectedFiberID === null) {\n+ return 0;\n+ }\n+ \/\/ The selected node might not be in the tree for this commit,\n+ \/\/ so it's important that we have a fallback plan.\n+ const depth = chartData.idToDepthMap.get(selectedFiberID);\n+ return depth !== undefined ? depth - 1 : 0;\n+ }, [chartData, selectedFiberID]);\n+\n+ const selectedChartNode = useMemo(() => {\n+ if (selectedFiberID !== null) {\n+ return (\n+ chartData.rows[selectedChartNodeIndex].find(\n+ chartNode => chartNode.id === selectedFiberID,\n+ ) || null\n+ );\n+ }\n+ return null;\n+ }, [chartData, selectedFiberID, selectedChartNodeIndex]);\n \n const itemData = useMemo(\n () => ({\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\nindex 085ec2a6dd..e122465c61 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\n@@ -51,9 +51,9 @@ export function getCommitTree({\n rootToCommitTreeMap.set(rootID, []);\n }\n \n- const commitTrees = ((rootToCommitTreeMap.get(rootID): any): Array<\n- CommitTree,\n- >);\n+ const commitTrees = ((rootToCommitTreeMap.get(\n+ rootID,\n+ ): any): Array);\n \n if (commitIndex < commitTrees.length) {\n return commitTrees[commitIndex];\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/InteractionListItem.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/InteractionListItem.js\nindex 0e38808bb1..3bc6bd1f40 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/InteractionListItem.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/InteractionListItem.js\n@@ -41,12 +41,9 @@ function InteractionListItem({data: itemData, index, style}: Props) {\n throw Error(`Could not find interaction #${index}`);\n }\n \n- const handleClick = useCallback(\n- () => {\n- selectInteraction(interaction.id);\n- },\n- [interaction, selectInteraction],\n- );\n+ const handleClick = useCallback(() => {\n+ selectInteraction(interaction.id);\n+ }, [interaction, selectInteraction]);\n \n const commits = interactionCommits.get(interaction.id) || [];\n \ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Interactions.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Interactions.js\nindex e3b9b2a8e7..ffbd07f886 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Interactions.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Interactions.js\n@@ -87,45 +87,42 @@ function Interactions({height, width}: {|height: number, width: number|}) {\n [interactions, selectedInteractionID, selectInteraction],\n );\n \n- const itemData = useMemo(\n- () => {\n- const interactionCommitSize = parseInt(\n- getComputedStyle((document.body: any)).getPropertyValue(\n- '--interaction-commit-size',\n- ),\n- 10,\n- );\n- const interactionLabelWidth = parseInt(\n- getComputedStyle((document.body: any)).getPropertyValue(\n- '--interaction-label-width',\n- ),\n- 10,\n- );\n+ const itemData = useMemo(() => {\n+ const interactionCommitSize = parseInt(\n+ getComputedStyle((document.body: any)).getPropertyValue(\n+ '--interaction-commit-size',\n+ ),\n+ 10,\n+ );\n+ const interactionLabelWidth = parseInt(\n+ getComputedStyle((document.body: any)).getPropertyValue(\n+ '--interaction-label-width',\n+ ),\n+ 10,\n+ );\n \n- const labelWidth = Math.min(interactionLabelWidth, width \/ 5);\n- const timelineWidth = width - labelWidth - interactionCommitSize;\n+ const labelWidth = Math.min(interactionLabelWidth, width \/ 5);\n+ const timelineWidth = width - labelWidth - interactionCommitSize;\n \n- return {\n- chartData,\n- dataForRoot,\n- labelWidth,\n- scaleX: scale(0, chartData.lastInteractionTime, 0, timelineWidth),\n- selectedInteractionID,\n- selectCommitIndex,\n- selectInteraction,\n- selectTab,\n- };\n- },\n- [\n+ return {\n chartData,\n dataForRoot,\n+ labelWidth,\n+ scaleX: scale(0, chartData.lastInteractionTime, 0, timelineWidth),\n selectedInteractionID,\n selectCommitIndex,\n selectInteraction,\n selectTab,\n- width,\n- ],\n- );\n+ };\n+ }, [\n+ chartData,\n+ dataForRoot,\n+ selectedInteractionID,\n+ selectCommitIndex,\n+ selectInteraction,\n+ selectTab,\n+ width,\n+ ]);\n \n \/\/ If a commit contains no fibers with an actualDuration > 0,\n \/\/ Display a fallback message.\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ProfilerContext.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ProfilerContext.js\nindex e94d3e583e..4c3bc8834f 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ProfilerContext.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ProfilerContext.js\n@@ -169,9 +169,10 @@ function ProfilerContextController({children}: Props) {\n store,\n ]);\n \n- const [isCommitFilterEnabled, setIsCommitFilterEnabled] = useLocalStorage<\n- boolean,\n- >('React::DevTools::isCommitFilterEnabled', false);\n+ const [\n+ isCommitFilterEnabled,\n+ setIsCommitFilterEnabled,\n+ ] = useLocalStorage('React::DevTools::isCommitFilterEnabled', false);\n const [minCommitDuration, setMinCommitDuration] = useLocalStorage(\n 'minCommitDuration',\n 0,\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.js\nindex 8f6b40199e..b23d797aa3 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ProfilingImportExportButtons.js\n@@ -33,36 +33,33 @@ export default function ProfilingImportExportButtons() {\n \n const {dispatch: modalDialogDispatch} = useContext(ModalDialogContext);\n \n- const downloadData = useCallback(\n- () => {\n- if (rootID === null) {\n- return;\n- }\n+ const downloadData = useCallback(() => {\n+ if (rootID === null) {\n+ return;\n+ }\n \n- if (profilingData !== null && downloadRef.current !== null) {\n- const profilingDataExport = prepareProfilingDataExport(profilingData);\n- const date = new Date();\n- const dateString = date\n- .toLocaleDateString(undefined, {\n- year: 'numeric',\n- month: '2-digit',\n- day: '2-digit',\n- })\n- .replace(\/\\\/\/g, '-');\n- const timeString = date\n- .toLocaleTimeString(undefined, {\n- hour12: false,\n- })\n- .replace(\/:\/g, '-');\n- downloadFile(\n- downloadRef.current,\n- `profiling-data.${dateString}.${timeString}.json`,\n- JSON.stringify(profilingDataExport, null, 2),\n- );\n- }\n- },\n- [rootID, profilingData],\n- );\n+ if (profilingData !== null && downloadRef.current !== null) {\n+ const profilingDataExport = prepareProfilingDataExport(profilingData);\n+ const date = new Date();\n+ const dateString = date\n+ .toLocaleDateString(undefined, {\n+ year: 'numeric',\n+ month: '2-digit',\n+ day: '2-digit',\n+ })\n+ .replace(\/\\\/\/g, '-');\n+ const timeString = date\n+ .toLocaleTimeString(undefined, {\n+ hour12: false,\n+ })\n+ .replace(\/:\/g, '-');\n+ downloadFile(\n+ downloadRef.current,\n+ `profiling-data.${dateString}.${timeString}.json`,\n+ JSON.stringify(profilingDataExport, null, 2),\n+ );\n+ }\n+ }, [rootID, profilingData]);\n \n const uploadData = useCallback(() => {\n if (inputRef.current !== null) {\n@@ -70,41 +67,38 @@ export default function ProfilingImportExportButtons() {\n }\n }, []);\n \n- const handleFiles = useCallback(\n- () => {\n- const input = inputRef.current;\n- if (input !== null && input.files.length > 0) {\n- const fileReader = new FileReader();\n- fileReader.addEventListener('load', () => {\n- try {\n- const raw = ((fileReader.result: any): string);\n- const profilingDataExport = ((JSON.parse(\n- raw,\n- ): any): ProfilingDataExport);\n- profilerStore.profilingData = prepareProfilingDataFrontendFromExport(\n- profilingDataExport,\n- );\n- } catch (error) {\n- modalDialogDispatch({\n- type: 'SHOW',\n- title: 'Import failed',\n- content: (\n- \n-
The profiling data you selected cannot be imported.<\/div>\n- {error !== null && (\n-
{error.message}<\/div>\n- )}\n- <\/Fragment>\n- ),\n- });\n- }\n- });\n- \/\/ TODO (profiling) Handle fileReader errors.\n- fileReader.readAsText(input.files[0]);\n- }\n- },\n- [modalDialogDispatch, profilerStore],\n- );\n+ const handleFiles = useCallback(() => {\n+ const input = inputRef.current;\n+ if (input !== null && input.files.length > 0) {\n+ const fileReader = new FileReader();\n+ fileReader.addEventListener('load', () => {\n+ try {\n+ const raw = ((fileReader.result: any): string);\n+ const profilingDataExport = ((JSON.parse(\n+ raw,\n+ ): any): ProfilingDataExport);\n+ profilerStore.profilingData = prepareProfilingDataFrontendFromExport(\n+ profilingDataExport,\n+ );\n+ } catch (error) {\n+ modalDialogDispatch({\n+ type: 'SHOW',\n+ title: 'Import failed',\n+ content: (\n+ \n+
The profiling data you selected cannot be imported.<\/div>\n+ {error !== null && (\n+
{error.message}<\/div>\n+ )}\n+ <\/Fragment>\n+ ),\n+ });\n+ }\n+ });\n+ \/\/ TODO (profiling) Handle fileReader errors.\n+ fileReader.readAsText(input.files[0]);\n+ }\n+ }, [modalDialogDispatch, profilerStore]);\n \n return (\n \ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ReloadAndProfileButton.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ReloadAndProfileButton.js\nindex a8cefc1981..d3772ead4d 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ReloadAndProfileButton.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ReloadAndProfileButton.js\n@@ -39,22 +39,20 @@ export default function ReloadAndProfileButton() {\n }),\n [store],\n );\n- const {recordChangeDescriptions, supportsReloadAndProfile} = useSubscription<\n- SubscriptionData,\n- >(subscription);\n+ const {\n+ recordChangeDescriptions,\n+ supportsReloadAndProfile,\n+ } = useSubscription(subscription);\n \n- const reloadAndProfile = useCallback(\n- () => {\n- \/\/ TODO If we want to support reload-and-profile for e.g. React Native,\n- \/\/ we might need to also start profiling here before reloading the app (since DevTools itself isn't reloaded).\n- \/\/ We'd probably want to do this before reloading though, to avoid sending a message on a disconnected port in the browser.\n- \/\/ For now, let's just skip doing it entirely to avoid paying snapshot costs for data we don't need.\n- \/\/ startProfiling();\n+ const reloadAndProfile = useCallback(() => {\n+ \/\/ TODO If we want to support reload-and-profile for e.g. React Native,\n+ \/\/ we might need to also start profiling here before reloading the app (since DevTools itself isn't reloaded).\n+ \/\/ We'd probably want to do this before reloading though, to avoid sending a message on a disconnected port in the browser.\n+ \/\/ For now, let's just skip doing it entirely to avoid paying snapshot costs for data we don't need.\n+ \/\/ startProfiling();\n \n- bridge.send('reloadAndProfile', recordChangeDescriptions);\n- },\n- [bridge, recordChangeDescriptions],\n- );\n+ bridge.send('reloadAndProfile', recordChangeDescriptions);\n+ }, [bridge, recordChangeDescriptions]);\n \n if (!supportsReloadAndProfile) {\n return null;\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotCommitList.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotCommitList.js\nindex 208d4ed517..1723b9d5c7 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotCommitList.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotCommitList.js\n@@ -87,17 +87,14 @@ function List({\n const prevCommitIndexRef = useRef(null);\n \n \/\/ Make sure a newly selected snapshot is fully visible within the list.\n- useEffect(\n- () => {\n- if (selectedFilteredCommitIndex !== prevCommitIndexRef.current) {\n- prevCommitIndexRef.current = selectedFilteredCommitIndex;\n- if (selectedFilteredCommitIndex !== null && listRef.current !== null) {\n- listRef.current.scrollToItem(selectedFilteredCommitIndex);\n- }\n+ useEffect(() => {\n+ if (selectedFilteredCommitIndex !== prevCommitIndexRef.current) {\n+ prevCommitIndexRef.current = selectedFilteredCommitIndex;\n+ if (selectedFilteredCommitIndex !== null && listRef.current !== null) {\n+ listRef.current.scrollToItem(selectedFilteredCommitIndex);\n }\n- },\n- [listRef, selectedFilteredCommitIndex],\n- );\n+ }\n+ }, [listRef, selectedFilteredCommitIndex]);\n \n \/\/ When the mouse is down, dragging over a commit should auto-select it.\n \/\/ This provides a nice way for users to swipe across a range of commits to compare them.\n@@ -108,21 +105,18 @@ function List({\n const handleMouseUp = useCallback(() => {\n setIsMouseDown(false);\n }, []);\n- useEffect(\n- () => {\n- if (divRef.current === null) {\n- return () => {};\n- }\n+ useEffect(() => {\n+ if (divRef.current === null) {\n+ return () => {};\n+ }\n \n- \/\/ It's important to listen to the ownerDocument to support the browser extension.\n- \/\/ Here we use portals to render individual tabs (e.g. Profiler),\n- \/\/ and the root document might belong to a different window.\n- const ownerDocument = divRef.current.ownerDocument;\n- ownerDocument.addEventListener('mouseup', handleMouseUp);\n- return () => ownerDocument.removeEventListener('mouseup', handleMouseUp);\n- },\n- [divRef, handleMouseUp],\n- );\n+ \/\/ It's important to listen to the ownerDocument to support the browser extension.\n+ \/\/ Here we use portals to render individual tabs (e.g. Profiler),\n+ \/\/ and the root document might belong to a different window.\n+ const ownerDocument = divRef.current.ownerDocument;\n+ ownerDocument.addEventListener('mouseup', handleMouseUp);\n+ return () => ownerDocument.removeEventListener('mouseup', handleMouseUp);\n+ }, [divRef, handleMouseUp]);\n \n const itemSize = useMemo(\n () => Math.max(minBarWidth, width \/ filteredCommitIndices.length),\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotSelector.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotSelector.js\nindex 41979cee6b..41d5e7a77e 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotSelector.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotSelector.js\n@@ -55,19 +55,16 @@ export default function SnapshotSelector(_: Props) {\n const numFilteredCommits = filteredCommitIndices.length;\n \n \/\/ Map the (unfiltered) selected commit index to an index within the filtered data.\n- const selectedFilteredCommitIndex = useMemo(\n- () => {\n- if (selectedCommitIndex !== null) {\n- for (let i = 0; i < filteredCommitIndices.length; i++) {\n- if (filteredCommitIndices[i] === selectedCommitIndex) {\n- return i;\n- }\n+ const selectedFilteredCommitIndex = useMemo(() => {\n+ if (selectedCommitIndex !== null) {\n+ for (let i = 0; i < filteredCommitIndices.length; i++) {\n+ if (filteredCommitIndices[i] === selectedCommitIndex) {\n+ return i;\n }\n }\n- return null;\n- },\n- [filteredCommitIndices, selectedCommitIndex],\n- );\n+ }\n+ return null;\n+ }, [filteredCommitIndices, selectedCommitIndex]);\n \n \/\/ TODO (ProfilerContext) This should be managed by the context controller (reducer).\n \/\/ It doesn't currently know about the filtered commits though (since it doesn't suspend).\n@@ -93,26 +90,20 @@ export default function SnapshotSelector(_: Props) {\n numFilteredCommits;\n }\n \n- const viewNextCommit = useCallback(\n- () => {\n- let nextCommitIndex = ((selectedFilteredCommitIndex: any): number) + 1;\n- if (nextCommitIndex === filteredCommitIndices.length) {\n- nextCommitIndex = 0;\n- }\n- selectCommitIndex(filteredCommitIndices[nextCommitIndex]);\n- },\n- [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex],\n- );\n- const viewPrevCommit = useCallback(\n- () => {\n- let nextCommitIndex = ((selectedFilteredCommitIndex: any): number) - 1;\n- if (nextCommitIndex < 0) {\n- nextCommitIndex = filteredCommitIndices.length - 1;\n- }\n- selectCommitIndex(filteredCommitIndices[nextCommitIndex]);\n- },\n- [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex],\n- );\n+ const viewNextCommit = useCallback(() => {\n+ let nextCommitIndex = ((selectedFilteredCommitIndex: any): number) + 1;\n+ if (nextCommitIndex === filteredCommitIndices.length) {\n+ nextCommitIndex = 0;\n+ }\n+ selectCommitIndex(filteredCommitIndices[nextCommitIndex]);\n+ }, [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex]);\n+ const viewPrevCommit = useCallback(() => {\n+ let nextCommitIndex = ((selectedFilteredCommitIndex: any): number) - 1;\n+ if (nextCommitIndex < 0) {\n+ nextCommitIndex = filteredCommitIndices.length - 1;\n+ }\n+ selectCommitIndex(filteredCommitIndices[nextCommitIndex]);\n+ }, [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex]);\n \n const handleKeyDown = useCallback(\n event => {\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/ComponentsSettings.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/ComponentsSettings.js\nindex 1d4697abe5..8244a4b83d 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/ComponentsSettings.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/ComponentsSettings.js\n@@ -229,13 +229,10 @@ export default function ComponentsSettings(_: {||}) {\n \/\/ The Store will avoid doing any expensive work unless they've changed.\n \/\/ We just want to batch the work in the event that they do change.\n const componentFiltersRef = useRef>(componentFilters);\n- useEffect(\n- () => {\n- componentFiltersRef.current = componentFilters;\n- return () => {};\n- },\n- [componentFilters],\n- );\n+ useEffect(() => {\n+ componentFiltersRef.current = componentFilters;\n+ return () => {};\n+ }, [componentFilters]);\n useEffect(\n () => () => {\n store.componentFilters = [...componentFiltersRef.current];\n@@ -282,8 +279,8 @@ export default function ComponentsSettings(_: {||}) {\n componentFilter.isValid === false\n ? 'Filter invalid'\n : componentFilter.isEnabled\n- ? 'Filter enabled'\n- : 'Filter disabled'\n+ ? 'Filter enabled'\n+ : 'Filter disabled'\n }>\n (LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY, true);\n- const [traceUpdatesEnabled, setTraceUpdatesEnabled] = useLocalStorage<\n- boolean,\n- >(LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY, false);\n+ const [\n+ appendComponentStack,\n+ setAppendComponentStack,\n+ ] = useLocalStorage(LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY, true);\n+ const [\n+ traceUpdatesEnabled,\n+ setTraceUpdatesEnabled,\n+ ] = useLocalStorage(LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY, false);\n \n- const documentElements = useMemo(\n- () => {\n- const array: Array = [\n- ((document.documentElement: any): HTMLElement),\n- ];\n- if (componentsPortalContainer != null) {\n- array.push(\n- ((componentsPortalContainer.ownerDocument\n- .documentElement: any): HTMLElement),\n- );\n- }\n- if (profilerPortalContainer != null) {\n- array.push(\n- ((profilerPortalContainer.ownerDocument\n- .documentElement: any): HTMLElement),\n- );\n- }\n- return array;\n- },\n- [componentsPortalContainer, profilerPortalContainer],\n- );\n+ const documentElements = useMemo(() => {\n+ const array: Array = [\n+ ((document.documentElement: any): HTMLElement),\n+ ];\n+ if (componentsPortalContainer != null) {\n+ array.push(\n+ ((componentsPortalContainer.ownerDocument\n+ .documentElement: any): HTMLElement),\n+ );\n+ }\n+ if (profilerPortalContainer != null) {\n+ array.push(\n+ ((profilerPortalContainer.ownerDocument\n+ .documentElement: any): HTMLElement),\n+ );\n+ }\n+ return array;\n+ }, [componentsPortalContainer, profilerPortalContainer]);\n \n- useLayoutEffect(\n- () => {\n- switch (displayDensity) {\n- case 'comfortable':\n- updateDisplayDensity('comfortable', documentElements);\n- break;\n- case 'compact':\n- updateDisplayDensity('compact', documentElements);\n- break;\n- default:\n- throw Error(`Unsupported displayDensity value \"${displayDensity}\"`);\n- }\n- },\n- [displayDensity, documentElements],\n- );\n+ useLayoutEffect(() => {\n+ switch (displayDensity) {\n+ case 'comfortable':\n+ updateDisplayDensity('comfortable', documentElements);\n+ break;\n+ case 'compact':\n+ updateDisplayDensity('compact', documentElements);\n+ break;\n+ default:\n+ throw Error(`Unsupported displayDensity value \"${displayDensity}\"`);\n+ }\n+ }, [displayDensity, documentElements]);\n \n- useLayoutEffect(\n- () => {\n- switch (theme) {\n- case 'light':\n- updateThemeVariables('light', documentElements);\n- break;\n- case 'dark':\n- updateThemeVariables('dark', documentElements);\n- break;\n- case 'auto':\n- updateThemeVariables(browserTheme, documentElements);\n- break;\n- default:\n- throw Error(`Unsupported theme value \"${theme}\"`);\n- }\n- },\n- [browserTheme, theme, documentElements],\n- );\n+ useLayoutEffect(() => {\n+ switch (theme) {\n+ case 'light':\n+ updateThemeVariables('light', documentElements);\n+ break;\n+ case 'dark':\n+ updateThemeVariables('dark', documentElements);\n+ break;\n+ case 'auto':\n+ updateThemeVariables(browserTheme, documentElements);\n+ break;\n+ default:\n+ throw Error(`Unsupported theme value \"${theme}\"`);\n+ }\n+ }, [browserTheme, theme, documentElements]);\n \n- useEffect(\n- () => {\n- bridge.send('updateAppendComponentStack', appendComponentStack);\n- },\n- [bridge, appendComponentStack],\n- );\n+ useEffect(() => {\n+ bridge.send('updateAppendComponentStack', appendComponentStack);\n+ }, [bridge, appendComponentStack]);\n \n- useEffect(\n- () => {\n- bridge.send('setTraceUpdatesEnabled', traceUpdatesEnabled);\n- },\n- [bridge, traceUpdatesEnabled],\n- );\n+ useEffect(() => {\n+ bridge.send('setTraceUpdatesEnabled', traceUpdatesEnabled);\n+ }, [bridge, traceUpdatesEnabled]);\n \n const value = useMemo(\n () => ({\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/SettingsModal.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/SettingsModal.js\nindex 5ac993a919..e76dae6518 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/SettingsModal.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/SettingsModal.js\n@@ -75,14 +75,11 @@ function SettingsModalImpl(_: {||}) {\n const modalRef = useRef(null);\n useModalDismissSignal(modalRef, dismissModal);\n \n- useEffect(\n- () => {\n- if (modalRef.current !== null) {\n- modalRef.current.focus();\n- }\n- },\n- [modalRef],\n- );\n+ useEffect(() => {\n+ if (modalRef.current !== null) {\n+ modalRef.current.focus();\n+ }\n+ }, [modalRef]);\n \n let view = null;\n switch (selectedTabID) {\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/UnsupportedVersionDialog.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/UnsupportedVersionDialog.js\nindex 652c4904c2..1f35eee3c8 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/UnsupportedVersionDialog.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/UnsupportedVersionDialog.js\n@@ -22,35 +22,32 @@ export default function UnsupportedVersionDialog(_: {||}) {\n const store = useContext(StoreContext);\n const [state, setState] = useState('dialog-not-shown');\n \n- useEffect(\n- () => {\n- if (state === 'dialog-not-shown') {\n- const showDialog = () => {\n- batchedUpdates(() => {\n- setState('show-dialog');\n- dispatch({\n- canBeDismissed: true,\n- type: 'SHOW',\n- content: ,\n- });\n+ useEffect(() => {\n+ if (state === 'dialog-not-shown') {\n+ const showDialog = () => {\n+ batchedUpdates(() => {\n+ setState('show-dialog');\n+ dispatch({\n+ canBeDismissed: true,\n+ type: 'SHOW',\n+ content: ,\n });\n- };\n+ });\n+ };\n \n- if (store.unsupportedRendererVersionDetected) {\n- showDialog();\n- } else {\n- store.addListener('unsupportedRendererVersionDetected', showDialog);\n- return () => {\n- store.removeListener(\n- 'unsupportedRendererVersionDetected',\n- showDialog,\n- );\n- };\n- }\n+ if (store.unsupportedRendererVersionDetected) {\n+ showDialog();\n+ } else {\n+ store.addListener('unsupportedRendererVersionDetected', showDialog);\n+ return () => {\n+ store.removeListener(\n+ 'unsupportedRendererVersionDetected',\n+ showDialog,\n+ );\n+ };\n }\n- },\n- [state, store],\n- );\n+ }\n+ }, [state, store]);\n \n return null;\n }\n@@ -74,7 +71,8 @@ function DialogContent(_: {||}) {\n rel=\"noopener noreferrer\"\n href={UNSUPPORTED_VERSION_URL}>\n install an older version of the extension\n- <\/a>.\n+ <\/a>\n+ .\n <\/p>\n <\/div>\n <\/div>\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/WarnIfLegacyBackendDetected.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/WarnIfLegacyBackendDetected.js\nindex cdcee4758a..cb4933f8db 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/WarnIfLegacyBackendDetected.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/WarnIfLegacyBackendDetected.js\n@@ -20,58 +20,55 @@ export default function WarnIfLegacyBackendDetected(_: {||}) {\n \/\/ Detect pairing with legacy v3 backend.\n \/\/ We do this by listening to a message that it broadcasts but the v4 backend doesn't.\n \/\/ In this case the frontend should show upgrade instructions.\n- useEffect(\n- () => {\n- \/\/ Wall.listen returns a cleanup function\n- let unlisten = bridge.wall.listen(message => {\n- switch (message.type) {\n- case 'call':\n- case 'event':\n- case 'many-events':\n- \/\/ Any of these types indicate the v3 backend.\n- dispatch({\n- canBeDismissed: false,\n- type: 'SHOW',\n- title: 'DevTools v4 is incompatible with this version of React',\n- content: ,\n- });\n+ useEffect(() => {\n+ \/\/ Wall.listen returns a cleanup function\n+ let unlisten = bridge.wall.listen(message => {\n+ switch (message.type) {\n+ case 'call':\n+ case 'event':\n+ case 'many-events':\n+ \/\/ Any of these types indicate the v3 backend.\n+ dispatch({\n+ canBeDismissed: false,\n+ type: 'SHOW',\n+ title: 'DevTools v4 is incompatible with this version of React',\n+ content: ,\n+ });\n \n- \/\/ Once we've identified the backend version, it's safe to unsubscribe.\n- if (typeof unlisten === 'function') {\n- unlisten();\n- unlisten = null;\n- }\n- break;\n- default:\n- break;\n- }\n+ \/\/ Once we've identified the backend version, it's safe to unsubscribe.\n+ if (typeof unlisten === 'function') {\n+ unlisten();\n+ unlisten = null;\n+ }\n+ break;\n+ default:\n+ break;\n+ }\n \n- switch (message.event) {\n- case 'isBackendStorageAPISupported':\n- case 'isNativeStyleEditorSupported':\n- case 'operations':\n- case 'overrideComponentFilters':\n- \/\/ Any of these is sufficient to indicate a v4 backend.\n- \/\/ Once we've identified the backend version, it's safe to unsubscribe.\n- if (typeof unlisten === 'function') {\n- unlisten();\n- unlisten = null;\n- }\n- break;\n- default:\n- break;\n- }\n- });\n+ switch (message.event) {\n+ case 'isBackendStorageAPISupported':\n+ case 'isNativeStyleEditorSupported':\n+ case 'operations':\n+ case 'overrideComponentFilters':\n+ \/\/ Any of these is sufficient to indicate a v4 backend.\n+ \/\/ Once we've identified the backend version, it's safe to unsubscribe.\n+ if (typeof unlisten === 'function') {\n+ unlisten();\n+ unlisten = null;\n+ }\n+ break;\n+ default:\n+ break;\n+ }\n+ });\n \n- return () => {\n- if (typeof unlisten === 'function') {\n- unlisten();\n- unlisten = null;\n- }\n- };\n- },\n- [bridge, dispatch],\n- );\n+ return () => {\n+ if (typeof unlisten === 'function') {\n+ unlisten();\n+ unlisten = null;\n+ }\n+ };\n+ }, [bridge, dispatch]);\n \n return null;\n }\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/hooks.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/hooks.js\nindex 693f72535b..62cafbfed3 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/hooks.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/hooks.js\n@@ -112,30 +112,27 @@ export function useIsOverflowing(\n const [isOverflowing, setIsOverflowing] = useState(false);\n \n \/\/ It's important to use a layout effect, so that we avoid showing a flash of overflowed content.\n- useLayoutEffect(\n- () => {\n- if (containerRef.current === null) {\n- return () => {};\n- }\n+ useLayoutEffect(() => {\n+ if (containerRef.current === null) {\n+ return () => {};\n+ }\n \n- const container = ((containerRef.current: any): HTMLDivElement);\n+ const container = ((containerRef.current: any): HTMLDivElement);\n \n- const handleResize = throttle(\n- () => setIsOverflowing(container.clientWidth <= totalChildWidth),\n- 100,\n- );\n+ const handleResize = throttle(\n+ () => setIsOverflowing(container.clientWidth <= totalChildWidth),\n+ 100,\n+ );\n \n- handleResize();\n+ handleResize();\n \n- \/\/ It's important to listen to the ownerDocument.defaultView to support the browser extension.\n- \/\/ Here we use portals to render individual tabs (e.g. Profiler),\n- \/\/ and the root document might belong to a different window.\n- const ownerWindow = container.ownerDocument.defaultView;\n- ownerWindow.addEventListener('resize', handleResize);\n- return () => ownerWindow.removeEventListener('resize', handleResize);\n- },\n- [containerRef, totalChildWidth],\n- );\n+ \/\/ It's important to listen to the ownerDocument.defaultView to support the browser extension.\n+ \/\/ Here we use portals to render individual tabs (e.g. Profiler),\n+ \/\/ and the root document might belong to a different window.\n+ const ownerWindow = container.ownerDocument.defaultView;\n+ ownerWindow.addEventListener('resize', handleResize);\n+ return () => ownerWindow.removeEventListener('resize', handleResize);\n+ }, [containerRef, totalChildWidth]);\n \n return isOverflowing;\n }\n@@ -145,24 +142,21 @@ export function useLocalStorage(\n key: string,\n initialValue: T | (() => T),\n ): [T, (value: T | (() => T)) => void] {\n- const getValueFromLocalStorage = useCallback(\n- () => {\n- try {\n- const item = localStorageGetItem(key);\n- if (item != null) {\n- return JSON.parse(item);\n- }\n- } catch (error) {\n- console.log(error);\n- }\n- if (typeof initialValue === 'function') {\n- return ((initialValue: any): () => T)();\n- } else {\n- return initialValue;\n+ const getValueFromLocalStorage = useCallback(() => {\n+ try {\n+ const item = localStorageGetItem(key);\n+ if (item != null) {\n+ return JSON.parse(item);\n }\n- },\n- [initialValue, key],\n- );\n+ } catch (error) {\n+ console.log(error);\n+ }\n+ if (typeof initialValue === 'function') {\n+ return ((initialValue: any): () => T)();\n+ } else {\n+ return initialValue;\n+ }\n+ }, [initialValue, key]);\n \n const [storedValue, setStoredValue] = useState(getValueFromLocalStorage);\n \n@@ -182,23 +176,20 @@ export function useLocalStorage(\n \n \/\/ Listen for changes to this local storage value made from other windows.\n \/\/ This enables the e.g. \"⚛️ Elements\" tab to update in response to changes from \"⚛️ Settings\".\n- useLayoutEffect(\n- () => {\n- const onStorage = event => {\n- const newValue = getValueFromLocalStorage();\n- if (key === event.key && storedValue !== newValue) {\n- setValue(newValue);\n- }\n- };\n+ useLayoutEffect(() => {\n+ const onStorage = event => {\n+ const newValue = getValueFromLocalStorage();\n+ if (key === event.key && storedValue !== newValue) {\n+ setValue(newValue);\n+ }\n+ };\n \n- window.addEventListener('storage', onStorage);\n+ window.addEventListener('storage', onStorage);\n \n- return () => {\n- window.removeEventListener('storage', onStorage);\n- };\n- },\n- [getValueFromLocalStorage, key, storedValue, setValue],\n- );\n+ return () => {\n+ window.removeEventListener('storage', onStorage);\n+ };\n+ }, [getValueFromLocalStorage, key, storedValue, setValue]);\n \n return [storedValue, setValue];\n }\n@@ -208,47 +199,44 @@ export function useModalDismissSignal(\n dismissCallback: () => void,\n dismissOnClickOutside?: boolean = true,\n ): void {\n- useEffect(\n- () => {\n- if (modalRef.current === null) {\n- return () => {};\n- }\n-\n- const handleDocumentKeyDown = ({key}: any) => {\n- if (key === 'Escape') {\n- dismissCallback();\n- }\n- };\n-\n- const handleDocumentClick = (event: any) => {\n- \/\/ $FlowFixMe\n- if (\n- modalRef.current !== null &&\n- !modalRef.current.contains(event.target)\n- ) {\n- event.stopPropagation();\n- event.preventDefault();\n-\n- dismissCallback();\n- }\n- };\n+ useEffect(() => {\n+ if (modalRef.current === null) {\n+ return () => {};\n+ }\n \n- \/\/ It's important to listen to the ownerDocument to support the browser extension.\n- \/\/ Here we use portals to render individual tabs (e.g. Profiler),\n- \/\/ and the root document might belong to a different window.\n- const ownerDocument = modalRef.current.ownerDocument;\n- ownerDocument.addEventListener('keydown', handleDocumentKeyDown);\n- if (dismissOnClickOutside) {\n- ownerDocument.addEventListener('click', handleDocumentClick);\n+ const handleDocumentKeyDown = ({key}: any) => {\n+ if (key === 'Escape') {\n+ dismissCallback();\n+ }\n+ };\n+\n+ const handleDocumentClick = (event: any) => {\n+ \/\/ $FlowFixMe\n+ if (\n+ modalRef.current !== null &&\n+ !modalRef.current.contains(event.target)\n+ ) {\n+ event.stopPropagation();\n+ event.preventDefault();\n+\n+ dismissCallback();\n }\n+ };\n+\n+ \/\/ It's important to listen to the ownerDocument to support the browser extension.\n+ \/\/ Here we use portals to render individual tabs (e.g. Profiler),\n+ \/\/ and the root document might belong to a different window.\n+ const ownerDocument = modalRef.current.ownerDocument;\n+ ownerDocument.addEventListener('keydown', handleDocumentKeyDown);\n+ if (dismissOnClickOutside) {\n+ ownerDocument.addEventListener('click', handleDocumentClick);\n+ }\n \n- return () => {\n- ownerDocument.removeEventListener('keydown', handleDocumentKeyDown);\n- ownerDocument.removeEventListener('click', handleDocumentClick);\n- };\n- },\n- [modalRef, dismissCallback, dismissOnClickOutside],\n- );\n+ return () => {\n+ ownerDocument.removeEventListener('keydown', handleDocumentKeyDown);\n+ ownerDocument.removeEventListener('click', handleDocumentClick);\n+ };\n+ }, [modalRef, dismissCallback, dismissOnClickOutside]);\n }\n \n \/\/ Copied from https:\/\/github.com\/facebook\/react\/pull\/15022\n@@ -276,42 +264,39 @@ export function useSubscription({\n });\n }\n \n- useEffect(\n- () => {\n- let didUnsubscribe = false;\n+ useEffect(() => {\n+ let didUnsubscribe = false;\n \n- const checkForUpdates = () => {\n- if (didUnsubscribe) {\n- return;\n+ const checkForUpdates = () => {\n+ if (didUnsubscribe) {\n+ return;\n+ }\n+\n+ setState(prevState => {\n+ if (\n+ prevState.getCurrentValue !== getCurrentValue ||\n+ prevState.subscribe !== subscribe\n+ ) {\n+ return prevState;\n }\n \n- setState(prevState => {\n- if (\n- prevState.getCurrentValue !== getCurrentValue ||\n- prevState.subscribe !== subscribe\n- ) {\n- return prevState;\n- }\n-\n- const value = getCurrentValue();\n- if (prevState.value === value) {\n- return prevState;\n- }\n-\n- return {...prevState, value};\n- });\n- };\n- const unsubscribe = subscribe(checkForUpdates);\n+ const value = getCurrentValue();\n+ if (prevState.value === value) {\n+ return prevState;\n+ }\n \n- checkForUpdates();\n+ return {...prevState, value};\n+ });\n+ };\n+ const unsubscribe = subscribe(checkForUpdates);\n \n- return () => {\n- didUnsubscribe = true;\n- unsubscribe();\n- };\n- },\n- [getCurrentValue, subscribe],\n- );\n+ checkForUpdates();\n+\n+ return () => {\n+ didUnsubscribe = true;\n+ unsubscribe();\n+ };\n+ }, [getCurrentValue, subscribe]);\n \n return state.value;\n }\ndiff --git a\/packages\/react-devtools-shell\/src\/app\/Hydration\/index.js b\/packages\/react-devtools-shell\/src\/app\/Hydration\/index.js\nindex 914bf54ccc..d2be0e6901 100644\n--- a\/packages\/react-devtools-shell\/src\/app\/Hydration\/index.js\n+++ b\/packages\/react-devtools-shell\/src\/app\/Hydration\/index.js\n@@ -17,8 +17,16 @@ typedArray[1] = 2;\n typedArray[2] = 3;\n \n const arrayOfArrays = [\n- [['a', 'b', 'c'], ['d', 'e', 'f'], ['h', 'i', 'j']],\n- [['k', 'l', 'm'], ['n', 'o', 'p'], ['q', 'r', 's']],\n+ [\n+ ['a', 'b', 'c'],\n+ ['d', 'e', 'f'],\n+ ['h', 'i', 'j'],\n+ ],\n+ [\n+ ['k', 'l', 'm'],\n+ ['n', 'o', 'p'],\n+ ['q', 'r', 's'],\n+ ],\n [['t', 'u', 'v'], ['w', 'x', 'y'], ['z']],\n [],\n ];\ndiff --git a\/packages\/react-devtools-shell\/src\/app\/InspectableElements\/UnserializableProps.js b\/packages\/react-devtools-shell\/src\/app\/InspectableElements\/UnserializableProps.js\nindex effe7f14a3..561aad2034 100644\n--- a\/packages\/react-devtools-shell\/src\/app\/InspectableElements\/UnserializableProps.js\n+++ b\/packages\/react-devtools-shell\/src\/app\/InspectableElements\/UnserializableProps.js\n@@ -11,9 +11,15 @@ import React from 'react';\n import Immutable from 'immutable';\n \n const set = new Set(['abc', 123]);\n-const map = new Map([['name', 'Brian'], ['food', 'sushi']]);\n+const map = new Map([\n+ ['name', 'Brian'],\n+ ['food', 'sushi'],\n+]);\n const setOfSets = new Set([new Set(['a', 'b', 'c']), new Set([1, 2, 3])]);\n-const mapOfMaps = new Map([['first', map], ['second', map]]);\n+const mapOfMaps = new Map([\n+ ['first', map],\n+ ['second', map],\n+]);\n const typedArray = Int8Array.from([100, -100, 0]);\n const arrayBuffer = typedArray.buffer;\n const dataView = new DataView(arrayBuffer);\ndiff --git a\/packages\/react-devtools-shell\/src\/app\/InteractionTracing\/index.js b\/packages\/react-devtools-shell\/src\/app\/InteractionTracing\/index.js\nindex be44460bb5..9d713d8fe5 100644\n--- a\/packages\/react-devtools-shell\/src\/app\/InteractionTracing\/index.js\n+++ b\/packages\/react-devtools-shell\/src\/app\/InteractionTracing\/index.js\n@@ -18,66 +18,54 @@ export default function InteractionTracing() {\n const [count, setCount] = useState(0);\n const [shouldCascade, setShouldCascade] = useState(false);\n \n- const handleUpdate = useCallback(\n- () => {\n- trace('count', performance.now(), () => {\n- setTimeout(\n- wrap(() => {\n+ const handleUpdate = useCallback(() => {\n+ trace('count', performance.now(), () => {\n+ setTimeout(\n+ wrap(() => {\n+ setCount(count + 1);\n+ }),\n+ count * 100,\n+ );\n+ });\n+ }, [count]);\n+\n+ const handleCascadingUpdate = useCallback(() => {\n+ trace('cascade', performance.now(), () => {\n+ setTimeout(\n+ wrap(() => {\n+ batchedUpdates(() => {\n setCount(count + 1);\n- }),\n- count * 100,\n- );\n- });\n- },\n- [count],\n- );\n+ setShouldCascade(true);\n+ });\n+ }),\n+ count * 100,\n+ );\n+ });\n+ }, [count]);\n \n- const handleCascadingUpdate = useCallback(\n- () => {\n- trace('cascade', performance.now(), () => {\n+ const handleMultiple = useCallback(() => {\n+ trace('first', performance.now(), () => {\n+ trace('second', performance.now(), () => {\n setTimeout(\n wrap(() => {\n- batchedUpdates(() => {\n- setCount(count + 1);\n- setShouldCascade(true);\n- });\n+ setCount(count + 1);\n }),\n count * 100,\n );\n });\n- },\n- [count],\n- );\n+ });\n+ }, [count]);\n \n- const handleMultiple = useCallback(\n- () => {\n- trace('first', performance.now(), () => {\n- trace('second', performance.now(), () => {\n- setTimeout(\n- wrap(() => {\n- setCount(count + 1);\n- }),\n- count * 100,\n- );\n- });\n- });\n- },\n- [count],\n- );\n-\n- useEffect(\n- () => {\n- if (shouldCascade) {\n- setTimeout(\n- wrap(() => {\n- setShouldCascade(false);\n- }),\n- count * 100,\n- );\n- }\n- },\n- [count, shouldCascade],\n- );\n+ useEffect(() => {\n+ if (shouldCascade) {\n+ setTimeout(\n+ wrap(() => {\n+ setShouldCascade(false);\n+ }),\n+ count * 100,\n+ );\n+ }\n+ }, [count, shouldCascade]);\n \n return (\n \ndiff --git a\/packages\/react-devtools-shell\/src\/app\/ToDoList\/List.js b\/packages\/react-devtools-shell\/src\/app\/ToDoList\/List.js\nindex 1decfb28e7..e3fee20080 100644\n--- a\/packages\/react-devtools-shell\/src\/app\/ToDoList\/List.js\n+++ b\/packages\/react-devtools-shell\/src\/app\/ToDoList\/List.js\n@@ -28,23 +28,20 @@ export default function List(props: Props) {\n ]);\n const [uid, setUID] = useState(4);\n \n- const handleClick = useCallback(\n- () => {\n- if (newItemText !== '') {\n- setItems([\n- ...items,\n- {\n- id: uid,\n- isComplete: false,\n- text: newItemText,\n- },\n- ]);\n- setUID(uid + 1);\n- setNewItemText('');\n- }\n- },\n- [newItemText, items, uid],\n- );\n+ const handleClick = useCallback(() => {\n+ if (newItemText !== '') {\n+ setItems([\n+ ...items,\n+ {\n+ id: uid,\n+ isComplete: false,\n+ text: newItemText,\n+ },\n+ ]);\n+ setUID(uid + 1);\n+ setNewItemText('');\n+ }\n+ }, [newItemText, items, uid]);\n \n const handleKeyPress = useCallback(\n event => {\ndiff --git a\/packages\/react-devtools-shell\/src\/app\/ToDoList\/ListItem.js b\/packages\/react-devtools-shell\/src\/app\/ToDoList\/ListItem.js\nindex 6d0a759169..9ef1afffdf 100644\n--- a\/packages\/react-devtools-shell\/src\/app\/ToDoList\/ListItem.js\n+++ b\/packages\/react-devtools-shell\/src\/app\/ToDoList\/ListItem.js\n@@ -19,19 +19,13 @@ type Props = {|\n |};\n \n function ListItem({item, removeItem, toggleItem}: Props) {\n- const handleDelete = useCallback(\n- () => {\n- removeItem(item);\n- },\n- [item, removeItem],\n- );\n+ const handleDelete = useCallback(() => {\n+ removeItem(item);\n+ }, [item, removeItem]);\n \n- const handleToggle = useCallback(\n- () => {\n- toggleItem(item);\n- },\n- [item, toggleItem],\n- );\n+ const handleToggle = useCallback(() => {\n+ toggleItem(item);\n+ }, [item, toggleItem]);\n \n return (\n
\ndiff --git a\/packages\/react-dom\/src\/tests\/ReactComponentLifeCycle-test.js b\/packages\/react-dom\/src\/tests\/ReactComponentLifeCycle-test.js\nindex 3b124941d7..6b51eb6a12 100644\n--- a\/packages\/react-dom\/src\/tests\/ReactComponentLifeCycle-test.js\n+++ b\/packages\/react-dom\/src\/tests\/ReactComponentLifeCycle-test.js\n@@ -1148,9 +1148,11 @@ describe('ReactComponentLifeCycle', () => {\n render() {\n childInstance = this;\n return (\n-
{`remote:${\n- this.state.remote\n- }, local:${this.state.local}`}<\/div>\n+ {`remote:${this.state.remote}, local:${this.state.local}`}<\/div>\n );\n }\n }\n@@ -1197,17 +1199,13 @@ describe('ReactComponentLifeCycle', () => {\n }\n getSnapshotBeforeUpdate(prevProps, prevState) {\n log.push(\n- `getSnapshotBeforeUpdate() prevProps:${prevProps.value} prevState:${\n- prevState.value\n- }`,\n+ `getSnapshotBeforeUpdate() prevProps:${prevProps.value} prevState:${prevState.value}`,\n );\n return 'abc';\n }\n componentDidUpdate(prevProps, prevState, snapshot) {\n log.push(\n- `componentDidUpdate() prevProps:${prevProps.value} prevState:${\n- prevState.value\n- } snapshot:${snapshot}`,\n+ `componentDidUpdate() prevProps:${prevProps.value} prevState:${prevState.value} snapshot:${snapshot}`,\n );\n }\n render() {\ndiff --git a\/packages\/react-dom\/src\/tests\/ReactCompositeComponent-test.js b\/packages\/react-dom\/src\/tests\/ReactCompositeComponent-test.js\nindex 5994813d69..908d418cac 100644\n--- a\/packages\/react-dom\/src\/tests\/ReactCompositeComponent-test.js\n+++ b\/packages\/react-dom\/src\/tests\/ReactCompositeComponent-test.js\n@@ -165,7 +165,9 @@ describe('ReactCompositeComponent', () => {\n \/\/ Old API based on heuristic\n let container = document.createElement('div');\n container.innerHTML = markup;\n- expect(() => ReactDOM.render(, container)).toWarnDev(\n+ expect(() =>\n+ ReactDOM.render(, container),\n+ ).toWarnDev(\n 'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +\n 'will stop working in React v17. Replace the ReactDOM.render() call ' +\n 'with ReactDOM.hydrate() if you want React to attach to the server HTML.',\ndiff --git a\/packages\/react-dom\/src\/tests\/ReactDOMComponent-test.js b\/packages\/react-dom\/src\/tests\/ReactDOMComponent-test.js\nindex acf81a3011..219b2346d2 100644\n--- a\/packages\/react-dom\/src\/tests\/ReactDOMComponent-test.js\n+++ b\/packages\/react-dom\/src\/tests\/ReactDOMComponent-test.js\n@@ -182,24 +182,21 @@ describe('ReactDOMComponent', () => {\n it('should warn for unknown string event handlers', () => {\n const container = document.createElement('div');\n expect(() =>\n- ReactDOM.render(
, container),\n+ ReactDOM.render(
, container),\n ).toErrorDev(\n 'Warning: Unknown event handler property `onUnknown`. It will be ignored.\\n in div (at )',\n );\n expect(container.firstChild.hasAttribute('onUnknown')).toBe(false);\n expect(container.firstChild.onUnknown).toBe(undefined);\n expect(() =>\n- ReactDOM.render(
, container),\n+ ReactDOM.render(
, container),\n ).toErrorDev(\n 'Warning: Unknown event handler property `onunknown`. It will be ignored.\\n in div (at )',\n );\n expect(container.firstChild.hasAttribute('onunknown')).toBe(false);\n expect(container.firstChild.onunknown).toBe(undefined);\n expect(() =>\n- ReactDOM.render(\n-
,\n- container,\n- ),\n+ ReactDOM.render(
, container),\n ).toErrorDev(\n 'Warning: Unknown event handler property `on-unknown`. It will be ignored.\\n in div (at **)',\n );\ndiff --git a\/packages\/react-dom\/src\/tests\/ReactDOMComponentTree-test.js b\/packages\/react-dom\/src\/tests\/ReactDOMComponentTree-test.js\nindex b00bd145ae..e27c3b5b66 100644\n--- a\/packages\/react-dom\/src\/tests\/ReactDOMComponentTree-test.js\n+++ b\/packages\/react-dom\/src\/tests\/ReactDOMComponentTree-test.js\n@@ -190,7 +190,9 @@ describe('ReactDOMComponentTree', () => {\n it('finds instance of node that is attempted to be unmounted', () => {\n const component =
;\n const node = ReactDOM.render(
{component}<\/div>, container);\n- expect(() => ReactDOM.unmountComponentAtNode(node)).toErrorDev(\n+ expect(() =>\n+ ReactDOM.unmountComponentAtNode(node),\n+ ).toErrorDev(\n \"unmountComponentAtNode(): The node you're attempting to unmount \" +\n 'was rendered by React and is not a top-level container. You may ' +\n 'have accidentally passed in a React root node instead of its ' +\n@@ -207,7 +209,9 @@ describe('ReactDOMComponentTree', () => {\n );\n const anotherComponent =
;\n const instance = ReactDOM.render(component, container);\n- expect(() => ReactDOM.render(anotherComponent, instance)).toErrorDev(\n+ expect(() =>\n+ ReactDOM.render(anotherComponent, instance),\n+ ).toErrorDev(\n 'render(...): Replacing React-rendered children with a new root ' +\n 'component. If you intended to update the children of this node, ' +\n 'you should instead have the existing children update their state ' +\ndiff --git a\/packages\/react-dom\/src\/tests\/ReactDOMFiber-test.js b\/packages\/react-dom\/src\/tests\/ReactDOMFiber-test.js\nindex 59d9b5a1fc..a9856cc3f0 100644\n--- a\/packages\/react-dom\/src\/tests\/ReactDOMFiber-test.js\n+++ b\/packages\/react-dom\/src\/tests\/ReactDOMFiber-test.js\n@@ -1151,7 +1151,9 @@ describe('ReactDOMFiber', () => {\n expect(container.innerHTML).toBe('
bar<\/div>');\n \/\/ then we mess with the DOM before an update\n container.innerHTML = '
MEOW.<\/div>';\n- expect(() => ReactDOM.render(
baz<\/div>, container)).toErrorDev(\n+ expect(() =>\n+ ReactDOM.render(
baz<\/div>, container),\n+ ).toErrorDev(\n 'render(...): ' +\n 'It looks like the React-rendered content of this container was ' +\n 'removed without using React. This is not supported and will ' +\n@@ -1168,7 +1170,9 @@ describe('ReactDOMFiber', () => {\n expect(container.innerHTML).toBe('
bar<\/div>');\n \/\/ then we mess with the DOM before an update\n container.innerHTML = '';\n- expect(() => ReactDOM.render(
baz<\/div>, container)).toErrorDev(\n+ expect(() =>\n+ ReactDOM.render(
baz<\/div>, container),\n+ ).toErrorDev(\n 'render(...): ' +\n 'It looks like the React-rendered content of this container was ' +\n 'removed without using React. This is not supported and will ' +\ndiff --git a\/packages\/react-dom\/src\/tests\/ReactDOMFiberAsync-test.internal.js b\/packages\/react-dom\/src\/tests\/ReactDOMFiberAsync-test.internal.js\nindex 1551567274..8cf28cc6ad 100644\n--- a\/packages\/react-dom\/src\/tests\/ReactDOMFiberAsync-test.internal.js\n+++ b\/packages\/react-dom\/src\/tests\/ReactDOMFiberAsync-test.internal.js\n@@ -593,14 +593,11 @@ describe('ReactDOMFiberAsync', () => {\n \n function App({label}) {\n const [step, setStep] = useState(0);\n- useEffect(\n- () => {\n- if (step < 3) {\n- setStep(step + 1);\n- }\n- },\n- [step],\n- );\n+ useEffect(() => {\n+ if (step < 3) {\n+ setStep(step + 1);\n+ }\n+ }, [step]);\n \n \/\/ The component should keep re-rendering itself until `step` is 3.\n return step === 3 ? 'Finished' : 'Unresolved';\ndiff --git a\/packages\/react-dom\/src\/tests\/ReactDOMServerIntegrationAttributes-test.js b\/packages\/react-dom\/src\/tests\/ReactDOMServerIntegrationAttributes-test.js\nindex f785addd44..87673b0e2c 100644\n--- a\/packages\/react-dom\/src\/tests\/ReactDOMServerIntegrationAttributes-test.js\n+++ b\/packages\/react-dom\/src\/tests\/ReactDOMServerIntegrationAttributes-test.js\n@@ -636,10 +636,7 @@ describe('ReactDOMServerIntegration', () => {\n });\n \n itRenders('no unknown events', async render => {\n- const e = await render(\n-
,\n- 1,\n- );\n+ const e = await render(
, 1);\n expect(e.getAttribute('onunknownevent')).toBe(null);\n });\n \ndiff --git a\/packages\/react-dom\/src\/tests\/ReactDOMServerIntegrationElements-test.js b\/packages\/react-dom\/src\/tests\/ReactDOMServerIntegrationElements-test.js\nindex 9c98f10cb2..5d56419a1a 100644\n--- a\/packages\/react-dom\/src\/tests\/ReactDOMServerIntegrationElements-test.js\n+++ b\/packages\/react-dom\/src\/tests\/ReactDOMServerIntegrationElements-test.js\n@@ -258,8 +258,7 @@ describe('ReactDOMServerIntegration', () => {\n
\n {[['a'], 'b']}\n
\n- \n- d\n+ d\n <\/div>\n e\n <\/div>,\n@@ -493,11 +492,13 @@ describe('ReactDOMServerIntegration', () => {\n \/\/ Put dangerouslySetInnerHTML one level deeper because otherwise\n \/\/ hydrating from a bad markup would cause a mismatch (since we don't\n \/\/ patch dangerouslySetInnerHTML as text content).\n- const e = (await render(\n-
\n- \n- <\/div>,\n- )).firstChild;\n+ const e = (\n+ await render(\n+
\n+ \n+ <\/div>,\n+ )\n+ ).firstChild;\n expect(e.childNodes.length).toBe(1);\n expect(e.firstChild.nodeType).toBe(TEXT_NODE_TYPE);\n expect(e.textContent).toBe('0');\n@@ -507,11 +508,13 @@ describe('ReactDOMServerIntegration', () => {\n \/\/ Put dangerouslySetInnerHTML one level deeper because otherwise\n \/\/ hydrating from a bad markup would cause a mismatch (since we don't\n \/\/ patch dangerouslySetInnerHTML as text content).\n- const e = (await render(\n-
\n- \n- <\/div>,\n- )).firstChild;\n+ const e = (\n+ await render(\n+
\n+ \n+ <\/div>,\n+ )\n+ ).firstChild;\n expect(e.childNodes.length).toBe(1);\n expect(e.firstChild.nodeType).toBe(TEXT_NODE_TYPE);\n expect(e.firstChild.data).toBe('false');\n@@ -523,11 +526,13 @@ describe('ReactDOMServerIntegration', () => {\n \/\/ Put dangerouslySetInnerHTML one level deeper because otherwise\n \/\/ hydrating from a bad markup would cause a mismatch (since we don't\n \/\/ patch dangerouslySetInnerHTML as text content).\n- const e = (await render(\n-
\n- \n- <\/div>,\n- )).firstChild;\n+ const e = (\n+ await render(\n+
\n+ \n+ <\/div>,\n+ )\n+ ).firstChild;\n expect(e.childNodes.length).toBe(1);\n expect(e.firstChild.nodeType).toBe(TEXT_NODE_TYPE);\n expect(e.textContent).toBe('hello');\ndiff --git a\/packages\/react-dom\/src\/tests\/ReactDOMServerIntegrationHooks-test.internal.js b\/packages\/react-dom\/src\/tests\/ReactDOMServerIntegrationHooks-test.internal.js\nindex b4f99453cd..a4e638cc00 100644\n--- a\/packages\/react-dom\/src\/tests\/ReactDOMServerIntegrationHooks-test.internal.js\n+++ b\/packages\/react-dom\/src\/tests\/ReactDOMServerIntegrationHooks-test.internal.js\n@@ -322,13 +322,10 @@ describe('ReactDOMServerHooks', () => {\n itRenders('basic render', async render => {\n function CapitalizedText(props) {\n const text = props.text;\n- const capitalizedText = useMemo(\n- () => {\n- yieldValue(`Capitalize '${text}'`);\n- return text.toUpperCase();\n- },\n- [text],\n- );\n+ const capitalizedText = useMemo(() => {\n+ yieldValue(`Capitalize '${text}'`);\n+ return text.toUpperCase();\n+ }, [text]);\n return ;\n }\n \n@@ -360,13 +357,10 @@ describe('ReactDOMServerHooks', () => {\n async render => {\n function CapitalizedText(props) {\n const [text, setText] = useState(props.text);\n- const capitalizedText = useMemo(\n- () => {\n- yieldValue(`Capitalize '${text}'`);\n- return text.toUpperCase();\n- },\n- [text],\n- );\n+ const capitalizedText = useMemo(() => {\n+ yieldValue(`Capitalize '${text}'`);\n+ return text.toUpperCase();\n+ }, [text]);\n \n if (text === 'hello') {\n setText('hello, world.');\n@@ -391,13 +385,10 @@ describe('ReactDOMServerHooks', () => {\n function CapitalizedText(props) {\n const [text, setText] = useState(props.text);\n const [count, setCount] = useState(0);\n- const capitalizedText = useMemo(\n- () => {\n- yieldValue(`Capitalize '${text}'`);\n- return text.toUpperCase();\n- },\n- [text],\n- );\n+ const capitalizedText = useMemo(() => {\n+ yieldValue(`Capitalize '${text}'`);\n+ return text.toUpperCase();\n+ }, [text]);\n \n yieldValue(count);\n \ndiff --git a\/packages\/react-dom\/src\/tests\/ReactDOMSuspensePlaceholder-test.js b\/packages\/react-dom\/src\/tests\/ReactDOMSuspensePlaceholder-test.js\nindex 7f1d1c5db0..94bd63ff02 100644\n--- a\/packages\/react-dom\/src\/tests\/ReactDOMSuspensePlaceholder-test.js\n+++ b\/packages\/react-dom\/src\/tests\/ReactDOMSuspensePlaceholder-test.js\n@@ -33,13 +33,16 @@ describe('ReactDOMSuspensePlaceholder', () => {\n container = document.createElement('div');\n document.body.appendChild(container);\n \n- TextResource = ReactCache.unstable_createResource(([text, ms = 0]) => {\n- return new Promise((resolve, reject) =>\n- setTimeout(() => {\n- resolve(text);\n- }, ms),\n- );\n- }, ([text, ms]) => text);\n+ TextResource = ReactCache.unstable_createResource(\n+ ([text, ms = 0]) => {\n+ return new Promise((resolve, reject) =>\n+ setTimeout(() => {\n+ resolve(text);\n+ }, ms),\n+ );\n+ },\n+ ([text, ms]) => text,\n+ );\n });\n \n afterEach(() => {\ndiff --git a\/packages\/react-dom\/src\/tests\/ReactFunctionComponent-test.js b\/packages\/react-dom\/src\/tests\/ReactFunctionComponent-test.js\nindex ff9c87be60..2b33321358 100644\n--- a\/packages\/react-dom\/src\/tests\/ReactFunctionComponent-test.js\n+++ b\/packages\/react-dom\/src\/tests\/ReactFunctionComponent-test.js\n@@ -163,11 +163,11 @@ describe('ReactFunctionComponent', () => {\n : \/\/ It happens because we don't save _owner in production for\n \/\/ function components.\n 'Element ref was specified as a string (me) but no owner was set. This could happen for one of' +\n- ' the following reasons:\\n' +\n- '1. You may be adding a ref to a function component\\n' +\n- \"2. You may be adding a ref to a component that was not created inside a component's render method\\n\" +\n- '3. You have multiple copies of React loaded\\n' +\n- 'See https:\/\/fb.me\/react-refs-must-have-owner for more information.',\n+ ' the following reasons:\\n' +\n+ '1. You may be adding a ref to a function component\\n' +\n+ \"2. You may be adding a ref to a component that was not created inside a component's render method\\n\" +\n+ '3. You have multiple copies of React loaded\\n' +\n+ 'See https:\/\/fb.me\/react-refs-must-have-owner for more information.',\n );\n });\n \ndiff --git a\/packages\/react-dom\/src\/tests\/ReactMount-test.js b\/packages\/react-dom\/src\/tests\/ReactMount-test.js\nindex 600a085260..8d1b03cb4b 100644\n--- a\/packages\/react-dom\/src\/tests\/ReactMount-test.js\n+++ b\/packages\/react-dom\/src\/tests\/ReactMount-test.js\n@@ -59,7 +59,9 @@ describe('ReactMount', () => {\n }\n }\n \n- expect(() => ReactTestUtils.renderIntoDocument(Component)).toErrorDev(\n+ expect(() =>\n+ ReactTestUtils.renderIntoDocument(Component),\n+ ).toErrorDev(\n 'Functions are not valid as a React child. ' +\n 'This may happen if you return a Component instead of from render. ' +\n 'Or maybe you meant to call this function rather than return it.',\n@@ -125,7 +127,9 @@ describe('ReactMount', () => {\n const container = document.createElement('container');\n container.innerHTML = ReactDOMServer.renderToString(
) + ' ';\n \n- expect(() => ReactDOM.hydrate(
, container)).toErrorDev(\n+ expect(() =>\n+ ReactDOM.hydrate(
, container),\n+ ).toErrorDev(\n 'Did not expect server HTML to contain the text node \" \" in .',\n {withoutStack: true},\n );\n@@ -195,7 +199,9 @@ describe('ReactMount', () => {\n \/\/ Test that blasting away children throws a warning\n const rootNode = container.firstChild;\n \n- expect(() => ReactDOM.render(, rootNode)).toErrorDev(\n+ expect(() =>\n+ ReactDOM.render(, rootNode),\n+ ).toErrorDev(\n 'Warning: render(...): Replacing React-rendered children with a new ' +\n 'root component. If you intended to update the children of this node, ' +\n 'you should instead have the existing children update their state and ' +\n@@ -223,7 +229,9 @@ describe('ReactMount', () => {\n \/\/ Make sure ReactDOM and ReactDOMOther are different copies\n expect(ReactDOM).not.toEqual(ReactDOMOther);\n \n- expect(() => ReactDOMOther.unmountComponentAtNode(container)).toErrorDev(\n+ expect(() =>\n+ ReactDOMOther.unmountComponentAtNode(container),\n+ ).toErrorDev(\n \"Warning: unmountComponentAtNode(): The node you're attempting to unmount \" +\n 'was rendered by another copy of React.',\n {withoutStack: true},\ndiff --git a\/packages\/react-dom\/src\/tests\/ReactMountDestruction-test.js b\/packages\/react-dom\/src\/tests\/ReactMountDestruction-test.js\nindex 360a6802d9..ed65c4cbfa 100644\n--- a\/packages\/react-dom\/src\/tests\/ReactMountDestruction-test.js\n+++ b\/packages\/react-dom\/src\/tests\/ReactMountDestruction-test.js\n@@ -50,7 +50,9 @@ describe('ReactMount', () => {\n \n \/\/ Test that unmounting at a root node gives a helpful warning\n const rootDiv = mainContainerDiv.firstChild;\n- expect(() => ReactDOM.unmountComponentAtNode(rootDiv)).toErrorDev(\n+ expect(() =>\n+ ReactDOM.unmountComponentAtNode(rootDiv),\n+ ).toErrorDev(\n \"Warning: unmountComponentAtNode(): The node you're attempting to \" +\n 'unmount was rendered by React and is not a top-level container. You ' +\n 'may have accidentally passed in a React root node instead of its ' +\n@@ -73,7 +75,9 @@ describe('ReactMount', () => {\n \n \/\/ Test that unmounting at a non-root node gives a different warning\n const nonRootDiv = mainContainerDiv.firstChild.firstChild;\n- expect(() => ReactDOM.unmountComponentAtNode(nonRootDiv)).toErrorDev(\n+ expect(() =>\n+ ReactDOM.unmountComponentAtNode(nonRootDiv),\n+ ).toErrorDev(\n \"Warning: unmountComponentAtNode(): The node you're attempting to \" +\n 'unmount was rendered by React and is not a top-level container. ' +\n 'Instead, have the parent component update its state and rerender in ' +\ndiff --git a\/packages\/react-dom\/src\/tests\/ReactMultiChild-test.js b\/packages\/react-dom\/src\/tests\/ReactMultiChild-test.js\nindex 12b845ef13..6eb0199be9 100644\n--- a\/packages\/react-dom\/src\/tests\/ReactMultiChild-test.js\n+++ b\/packages\/react-dom\/src\/tests\/ReactMultiChild-test.js\n@@ -281,7 +281,16 @@ describe('ReactMultiChild', () => {\n it('should warn for using maps as children with owner info', () => {\n class Parent extends React.Component {\n render() {\n- return
{new Map([['foo', 0], ['bar', 1]])}<\/div>;\n+ return (\n+
\n+ {\n+ new Map([\n+ ['foo', 0],\n+ ['bar', 1],\n+ ])\n+ }\n+ <\/div>\n+ );\n }\n }\n const container = document.createElement('div');\n@@ -296,8 +305,8 @@ describe('ReactMultiChild', () => {\n \n it('should warn for using generators as children', () => {\n function* Foo() {\n- yield
Hello<\/h1>;\n- yield
World<\/h1>;\n+ yield (
Hello<\/h1>);\n+ yield (
World<\/h1>);\n }\n \n const div = document.createElement('div');\n@@ -318,8 +327,8 @@ describe('ReactMultiChild', () => {\n it('should not warn for using generators in legacy iterables', () => {\n const fooIterable = {\n '@@iterator': function() {\n- yield
Hello<\/h1>;\n- yield
World<\/h1>;\n+ yield (
Hello<\/h1>);\n+ yield (
World<\/h1>);\n },\n };\n \n@@ -338,8 +347,8 @@ describe('ReactMultiChild', () => {\n it('should not warn for using generators in modern iterables', () => {\n const fooIterable = {\n [Symbol.iterator]: function() {\n- yield
Hello<\/h1>;\n- yield
World<\/h1>;\n+ yield (
Hello<\/h1>);\n+ yield (
World<\/h1>);\n },\n };\n \n@@ -374,7 +383,13 @@ describe('ReactMultiChild', () => {\n class Letters extends React.Component {\n render() {\n const letters = this.props.letters.split('');\n- return
{letters.map(c => )}<\/div>;\n+ return (\n+
\n+ {letters.map(c => (\n+ \n+ ))}\n+ <\/div>\n+ );\n }\n }\n \ndiff --git a\/packages\/react-dom\/src\/tests\/ReactRenderDocument-test.js b\/packages\/react-dom\/src\/tests\/ReactRenderDocument-test.js\nindex a85d864756..97ff0393f8 100644\n--- a\/packages\/react-dom\/src\/tests\/ReactRenderDocument-test.js\n+++ b\/packages\/react-dom\/src\/tests\/ReactRenderDocument-test.js\n@@ -35,7 +35,9 @@ describe('rendering React components at document', () => {\n \n describe('with old implicit hydration API', () => {\n function expectDeprecationWarningWithFiber(callback) {\n- expect(callback).toWarnDev(\n+ expect(\n+ callback,\n+ ).toWarnDev(\n 'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +\n 'will stop working in React v17. Replace the ReactDOM.render() call ' +\n 'with ReactDOM.hydrate() if you want React to attach to the server HTML.',\ndiff --git a\/packages\/react-dom\/src\/tests\/ReactServerRendering-test.js b\/packages\/react-dom\/src\/tests\/ReactServerRendering-test.js\nindex e68de16057..bcefcdb652 100644\n--- a\/packages\/react-dom\/src\/tests\/ReactServerRendering-test.js\n+++ b\/packages\/react-dom\/src\/tests\/ReactServerRendering-test.js\n@@ -644,7 +644,9 @@ describe('ReactDOMServer', () => {\n }\n \n ReactDOMServer.renderToString();\n- expect(() => jest.runOnlyPendingTimers()).toErrorDev(\n+ expect(() =>\n+ jest.runOnlyPendingTimers(),\n+ ).toErrorDev(\n 'Warning: setState(...): Can only update a mounting component.' +\n ' This usually means you called setState() outside componentWillMount() on the server.' +\n ' This is a no-op.\\n\\nPlease check the code for the Foo component.',\n@@ -672,7 +674,9 @@ describe('ReactDOMServer', () => {\n }\n \n ReactDOMServer.renderToString();\n- expect(() => jest.runOnlyPendingTimers()).toErrorDev(\n+ expect(() =>\n+ jest.runOnlyPendingTimers(),\n+ ).toErrorDev(\n 'Warning: forceUpdate(...): Can only update a mounting component. ' +\n 'This usually means you called forceUpdate() outside componentWillMount() on the server. ' +\n 'This is a no-op.\\n\\nPlease check the code for the Baz component.',\ndiff --git a\/packages\/react-dom\/src\/tests\/ReactTestUtils-test.js b\/packages\/react-dom\/src\/tests\/ReactTestUtils-test.js\nindex 829010d978..540f23edd1 100644\n--- a\/packages\/react-dom\/src\/tests\/ReactTestUtils-test.js\n+++ b\/packages\/react-dom\/src\/tests\/ReactTestUtils-test.js\n@@ -53,7 +53,9 @@ describe('ReactTestUtils', () => {\n MockedComponent.prototype.render = jest.fn();\n \n \/\/ Patch it up so it returns its children.\n- expect(() => ReactTestUtils.mockComponent(MockedComponent)).toWarnDev(\n+ expect(() =>\n+ ReactTestUtils.mockComponent(MockedComponent),\n+ ).toWarnDev(\n 'ReactTestUtils.mockComponent() is deprecated. ' +\n 'Use shallow rendering or jest.mock() instead.\\n\\n' +\n 'See https:\/\/fb.me\/test-utils-mock-component for more information.',\ndiff --git a\/packages\/react-dom\/src\/tests\/ReactTestUtilsAct-test.js b\/packages\/react-dom\/src\/tests\/ReactTestUtilsAct-test.js\nindex 7b380a0b82..d68a4a1141 100644\n--- a\/packages\/react-dom\/src\/tests\/ReactTestUtilsAct-test.js\n+++ b\/packages\/react-dom\/src\/tests\/ReactTestUtilsAct-test.js\n@@ -337,12 +337,9 @@ function runActTests(label, render, unmount, rerender) {\n await null;\n setState(x => x + 1);\n }\n- React.useEffect(\n- () => {\n- ticker();\n- },\n- [Math.min(state, 4)],\n- );\n+ React.useEffect(() => {\n+ ticker();\n+ }, [Math.min(state, 4)]);\n return state;\n }\n \n@@ -521,13 +518,10 @@ function runActTests(label, render, unmount, rerender) {\n await null;\n setState(x => x + 1);\n }\n- React.useEffect(\n- () => {\n- Scheduler.unstable_yieldValue(state);\n- ticker();\n- },\n- [Math.min(state, 4)],\n- );\n+ React.useEffect(() => {\n+ Scheduler.unstable_yieldValue(state);\n+ ticker();\n+ }, [Math.min(state, 4)]);\n return state;\n }\n \ndiff --git a\/packages\/react-dom\/src\/tests\/ReactTestUtilsActUnmockedScheduler-test.js b\/packages\/react-dom\/src\/tests\/ReactTestUtilsActUnmockedScheduler-test.js\nindex baa4f63e4b..3017096d30 100644\n--- a\/packages\/react-dom\/src\/tests\/ReactTestUtilsActUnmockedScheduler-test.js\n+++ b\/packages\/react-dom\/src\/tests\/ReactTestUtilsActUnmockedScheduler-test.js\n@@ -147,13 +147,10 @@ it('can handle cascading promises', async () => {\n await null;\n setState(x => x + 1);\n }\n- React.useEffect(\n- () => {\n- yields.push(state);\n- ticker();\n- },\n- [Math.min(state, 4)],\n- );\n+ React.useEffect(() => {\n+ yields.push(state);\n+ ticker();\n+ }, [Math.min(state, 4)]);\n return state;\n }\n \ndiff --git a\/packages\/react-dom\/src\/tests\/renderSubtreeIntoContainer-test.js b\/packages\/react-dom\/src\/tests\/renderSubtreeIntoContainer-test.js\nindex 881c7b15d7..c5ad79e2eb 100644\n--- a\/packages\/react-dom\/src\/tests\/renderSubtreeIntoContainer-test.js\n+++ b\/packages\/react-dom\/src\/tests\/renderSubtreeIntoContainer-test.js\n@@ -312,11 +312,11 @@ describe('renderSubtreeIntoContainer', () => {\n }).toThrow(\n DEV\n ? '_processChildContext is not available in React 16+. This likely ' +\n- 'means you have multiple copies of React and are attempting to nest ' +\n- 'a React 15 tree inside a React 16 tree using ' +\n- \"unstable_renderSubtreeIntoContainer, which isn't supported. Try to \" +\n- 'make sure you have only one copy of React (and ideally, switch to ' +\n- 'ReactDOM.createPortal).'\n+ 'means you have multiple copies of React and are attempting to nest ' +\n+ 'a React 15 tree inside a React 16 tree using ' +\n+ \"unstable_renderSubtreeIntoContainer, which isn't supported. Try to \" +\n+ 'make sure you have only one copy of React (and ideally, switch to ' +\n+ 'ReactDOM.createPortal).'\n : \"Cannot read property '_processChildContext' of undefined\",\n );\n });\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMLegacy.js b\/packages\/react-dom\/src\/client\/ReactDOMLegacy.js\nindex aca2a7a7ad..3da5e468c2 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMLegacy.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMLegacy.js\n@@ -385,9 +385,9 @@ export function unmountComponentAtNode(container: DOMContainer) {\n 'was rendered by React and is not a top-level container. %s',\n isContainerReactRoot\n ? 'You may have accidentally passed in a React root node instead ' +\n- 'of its container.'\n+ 'of its container.'\n : 'Instead, have the parent component update its state and ' +\n- 'rerender in order to remove this component.',\n+ 'rerender in order to remove this component.',\n );\n }\n }\ndiff --git a\/packages\/react-dom\/src\/events\/SelectEventPlugin.js b\/packages\/react-dom\/src\/events\/SelectEventPlugin.js\nindex cd1c1a436a..b358e896ea 100644\n--- a\/packages\/react-dom\/src\/events\/SelectEventPlugin.js\n+++ b\/packages\/react-dom\/src\/events\/SelectEventPlugin.js\n@@ -94,8 +94,8 @@ function getEventTargetDocument(eventTarget) {\n return eventTarget.window === eventTarget\n ? eventTarget.document\n : eventTarget.nodeType === DOCUMENT_NODE\n- ? eventTarget\n- : eventTarget.ownerDocument;\n+ ? eventTarget\n+ : eventTarget.ownerDocument;\n }\n \n \/**\ndiff --git a\/packages\/react-dom\/src\/events\/SyntheticWheelEvent.js b\/packages\/react-dom\/src\/events\/SyntheticWheelEvent.js\nindex 7c6a1d1f4e..e8e152d341 100644\n--- a\/packages\/react-dom\/src\/events\/SyntheticWheelEvent.js\n+++ b\/packages\/react-dom\/src\/events\/SyntheticWheelEvent.js\n@@ -16,20 +16,20 @@ const SyntheticWheelEvent = SyntheticMouseEvent.extend({\n return 'deltaX' in event\n ? event.deltaX\n : \/\/ Fallback to `wheelDeltaX` for Webkit and normalize (right is positive).\n- 'wheelDeltaX' in event\n- ? -event.wheelDeltaX\n- : 0;\n+ 'wheelDeltaX' in event\n+ ? -event.wheelDeltaX\n+ : 0;\n },\n deltaY(event) {\n return 'deltaY' in event\n ? event.deltaY\n : \/\/ Fallback to `wheelDeltaY` for Webkit and normalize (down is positive).\n- 'wheelDeltaY' in event\n- ? -event.wheelDeltaY\n- : \/\/ Fallback to `wheelDelta` for IE<9 and normalize (down is positive).\n- 'wheelDelta' in event\n- ? -event.wheelDelta\n- : 0;\n+ 'wheelDeltaY' in event\n+ ? -event.wheelDeltaY\n+ : \/\/ Fallback to `wheelDelta` for IE<9 and normalize (down is positive).\n+ 'wheelDelta' in event\n+ ? -event.wheelDelta\n+ : 0;\n },\n deltaZ: null,\n \ndiff --git a\/packages\/react-dom\/src\/events\/tests\/SimpleEventPlugin-test.internal.js b\/packages\/react-dom\/src\/events\/tests\/SimpleEventPlugin-test.internal.js\nindex 5ddf53fb33..43d2ad4439 100644\n--- a\/packages\/react-dom\/src\/events\/tests\/SimpleEventPlugin-test.internal.js\n+++ b\/packages\/react-dom\/src\/events\/tests\/SimpleEventPlugin-test.internal.js\n@@ -388,9 +388,7 @@ describe('SimpleEventPlugin', function() {\n class Button extends React.Component {\n state = {lowPriCount: 0};\n render() {\n- const text = `High-pri count: ${\n- this.props.highPriCount\n- }, Low-pri count: ${this.state.lowPriCount}`;\n+ const text = `High-pri count: ${this.props.highPriCount}, Low-pri count: ${this.state.lowPriCount}`;\n Scheduler.unstable_yieldValue(text);\n return (\n {\n 'See https:\/\/fb.me\/react-event-pooling for more information.';\n \n \/\/ once for each property accessed\n- expect(() => expect(syntheticEvent.type).toBe(null)).toErrorDev(\n- getExpectedWarning('type'),\n- {withoutStack: true},\n- );\n- expect(() => expect(syntheticEvent.nativeEvent).toBe(null)).toErrorDev(\n- getExpectedWarning('nativeEvent'),\n- {withoutStack: true},\n- );\n- expect(() => expect(syntheticEvent.target).toBe(null)).toErrorDev(\n- getExpectedWarning('target'),\n- {withoutStack: true},\n- );\n+ expect(() =>\n+ expect(syntheticEvent.type).toBe(null),\n+ ).toErrorDev(getExpectedWarning('type'), {withoutStack: true});\n+ expect(() =>\n+ expect(syntheticEvent.nativeEvent).toBe(null),\n+ ).toErrorDev(getExpectedWarning('nativeEvent'), {withoutStack: true});\n+ expect(() =>\n+ expect(syntheticEvent.target).toBe(null),\n+ ).toErrorDev(getExpectedWarning('target'), {withoutStack: true});\n \n expect(expectedCount).toBe(1);\n });\n@@ -211,7 +208,9 @@ describe('SyntheticEvent', () => {\n event.initEvent('click', true, true);\n node.dispatchEvent(event);\n \n- expect(() => syntheticEvent.preventDefault()).toErrorDev(\n+ expect(() =>\n+ syntheticEvent.preventDefault(),\n+ ).toErrorDev(\n 'Warning: This synthetic event is reused for performance reasons. If ' +\n \"you're seeing this, you're accessing the method `preventDefault` on a \" +\n 'released\/nullified synthetic event. This is a no-op function. If you must ' +\n@@ -238,7 +237,9 @@ describe('SyntheticEvent', () => {\n \n node.dispatchEvent(event);\n \n- expect(() => syntheticEvent.stopPropagation()).toErrorDev(\n+ expect(() =>\n+ syntheticEvent.stopPropagation(),\n+ ).toErrorDev(\n 'Warning: This synthetic event is reused for performance reasons. If ' +\n \"you're seeing this, you're accessing the method `stopPropagation` on a \" +\n 'released\/nullified synthetic event. This is a no-op function. If you must ' +\ndiff --git a\/packages\/react-interactions\/accessibility\/src\/FocusContain.js b\/packages\/react-interactions\/accessibility\/src\/FocusContain.js\nindex 81e314eddc..78316af939 100644\n--- a\/packages\/react-interactions\/accessibility\/src\/FocusContain.js\n+++ b\/packages\/react-interactions\/accessibility\/src\/FocusContain.js\n@@ -64,22 +64,19 @@ export default function FocusContain({\n }\n },\n });\n- useLayoutEffect(\n- () => {\n- const scope = scopeRef.current;\n- if (\n- scope !== null &&\n- disabled !== true &&\n- !scope.containsNode(document.activeElement)\n- ) {\n- const fistElem = scope.queryFirstNode(scopeQuery);\n- if (fistElem !== null) {\n- fistElem.focus();\n- }\n+ useLayoutEffect(() => {\n+ const scope = scopeRef.current;\n+ if (\n+ scope !== null &&\n+ disabled !== true &&\n+ !scope.containsNode(document.activeElement)\n+ ) {\n+ const fistElem = scope.queryFirstNode(scopeQuery);\n+ if (fistElem !== null) {\n+ fistElem.focus();\n }\n- },\n- [disabled],\n- );\n+ }\n+ }, [disabled]);\n \n return (\n = left && x <= right && y >= top && y <= bottom);\n+ x >= left &&\n+ x <= right &&\n+ y >= top &&\n+ y <= bottom;\n }\n \n \/\/ After some investigation work, screen reader virtual\ndiff --git a\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js b\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js\nindex 33ce87ddff..1871c48786 100644\n--- a\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js\n+++ b\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js\n@@ -163,11 +163,10 @@ export function finalizeInitialChildren(\n \n \/\/ Map from child objects to native tags.\n \/\/ Either way we need to pass a copy of the Array to prevent it from being frozen.\n- const nativeTags = parentInstance._children.map(\n- child =>\n- typeof child === 'number'\n- ? child \/\/ Leaf node (eg text)\n- : child._nativeTag,\n+ const nativeTags = parentInstance._children.map(child =>\n+ typeof child === 'number'\n+ ? child \/\/ Leaf node (eg text)\n+ : child._nativeTag,\n );\n \n UIManager.setChildren(\ndiff --git a\/packages\/react-native-renderer\/src\/tests\/ReactFabric-test.internal.js b\/packages\/react-native-renderer\/src\/tests\/ReactFabric-test.internal.js\nindex 3290abcd58..51dd4ca835 100644\n--- a\/packages\/react-native-renderer\/src\/tests\/ReactFabric-test.internal.js\n+++ b\/packages\/react-native-renderer\/src\/tests\/ReactFabric-test.internal.js\n@@ -280,11 +280,9 @@ describe('ReactFabric', () => {\n expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled();\n ReactFabric.dispatchCommand(viewRef, 'updateCommand', [10, 20]);\n expect(nativeFabricUIManager.dispatchCommand).toHaveBeenCalledTimes(1);\n- expect(nativeFabricUIManager.dispatchCommand).toHaveBeenCalledWith(\n- expect.any(Object),\n- 'updateCommand',\n- [10, 20],\n- );\n+ expect(\n+ nativeFabricUIManager.dispatchCommand,\n+ ).toHaveBeenCalledWith(expect.any(Object), 'updateCommand', [10, 20]);\n });\n });\n \n@@ -550,7 +548,11 @@ describe('ReactFabric', () => {\n render() {\n const chars = this.props.chars.split('');\n return (\n- {chars.map(text => )}<\/View>\n+ \n+ {chars.map(text => (\n+ \n+ ))}\n+ <\/View>\n );\n }\n }\n@@ -586,7 +588,11 @@ describe('ReactFabric', () => {\n render() {\n const chars = this.state.chars.split('');\n return (\n- {chars.map(text => )}<\/View>\n+ \n+ {chars.map(text => (\n+ \n+ ))}\n+ <\/View>\n );\n }\n }\ndiff --git a\/packages\/react-native-renderer\/src\/tests\/ReactFabricAndNative-test.internal.js b\/packages\/react-native-renderer\/src\/tests\/ReactFabricAndNative-test.internal.js\nindex 5efeebfd92..5156b67cc8 100644\n--- a\/packages\/react-native-renderer\/src\/tests\/ReactFabricAndNative-test.internal.js\n+++ b\/packages\/react-native-renderer\/src\/tests\/ReactFabricAndNative-test.internal.js\n@@ -87,11 +87,9 @@ describe('created with ReactFabric called with ReactNative', () => {\n expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled();\n ReactNative.dispatchCommand(ref.current, 'myCommand', [10, 20]);\n expect(nativeFabricUIManager.dispatchCommand).toHaveBeenCalledTimes(1);\n- expect(nativeFabricUIManager.dispatchCommand).toHaveBeenCalledWith(\n- expect.any(Object),\n- 'myCommand',\n- [10, 20],\n- );\n+ expect(\n+ nativeFabricUIManager.dispatchCommand,\n+ ).toHaveBeenCalledWith(expect.any(Object), 'myCommand', [10, 20]);\n expect(UIManager.dispatchViewManagerCommand).not.toBeCalled();\n });\n });\n@@ -167,11 +165,9 @@ describe('created with ReactNative called with ReactFabric', () => {\n expect(UIManager.dispatchViewManagerCommand).not.toBeCalled();\n ReactFabric.dispatchCommand(ref.current, 'myCommand', [10, 20]);\n expect(UIManager.dispatchViewManagerCommand).toHaveBeenCalledTimes(1);\n- expect(UIManager.dispatchViewManagerCommand).toHaveBeenCalledWith(\n- expect.any(Number),\n- 'myCommand',\n- [10, 20],\n- );\n+ expect(\n+ UIManager.dispatchViewManagerCommand,\n+ ).toHaveBeenCalledWith(expect.any(Number), 'myCommand', [10, 20]);\n \n expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled();\n });\ndiff --git a\/packages\/react-native-renderer\/src\/tests\/ReactNativeMount-test.internal.js b\/packages\/react-native-renderer\/src\/tests\/ReactNativeMount-test.internal.js\nindex 946638b72a..ac38fcfe2f 100644\n--- a\/packages\/react-native-renderer\/src\/tests\/ReactNativeMount-test.internal.js\n+++ b\/packages\/react-native-renderer\/src\/tests\/ReactNativeMount-test.internal.js\n@@ -125,11 +125,9 @@ describe('ReactNative', () => {\n expect(UIManager.dispatchViewManagerCommand).not.toBeCalled();\n ReactNative.dispatchCommand(viewRef, 'updateCommand', [10, 20]);\n expect(UIManager.dispatchViewManagerCommand).toHaveBeenCalledTimes(1);\n- expect(UIManager.dispatchViewManagerCommand).toHaveBeenCalledWith(\n- expect.any(Number),\n- 'updateCommand',\n- [10, 20],\n- );\n+ expect(\n+ UIManager.dispatchViewManagerCommand,\n+ ).toHaveBeenCalledWith(expect.any(Number), 'updateCommand', [10, 20]);\n });\n });\n \n@@ -436,7 +434,11 @@ describe('ReactNative', () => {\n render() {\n const chars = this.props.chars.split('');\n return (\n- {chars.map(text => )}<\/View>\n+ \n+ {chars.map(text => (\n+ \n+ ))}\n+ <\/View>\n );\n }\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\nindex b65e8610f6..6c34f2bbf4 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n@@ -2384,7 +2384,9 @@ function validateSuspenseListChildren(\n if (DEV) {\n if (\n (revealOrder === 'forwards' || revealOrder === 'backwards') &&\n- (children !== undefined && children !== null && children !== false)\n+ children !== undefined &&\n+ children !== null &&\n+ children !== false\n ) {\n if (Array.isArray(children)) {\n for (let i = 0; i < children.length; i++) {\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.js b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.js\nindex a5bd4cf3cc..953adfb468 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.js\n@@ -297,9 +297,7 @@ function commitBeforeMutationLifeCycles(\n prevState,\n );\n if (DEV) {\n- const didWarnSet = ((didWarnAboutUndefinedSnapshotBeforeUpdate: any): Set<\n- mixed,\n- >);\n+ const didWarnSet = ((didWarnAboutUndefinedSnapshotBeforeUpdate: any): Set);\n if (snapshot === undefined && !didWarnSet.has(finishedWork.type)) {\n didWarnSet.add(finishedWork.type);\n console.error(\n@@ -940,8 +938,7 @@ function commitContainer(finishedWork: Fiber) {\n const portalOrRoot: {\n containerInfo: Container,\n pendingChildren: ChildSet,\n- } =\n- finishedWork.stateNode;\n+ } = finishedWork.stateNode;\n const {containerInfo, pendingChildren} = portalOrRoot;\n replaceContainerChildren(containerInfo, pendingChildren);\n return;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js\nindex a07256f48f..46ebd9799f 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js\n@@ -435,8 +435,7 @@ if (supportsMutation) {\n const portalOrRoot: {\n containerInfo: Container,\n pendingChildren: ChildSet,\n- } =\n- workInProgress.stateNode;\n+ } = workInProgress.stateNode;\n const childrenUnchanged = workInProgress.firstEffect === null;\n if (childrenUnchanged) {\n \/\/ No changes, just reuse the existing instance.\n@@ -1201,8 +1200,7 @@ function completeWork(\n let fundamentalInstance: ReactFundamentalComponentInstance<\n any,\n any,\n- > | null =\n- workInProgress.stateNode;\n+ > | null = workInProgress.stateNode;\n \n if (fundamentalInstance === null) {\n const getInitialState = fundamentalImpl.getInitialState;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHooks.js b\/packages\/react-reconciler\/src\/ReactFiberHooks.js\nindex 03711d756a..bd540ef9a0 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberHooks.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHooks.js\n@@ -1141,18 +1141,15 @@ function mountDeferredValue(\n config: TimeoutConfig | void | null,\n ): T {\n const [prevValue, setValue] = mountState(value);\n- mountEffect(\n- () => {\n- const previousConfig = ReactCurrentBatchConfig.suspense;\n- ReactCurrentBatchConfig.suspense = config === undefined ? null : config;\n- try {\n- setValue(value);\n- } finally {\n- ReactCurrentBatchConfig.suspense = previousConfig;\n- }\n- },\n- [value, config],\n- );\n+ mountEffect(() => {\n+ const previousConfig = ReactCurrentBatchConfig.suspense;\n+ ReactCurrentBatchConfig.suspense = config === undefined ? null : config;\n+ try {\n+ setValue(value);\n+ } finally {\n+ ReactCurrentBatchConfig.suspense = previousConfig;\n+ }\n+ }, [value, config]);\n return prevValue;\n }\n \n@@ -1161,18 +1158,15 @@ function updateDeferredValue(\n config: TimeoutConfig | void | null,\n ): T {\n const [prevValue, setValue] = updateState(value);\n- updateEffect(\n- () => {\n- const previousConfig = ReactCurrentBatchConfig.suspense;\n- ReactCurrentBatchConfig.suspense = config === undefined ? null : config;\n- try {\n- setValue(value);\n- } finally {\n- ReactCurrentBatchConfig.suspense = previousConfig;\n- }\n- },\n- [value, config],\n- );\n+ updateEffect(() => {\n+ const previousConfig = ReactCurrentBatchConfig.suspense;\n+ ReactCurrentBatchConfig.suspense = config === undefined ? null : config;\n+ try {\n+ setValue(value);\n+ } finally {\n+ ReactCurrentBatchConfig.suspense = previousConfig;\n+ }\n+ }, [value, config]);\n return prevValue;\n }\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberRoot.js b\/packages\/react-reconciler\/src\/ReactFiberRoot.js\nindex f1314e3108..ee6ebbca5d 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberRoot.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberRoot.js\n@@ -163,8 +163,8 @@ export function isRootSuspendedAtTime(\n const lastSuspendedTime = root.lastSuspendedTime;\n return (\n firstSuspendedTime !== NoWork &&\n- (firstSuspendedTime >= expirationTime &&\n- lastSuspendedTime <= expirationTime)\n+ firstSuspendedTime >= expirationTime &&\n+ lastSuspendedTime <= expirationTime\n );\n }\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.js b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.js\nindex bbf9c96a6f..c0deae8d75 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.js\n@@ -2466,16 +2466,16 @@ function jnd(timeElapsed: number) {\n return timeElapsed < 120\n ? 120\n : timeElapsed < 480\n- ? 480\n- : timeElapsed < 1080\n- ? 1080\n- : timeElapsed < 1920\n- ? 1920\n- : timeElapsed < 3000\n- ? 3000\n- : timeElapsed < 4320\n- ? 4320\n- : ceil(timeElapsed \/ 1960) * 1960;\n+ ? 480\n+ : timeElapsed < 1080\n+ ? 1080\n+ : timeElapsed < 1920\n+ ? 1920\n+ : timeElapsed < 3000\n+ ? 3000\n+ : timeElapsed < 4320\n+ ? 4320\n+ : ceil(timeElapsed \/ 1960) * 1960;\n }\n \n function computeMsUntilSuspenseLoadingDelay(\ndiff --git a\/packages\/react-reconciler\/src\/tests\/ReactBatchedMode-test.internal.js b\/packages\/react-reconciler\/src\/tests\/ReactBatchedMode-test.internal.js\nindex 19ab07bc66..1104d0bcba 100644\n--- a\/packages\/react-reconciler\/src\/tests\/ReactBatchedMode-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/tests\/ReactBatchedMode-test.internal.js\n@@ -18,14 +18,17 @@ describe('ReactBlockingMode', () => {\n ReactCache = require('react-cache');\n Suspense = React.Suspense;\n \n- TextResource = ReactCache.unstable_createResource(([text, ms = 0]) => {\n- return new Promise((resolve, reject) =>\n- setTimeout(() => {\n- Scheduler.unstable_yieldValue(`Promise resolved [${text}]`);\n- resolve(text);\n- }, ms),\n- );\n- }, ([text, ms]) => text);\n+ TextResource = ReactCache.unstable_createResource(\n+ ([text, ms = 0]) => {\n+ return new Promise((resolve, reject) =>\n+ setTimeout(() => {\n+ Scheduler.unstable_yieldValue(`Promise resolved [${text}]`);\n+ resolve(text);\n+ }, ms),\n+ );\n+ },\n+ ([text, ms]) => text,\n+ );\n });\n \n function Text(props) {\ndiff --git a\/packages\/react-reconciler\/src\/tests\/ReactFragment-test.js b\/packages\/react-reconciler\/src\/tests\/ReactFragment-test.js\nindex 10537e0d5a..c258b25146 100644\n--- a\/packages\/react-reconciler\/src\/tests\/ReactFragment-test.js\n+++ b\/packages\/react-reconciler\/src\/tests\/ReactFragment-test.js\n@@ -23,8 +23,8 @@ describe('ReactFragment', () => {\n });\n \n function div(...children) {\n- children = children.map(\n- c => (typeof c === 'string' ? {text: c, hidden: false} : c),\n+ children = children.map(c =>\n+ typeof c === 'string' ? {text: c, hidden: false} : c,\n );\n return {type: 'div', children, prop: undefined, hidden: false};\n }\ndiff --git a\/packages\/react-reconciler\/src\/tests\/ReactHooks-test.internal.js b\/packages\/react-reconciler\/src\/tests\/ReactHooks-test.internal.js\nindex b273a66755..2ebf8d16a8 100644\n--- a\/packages\/react-reconciler\/src\/tests\/ReactHooks-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/tests\/ReactHooks-test.internal.js\n@@ -625,10 +625,13 @@ describe('ReactHooks', () => {\n it('warns if switching from dependencies to no dependencies', () => {\n const {useMemo} = React;\n function App({text, hasDeps}) {\n- const resolvedText = useMemo(() => {\n- Scheduler.unstable_yieldValue('Compute');\n- return text.toUpperCase();\n- }, hasDeps ? null : [text]);\n+ const resolvedText = useMemo(\n+ () => {\n+ Scheduler.unstable_yieldValue('Compute');\n+ return text.toUpperCase();\n+ },\n+ hasDeps ? null : [text],\n+ );\n return resolvedText;\n }\n \n@@ -1183,7 +1186,10 @@ describe('ReactHooks', () => {\n React.useLayoutEffect(() => {});\n React.useCallback(() => {});\n React.useRef();\n- React.useImperativeHandle(() => {}, () => {});\n+ React.useImperativeHandle(\n+ () => {},\n+ () => {},\n+ );\n if (DEV) {\n React.useDebugValue();\n }\ndiff --git a\/packages\/react-reconciler\/src\/tests\/ReactHooksWithNoopRenderer-test.internal.js b\/packages\/react-reconciler\/src\/tests\/ReactHooksWithNoopRenderer-test.internal.js\nindex fc8f1661a3..8ded101a09 100644\n--- a\/packages\/react-reconciler\/src\/tests\/ReactHooksWithNoopRenderer-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/tests\/ReactHooksWithNoopRenderer-test.internal.js\n@@ -63,14 +63,17 @@ describe('ReactHooksWithNoopRenderer', () => {\n Suspense = React.Suspense;\n act = ReactNoop.act;\n \n- TextResource = ReactCache.unstable_createResource(([text, ms = 0]) => {\n- return new Promise((resolve, reject) =>\n- setTimeout(() => {\n- Scheduler.unstable_yieldValue(`Promise resolved [${text}]`);\n- resolve(text);\n- }, ms),\n- );\n- }, ([text, ms]) => text);\n+ TextResource = ReactCache.unstable_createResource(\n+ ([text, ms = 0]) => {\n+ return new Promise((resolve, reject) =>\n+ setTimeout(() => {\n+ Scheduler.unstable_yieldValue(`Promise resolved [${text}]`);\n+ resolve(text);\n+ }, ms),\n+ );\n+ },\n+ ([text, ms]) => text,\n+ );\n });\n \n function span(prop) {\n@@ -846,13 +849,10 @@ describe('ReactHooksWithNoopRenderer', () => {\n it('updates have async priority', () => {\n function Counter(props) {\n const [count, updateCount] = useState('(empty)');\n- useEffect(\n- () => {\n- Scheduler.unstable_yieldValue(`Schedule update [${props.count}]`);\n- updateCount(props.count);\n- },\n- [props.count],\n- );\n+ useEffect(() => {\n+ Scheduler.unstable_yieldValue(`Schedule update [${props.count}]`);\n+ updateCount(props.count);\n+ }, [props.count]);\n return ;\n }\n act(() => {\n@@ -884,13 +884,10 @@ describe('ReactHooksWithNoopRenderer', () => {\n it('updates have async priority even if effects are flushed early', () => {\n function Counter(props) {\n const [count, updateCount] = useState('(empty)');\n- useEffect(\n- () => {\n- Scheduler.unstable_yieldValue(`Schedule update [${props.count}]`);\n- updateCount(props.count);\n- },\n- [props.count],\n- );\n+ useEffect(() => {\n+ Scheduler.unstable_yieldValue(`Schedule update [${props.count}]`);\n+ updateCount(props.count);\n+ }, [props.count]);\n return ;\n }\n act(() => {\n@@ -1038,19 +1035,16 @@ describe('ReactHooksWithNoopRenderer', () => {\n () => {\n function Counter(props) {\n const [count, updateCount] = useState('(empty)');\n- useEffect(\n- () => {\n- \/\/ Update multiple times. These should all be batched together in\n- \/\/ a single render.\n- updateCount(props.count);\n- updateCount(props.count);\n- updateCount(props.count);\n- updateCount(props.count);\n- updateCount(props.count);\n- updateCount(props.count);\n- },\n- [props.count],\n- );\n+ useEffect(() => {\n+ \/\/ Update multiple times. These should all be batched together in\n+ \/\/ a single render.\n+ updateCount(props.count);\n+ updateCount(props.count);\n+ updateCount(props.count);\n+ updateCount(props.count);\n+ updateCount(props.count);\n+ updateCount(props.count);\n+ }, [props.count]);\n return ;\n }\n act(() => {\n@@ -1071,15 +1065,12 @@ describe('ReactHooksWithNoopRenderer', () => {\n it('flushSync is not allowed', () => {\n function Counter(props) {\n const [count, updateCount] = useState('(empty)');\n- useEffect(\n- () => {\n- Scheduler.unstable_yieldValue(`Schedule update [${props.count}]`);\n- ReactNoop.flushSync(() => {\n- updateCount(props.count);\n- });\n- },\n- [props.count],\n- );\n+ useEffect(() => {\n+ Scheduler.unstable_yieldValue(`Schedule update [${props.count}]`);\n+ ReactNoop.flushSync(() => {\n+ updateCount(props.count);\n+ });\n+ }, [props.count]);\n return ;\n }\n act(() => {\n@@ -1227,15 +1218,12 @@ describe('ReactHooksWithNoopRenderer', () => {\n it('skips effect if inputs have not changed', () => {\n function Counter(props) {\n const text = `${props.label}: ${props.count}`;\n- useEffect(\n- () => {\n- Scheduler.unstable_yieldValue(`Did create [${text}]`);\n- return () => {\n- Scheduler.unstable_yieldValue(`Did destroy [${text}]`);\n- };\n- },\n- [props.label, props.count],\n- );\n+ useEffect(() => {\n+ Scheduler.unstable_yieldValue(`Did create [${text}]`);\n+ return () => {\n+ Scheduler.unstable_yieldValue(`Did destroy [${text}]`);\n+ };\n+ }, [props.label, props.count]);\n return ;\n }\n act(() => {\n@@ -1699,13 +1687,10 @@ describe('ReactHooksWithNoopRenderer', () => {\n it('memoizes value by comparing to previous inputs', () => {\n function CapitalizedText(props) {\n const text = props.text;\n- const capitalizedText = useMemo(\n- () => {\n- Scheduler.unstable_yieldValue(`Capitalize '${text}'`);\n- return text.toUpperCase();\n- },\n- [text],\n- );\n+ const capitalizedText = useMemo(() => {\n+ Scheduler.unstable_yieldValue(`Capitalize '${text}'`);\n+ return text.toUpperCase();\n+ }, [text]);\n return ;\n }\n \n@@ -2364,13 +2349,10 @@ describe('ReactHooksWithNoopRenderer', () => {\n Scheduler.unstable_yieldValue('Reducer: ' + count);\n return count;\n }, -1);\n- useEffect(\n- () => {\n- Scheduler.unstable_yieldValue('Effect: ' + count);\n- dispatch();\n- },\n- [count],\n- );\n+ useEffect(() => {\n+ Scheduler.unstable_yieldValue('Effect: ' + count);\n+ dispatch();\n+ }, [count]);\n Scheduler.unstable_yieldValue('Render: ' + state);\n return count;\n }\ndiff --git a\/packages\/react-reconciler\/src\/tests\/ReactIncremental-test.internal.js b\/packages\/react-reconciler\/src\/tests\/ReactIncremental-test.internal.js\nindex 901eacc9aa..e39b055f79 100644\n--- a\/packages\/react-reconciler\/src\/tests\/ReactIncremental-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/tests\/ReactIncremental-test.internal.js\n@@ -2000,7 +2000,9 @@ describe('ReactIncremental', () => {\n }\n \n ReactNoop.render();\n- expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(\n+ expect(() =>\n+ expect(Scheduler).toFlushWithoutYielding(),\n+ ).toErrorDev(\n 'Legacy context API has been detected within a strict-mode tree.\\n\\n' +\n 'The old API will be supported in all 16.x releases, but applications ' +\n 'using it should migrate to the new version.\\n\\n' +\n@@ -2194,7 +2196,9 @@ describe('ReactIncremental', () => {\n <\/IndirectionFn>\n <\/Intl>,\n );\n- expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(\n+ expect(() =>\n+ expect(Scheduler).toFlushWithoutYielding(),\n+ ).toErrorDev(\n 'Legacy context API has been detected within a strict-mode tree.\\n\\n' +\n 'The old API will be supported in all 16.x releases, but applications ' +\n 'using it should migrate to the new version.\\n\\n' +\n@@ -2288,7 +2292,9 @@ describe('ReactIncremental', () => {\n <\/IndirectionFn>\n <\/Stateful>,\n );\n- expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(\n+ expect(() =>\n+ expect(Scheduler).toFlushWithoutYielding(),\n+ ).toErrorDev(\n 'Legacy context API has been detected within a strict-mode tree.\\n\\n' +\n 'The old API will be supported in all 16.x releases, but applications ' +\n 'using it should migrate to the new version.\\n\\n' +\n@@ -2359,7 +2365,9 @@ describe('ReactIncremental', () => {\n \n \/\/ Init\n ReactNoop.render();\n- expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(\n+ expect(() =>\n+ expect(Scheduler).toFlushWithoutYielding(),\n+ ).toErrorDev(\n 'Legacy context API has been detected within a strict-mode tree.\\n\\n' +\n 'The old API will be supported in all 16.x releases, but applications ' +\n 'using it should migrate to the new version.\\n\\n' +\n@@ -2411,7 +2419,9 @@ describe('ReactIncremental', () => {\n \n \/\/ Init\n ReactNoop.render();\n- expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(\n+ expect(() =>\n+ expect(Scheduler).toFlushWithoutYielding(),\n+ ).toErrorDev(\n 'Legacy context API has been detected within a strict-mode tree.\\n\\n' +\n 'The old API will be supported in all 16.x releases, but applications ' +\n 'using it should migrate to the new version.\\n\\n' +\n@@ -2612,7 +2622,9 @@ describe('ReactIncremental', () => {\n <\/TopContextProvider>,\n );\n \n- expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(\n+ expect(() =>\n+ expect(Scheduler).toFlushWithoutYielding(),\n+ ).toErrorDev(\n 'Legacy context API has been detected within a strict-mode tree.\\n\\n' +\n 'The old API will be supported in all 16.x releases, but applications ' +\n 'using it should migrate to the new version.\\n\\n' +\n@@ -2676,7 +2688,9 @@ describe('ReactIncremental', () => {\n <\/TopContextProvider>,\n );\n \n- expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(\n+ expect(() =>\n+ expect(Scheduler).toFlushWithoutYielding(),\n+ ).toErrorDev(\n 'Legacy context API has been detected within a strict-mode tree.\\n\\n' +\n 'The old API will be supported in all 16.x releases, but applications ' +\n 'using it should migrate to the new version.\\n\\n' +\n@@ -2749,7 +2763,9 @@ describe('ReactIncremental', () => {\n <\/TopContextProvider>,\n );\n \n- expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(\n+ expect(() =>\n+ expect(Scheduler).toFlushWithoutYielding(),\n+ ).toErrorDev(\n 'Legacy context API has been detected within a strict-mode tree.\\n\\n' +\n 'The old API will be supported in all 16.x releases, but applications ' +\n 'using it should migrate to the new version.\\n\\n' +\n@@ -2832,7 +2848,9 @@ describe('ReactIncremental', () => {\n <\/TopContextProvider>,\n );\n \n- expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(\n+ expect(() =>\n+ expect(Scheduler).toFlushWithoutYielding(),\n+ ).toErrorDev(\n 'Legacy context API has been detected within a strict-mode tree.\\n\\n' +\n 'The old API will be supported in all 16.x releases, but applications ' +\n 'using it should migrate to the new version.\\n\\n' +\ndiff --git a\/packages\/react-reconciler\/src\/tests\/ReactIncrementalErrorHandling-test.internal.js b\/packages\/react-reconciler\/src\/tests\/ReactIncrementalErrorHandling-test.internal.js\nindex d006b0783d..519c2d3f3a 100644\n--- a\/packages\/react-reconciler\/src\/tests\/ReactIncrementalErrorHandling-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/tests\/ReactIncrementalErrorHandling-test.internal.js\n@@ -1148,7 +1148,9 @@ describe('ReactIncrementalErrorHandling', () => {\n \n <\/Provider>,\n );\n- expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(\n+ expect(() =>\n+ expect(Scheduler).toFlushWithoutYielding(),\n+ ).toErrorDev(\n 'Legacy context API has been detected within a strict-mode tree.\\n\\n' +\n 'The old API will be supported in all 16.x releases, but ' +\n 'applications using it should migrate to the new version.\\n\\n' +\n@@ -1252,7 +1254,9 @@ describe('ReactIncrementalErrorHandling', () => {\n \n it('recovers from uncaught reconciler errors', () => {\n const InvalidType = undefined;\n- expect(() => ReactNoop.render()).toErrorDev(\n+ expect(() =>\n+ ReactNoop.render(),\n+ ).toErrorDev(\n 'Warning: React.createElement: type is invalid -- expected a string',\n {withoutStack: true},\n );\ndiff --git a\/packages\/react-reconciler\/src\/tests\/ReactIncrementalReflection-test.internal.js b\/packages\/react-reconciler\/src\/tests\/ReactIncrementalReflection-test.internal.js\nindex 868d612677..0f953154f7 100644\n--- a\/packages\/react-reconciler\/src\/tests\/ReactIncrementalReflection-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/tests\/ReactIncrementalReflection-test.internal.js\n@@ -26,8 +26,8 @@ describe('ReactIncrementalReflection', () => {\n });\n \n function div(...children) {\n- children = children.map(\n- c => (typeof c === 'string' ? {text: c, hidden: false} : c),\n+ children = children.map(c =>\n+ typeof c === 'string' ? {text: c, hidden: false} : c,\n );\n return {type: 'div', children, prop: undefined, hidden: false};\n }\n@@ -114,7 +114,9 @@ describe('ReactIncrementalReflection', () => {\n }\n \n ReactNoop.render();\n- expect(() => expect(Scheduler).toFlushAndYield(['Component'])).toErrorDev(\n+ expect(() =>\n+ expect(Scheduler).toFlushAndYield(['Component']),\n+ ).toErrorDev(\n 'Using UNSAFE_componentWillMount in strict mode is not recommended',\n {withoutStack: true},\n );\ndiff --git a\/packages\/react-reconciler\/src\/tests\/ReactIncrementalScheduling-test.internal.js b\/packages\/react-reconciler\/src\/tests\/ReactIncrementalScheduling-test.internal.js\nindex efc67c3b98..1ca7d2baba 100644\n--- a\/packages\/react-reconciler\/src\/tests\/ReactIncrementalScheduling-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/tests\/ReactIncrementalScheduling-test.internal.js\n@@ -90,12 +90,9 @@ describe('ReactIncrementalScheduling', () => {\n it('works on deferred roots in the order they were scheduled', () => {\n const {useEffect} = React;\n function Text({text}) {\n- useEffect(\n- () => {\n- Scheduler.unstable_yieldValue(text);\n- },\n- [text],\n- );\n+ useEffect(() => {\n+ Scheduler.unstable_yieldValue(text);\n+ }, [text]);\n return text;\n }\n \ndiff --git a\/packages\/react-reconciler\/src\/tests\/ReactIncrementalSideEffects-test.internal.js b\/packages\/react-reconciler\/src\/tests\/ReactIncrementalSideEffects-test.internal.js\nindex ce4c4ce63e..8544542b88 100644\n--- a\/packages\/react-reconciler\/src\/tests\/ReactIncrementalSideEffects-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/tests\/ReactIncrementalSideEffects-test.internal.js\n@@ -26,8 +26,8 @@ describe('ReactIncrementalSideEffects', () => {\n });\n \n function div(...children) {\n- children = children.map(\n- c => (typeof c === 'string' ? {text: c, hidden: false} : c),\n+ children = children.map(c =>\n+ typeof c === 'string' ? {text: c, hidden: false} : c,\n );\n return {type: 'div', children, prop: undefined, hidden: false};\n }\n@@ -75,8 +75,8 @@ describe('ReactIncrementalSideEffects', () => {\n {props.text === 'World'\n ? [,
]\n : props.text === 'Hi'\n- ? [
, ]\n- : null}\n+ ? [
, ]\n+ : null}\n \n <\/div>\n );\ndiff --git a\/packages\/react-reconciler\/src\/tests\/ReactIncrementalUpdates-test.internal.js b\/packages\/react-reconciler\/src\/tests\/ReactIncrementalUpdates-test.internal.js\nindex b850d3847d..bcb9f7189c 100644\n--- a\/packages\/react-reconciler\/src\/tests\/ReactIncrementalUpdates-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/tests\/ReactIncrementalUpdates-test.internal.js\n@@ -345,7 +345,9 @@ describe('ReactIncrementalUpdates', () => {\n }\n }\n ReactNoop.render();\n- expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(\n+ expect(() =>\n+ expect(Scheduler).toFlushWithoutYielding(),\n+ ).toErrorDev(\n 'Using UNSAFE_componentWillReceiveProps in strict mode is not recommended',\n {withoutStack: true},\n );\n@@ -663,22 +665,19 @@ describe('ReactIncrementalUpdates', () => {\n setLog(prevLog => prevLog + msg);\n };\n \n- useLayoutEffect(\n- () => {\n- Scheduler.unstable_yieldValue('Committed: ' + log);\n- if (log === 'B') {\n- \/\/ Right after B commits, schedule additional updates.\n- Scheduler.unstable_runWithPriority(\n- Scheduler.unstable_UserBlockingPriority,\n- () => {\n- pushToLog('C');\n- },\n- );\n- setLog(prevLog => prevLog + 'D');\n- }\n- },\n- [log],\n- );\n+ useLayoutEffect(() => {\n+ Scheduler.unstable_yieldValue('Committed: ' + log);\n+ if (log === 'B') {\n+ \/\/ Right after B commits, schedule additional updates.\n+ Scheduler.unstable_runWithPriority(\n+ Scheduler.unstable_UserBlockingPriority,\n+ () => {\n+ pushToLog('C');\n+ },\n+ );\n+ setLog(prevLog => prevLog + 'D');\n+ }\n+ }, [log]);\n \n return log;\n }\ndiff --git a\/packages\/react-reconciler\/src\/tests\/ReactLazy-test.internal.js b\/packages\/react-reconciler\/src\/tests\/ReactLazy-test.internal.js\nindex e39043b118..d4b2055607 100644\n--- a\/packages\/react-reconciler\/src\/tests\/ReactLazy-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/tests\/ReactLazy-test.internal.js\n@@ -466,9 +466,7 @@ describe('ReactLazy', () => {\n \n UNSAFE_componentWillReceiveProps(nextProps) {\n Scheduler.unstable_yieldValue(\n- `UNSAFE_componentWillReceiveProps: ${this.props.text} -> ${\n- nextProps.text\n- }`,\n+ `UNSAFE_componentWillReceiveProps: ${this.props.text} -> ${nextProps.text}`,\n );\n }\n \ndiff --git a\/packages\/react-reconciler\/src\/tests\/ReactMemo-test.internal.js b\/packages\/react-reconciler\/src\/tests\/ReactMemo-test.internal.js\nindex ef9f54f4dc..25d4ac83a9 100644\n--- a\/packages\/react-reconciler\/src\/tests\/ReactMemo-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/tests\/ReactMemo-test.internal.js\n@@ -311,7 +311,9 @@ describe('memo', () => {\n });\n \n it('warns if the first argument is undefined', () => {\n- expect(() => memo()).toErrorDev(\n+ expect(() =>\n+ memo(),\n+ ).toErrorDev(\n 'memo: The first argument must be a component. Instead ' +\n 'received: undefined',\n {withoutStack: true},\n@@ -319,7 +321,9 @@ describe('memo', () => {\n });\n \n it('warns if the first argument is null', () => {\n- expect(() => memo(null)).toErrorDev(\n+ expect(() =>\n+ memo(null),\n+ ).toErrorDev(\n 'memo: The first argument must be a component. Instead ' +\n 'received: null',\n {withoutStack: true},\ndiff --git a\/packages\/react-reconciler\/src\/tests\/ReactNewContext-test.internal.js b\/packages\/react-reconciler\/src\/tests\/ReactNewContext-test.internal.js\nindex af350440dc..03c5ad4eec 100644\n--- a\/packages\/react-reconciler\/src\/tests\/ReactNewContext-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/tests\/ReactNewContext-test.internal.js\n@@ -59,7 +59,7 @@ describe('ReactNewContext', () => {\n }).toErrorDev(\n observedBits !== undefined\n ? 'useContext() second argument is reserved for future use in React. ' +\n- `Passing it is not supported. You passed: ${observedBits}.`\n+ `Passing it is not supported. You passed: ${observedBits}.`\n : [],\n );\n const render = props.children;\n@@ -75,7 +75,7 @@ describe('ReactNewContext', () => {\n }).toErrorDev(\n observedBits !== undefined\n ? 'useContext() second argument is reserved for future use in React. ' +\n- `Passing it is not supported. You passed: ${observedBits}.`\n+ `Passing it is not supported. You passed: ${observedBits}.`\n : [],\n );\n const render = props.children;\n@@ -91,7 +91,7 @@ describe('ReactNewContext', () => {\n }).toErrorDev(\n observedBits !== undefined\n ? 'useContext() second argument is reserved for future use in React. ' +\n- `Passing it is not supported. You passed: ${observedBits}.`\n+ `Passing it is not supported. You passed: ${observedBits}.`\n : [],\n );\n const render = props.children;\n@@ -811,9 +811,7 @@ describe('ReactNewContext', () => {\n Scheduler.unstable_yieldValue('Child');\n return (\n \n );\n }\ndiff --git a\/packages\/react-reconciler\/src\/tests\/ReactPersistent-test.js b\/packages\/react-reconciler\/src\/tests\/ReactPersistent-test.js\nindex 3c5209dfc3..46ccfea5c2 100644\n--- a\/packages\/react-reconciler\/src\/tests\/ReactPersistent-test.js\n+++ b\/packages\/react-reconciler\/src\/tests\/ReactPersistent-test.js\n@@ -39,8 +39,8 @@ describe('ReactPersistent', () => {\n }\n \n function div(...children) {\n- children = children.map(\n- c => (typeof c === 'string' ? {text: c, hidden: false} : c),\n+ children = children.map(c =>\n+ typeof c === 'string' ? {text: c, hidden: false} : c,\n );\n return {type: 'div', children, prop: undefined, hidden: false};\n }\ndiff --git a\/packages\/react-reconciler\/src\/tests\/ReactSchedulerIntegration-test.internal.js b\/packages\/react-reconciler\/src\/tests\/ReactSchedulerIntegration-test.internal.js\nindex 8197dbc0fa..943f07ad06 100644\n--- a\/packages\/react-reconciler\/src\/tests\/ReactSchedulerIntegration-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/tests\/ReactSchedulerIntegration-test.internal.js\n@@ -403,8 +403,7 @@ describe('ReactSchedulerIntegration', () => {\n expect(Scheduler).toHaveYielded(['Hidden: B']);\n expect(root).toMatchRenderedOutput(\n <>\n- Visible: B\n-

Hello<\/h1>;\n- yield

World<\/h1>;\n+ yield (

Hello<\/h1>);\n+ yield (

World<\/h1>);\n }\n \n const div = document.createElement('div');\n@@ -318,8 +327,8 @@ describe('ReactMultiChild', () => {\n it('should not warn for using generators in legacy iterables', () => {\n const fooIterable = {\n '@@iterator': function*() {\n- yield

Hello<\/h1>;\n- yield

World<\/h1>;\n+ yield (

Hello<\/h1>);\n+ yield (

World<\/h1>);\n },\n };\n \n@@ -338,8 +347,8 @@ describe('ReactMultiChild', () => {\n it('should not warn for using generators in modern iterables', () => {\n const fooIterable = {\n [Symbol.iterator]: function*() {\n- yield

Hello<\/h1>;\n- yield

World<\/h1>;\n+ yield (

Hello<\/h1>);\n+ yield (

{i + 1}<\/h2>)}\n+ .map((_, i) => (\n+

dillon1000/react

Files changed