diff --git a/fixtures/devtools/regression/server.js b/fixtures/devtools/regression/server.js
index f7e03f075dcc5..34853173a01ee 100755
--- a/fixtures/devtools/regression/server.js
+++ b/fixtures/devtools/regression/server.js
@@ -5,7 +5,7 @@ const http = require('http');
 const serveStatic = require('serve-static');
 
 // Serve fixtures folder
-const serve = serveStatic(__dirname, { index: 'index.html' });
+const serve = serveStatic(__dirname, {index: 'index.html'});
 
 // Create server
 const server = http.createServer(function onRequest(req, res) {
diff --git a/fixtures/devtools/regression/shared.js b/fixtures/devtools/regression/shared.js
index 2afd063b6bda0..055ba3d65e553 100644
--- a/fixtures/devtools/regression/shared.js
+++ b/fixtures/devtools/regression/shared.js
@@ -10,7 +10,7 @@ const minor =
   pieces[0] === '0' ? parseInt(pieces[2], 10) : parseInt(pieces[1], 10);
 
 // Convenience wrapper to organize API features in DevTools.
-function Feature({ children, label, version }) {
+function Feature({children, label, version}) {
   return (
     <div className="Feature">
       <div className="FeatureHeader">
@@ -60,10 +60,10 @@ switch (major) {
         }
       case 6:
         // memo
-        function LabelComponent({ label }) {
+        function LabelComponent({label}) {
           return <label>{label}</label>;
         }
-        const AnonymousMemoized = React.memo(({ label }) => (
+        const AnonymousMemoized = React.memo(({label}) => (
           <label>{label}</label>
         ));
         const Memoized = React.memo(LabelComponent);
@@ -91,8 +91,8 @@ switch (major) {
           getResourceKey
         );
         class Suspending extends React.Component {
-          state = { useSuspense: false };
-          useSuspense = () => this.setState({ useSuspense: true });
+          state = {useSuspense: false};
+          useSuspense = () => this.setState({useSuspense: true});
           render() {
             if (this.state.useSuspense) {
               const text = Resource.read(['loaded', 2000]);
@@ -141,9 +141,9 @@ switch (major) {
       case 4:
         // unstable_Profiler
         class ProfilerChild extends React.Component {
-          state = { count: 0 };
+          state = {count: 0};
           incrementCount = () =>
-            this.setState(prevState => ({ count: prevState.count + 1 }));
+            this.setState(prevState => ({count: prevState.count + 1}));
           render() {
             return (
               <div>
@@ -159,8 +159,7 @@ switch (major) {
           <Feature
             key="unstable_Profiler"
             label="unstable_Profiler"
-            version="16.4+"
-          >
+            version="16.4+">
             <Profiler id="count" onRender={onRender}>
               <div>
                 <ProfilerChild />
@@ -230,8 +229,7 @@ switch (major) {
           <Feature
             key="AsyncMode/ConcurrentMode"
             label="AsyncMode/ConcurrentMode"
-            version="16.3+"
-          >
+            version="16.3+">
             <ConcurrentMode>
               <div>
                 unstable_AsyncMode was added in 16.3, renamed to
@@ -271,13 +269,13 @@ function Even() {
 
 // Simple stateful app shared by all React versions
 class SimpleApp extends React.Component {
-  state = { count: 0 };
+  state = {count: 0};
   incrementCount = () => {
-    const updaterFn = prevState => ({ count: prevState.count + 1 });
+    const updaterFn = prevState => ({count: prevState.count + 1});
     trace('Updating count', performance.now(), () => this.setState(updaterFn));
   };
   render() {
-    const { count } = this.state;
+    const {count} = this.state;
     return (
       <div>
         {count % 2 === 0 ? (
@@ -299,7 +297,7 @@ apps.push(
 );
 
 // This component, with the version prop, helps organize DevTools at a glance.
-function TopLevelWrapperForDevTools({ version }) {
+function TopLevelWrapperForDevTools({version}) {
   let header = <h1>React {version}</h1>;
   if (version.includes('canary')) {
     const commitSha = version.match(/.+canary-(.+)/)[1];
diff --git a/fixtures/devtools/shell/app/DeeplyNestedComponents/index.js b/fixtures/devtools/shell/app/DeeplyNestedComponents/index.js
index ad4468d2eb1dc..16afd4cec8596 100644
--- a/fixtures/devtools/shell/app/DeeplyNestedComponents/index.js
+++ b/fixtures/devtools/shell/app/DeeplyNestedComponents/index.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Fragment } from 'react';
+import React, {Fragment} from 'react';
 
 function wrapWithHoc(Component, index) {
   function HOC() {
diff --git a/fixtures/devtools/shell/app/EditableProps/index.js b/fixtures/devtools/shell/app/EditableProps/index.js
index f5a39fc92f973..5382a09ac5d6e 100644
--- a/fixtures/devtools/shell/app/EditableProps/index.js
+++ b/fixtures/devtools/shell/app/EditableProps/index.js
@@ -13,20 +13,20 @@ import React, {
   useState,
 } from 'react';
 
-const initialData = { foo: 'FOO', bar: 'BAR' };
+const initialData = {foo: 'FOO', bar: 'BAR'};
 
 function reducer(state, action) {
   switch (action.type) {
     case 'swap':
-      return { foo: state.bar, bar: state.foo };
+      return {foo: state.bar, bar: state.foo};
     default:
       throw new Error();
   }
 }
 
-type StatefulFunctionProps = {| name: string |};
+type StatefulFunctionProps = {|name: string|};
 
-function StatefulFunction({ name }: StatefulFunctionProps) {
+function StatefulFunction({name}: StatefulFunctionProps) {
   const [count, updateCount] = useState(0);
   const debouncedCount = useDebounce(count, 1000);
   const handleUpdateCountClick = useCallback(() => updateCount(count + 1), [
@@ -35,7 +35,7 @@ function StatefulFunction({ name }: StatefulFunctionProps) {
 
   const [data, dispatch] = useReducer(reducer, initialData);
   const handleUpdateReducerClick = useCallback(
-    () => dispatch({ type: 'swap' }),
+    () => dispatch({type: 'swap'}),
     []
   );
 
@@ -60,8 +60,8 @@ function StatefulFunction({ name }: StatefulFunctionProps) {
 const BoolContext = createContext(true);
 BoolContext.displayName = 'BoolContext';
 
-type Props = {| name: string, toggle: boolean |};
-type State = {| cities: Array<string>, state: string |};
+type Props = {|name: string, toggle: boolean|};
+type State = {|cities: Array<string>, state: string|};
 
 class StatefulClass extends Component<Props, State> {
   static contextType = BoolContext;
@@ -71,7 +71,7 @@ class StatefulClass extends Component<Props, State> {
     state: 'California',
   };
 
-  handleChange = ({ target }) =>
+  handleChange = ({target}) =>
     this.setState({
       state: target.value,
     });
@@ -94,8 +94,8 @@ class StatefulClass extends Component<Props, State> {
 const MemoizedStatefulClass = memo(StatefulClass);
 const MemoizedStatefulFunction = memo(StatefulFunction);
 
-const ForwardRef = forwardRef<{| name: string |}, HTMLUListElement>(
-  ({ name }, ref) => {
+const ForwardRef = forwardRef<{|name: string|}, HTMLUListElement>(
+  ({name}, ref) => {
     const [count, updateCount] = useState(0);
     const debouncedCount = useDebounce(count, 1000);
     const handleUpdateCountClick = useCallback(() => updateCount(count + 1), [
diff --git a/fixtures/devtools/shell/app/Hydration/index.js b/fixtures/devtools/shell/app/Hydration/index.js
index bf0cd66a527a2..8fd2f31a1376c 100644
--- a/fixtures/devtools/shell/app/Hydration/index.js
+++ b/fixtures/devtools/shell/app/Hydration/index.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Fragment, useDebugValue, useState } from 'react';
+import React, {Fragment, useDebugValue, useState} from 'react';
 
 const div = document.createElement('div');
 const exmapleFunction = () => {};
@@ -110,7 +110,7 @@ export default function Hydration() {
   );
 }
 
-function DehydratableProps({ array, object }: any) {
+function DehydratableProps({array, object}: any) {
   return (
     <ul>
       <li>array: {JSON.stringify(array, null, 2)}</li>
diff --git a/fixtures/devtools/shell/app/Iframe/index.js b/fixtures/devtools/shell/app/Iframe/index.js
index 8e4967ae5aca2..394b0d680f9c4 100644
--- a/fixtures/devtools/shell/app/Iframe/index.js
+++ b/fixtures/devtools/shell/app/Iframe/index.js
@@ -1,6 +1,6 @@
 /** @flow */
 
-import React, { Fragment } from 'react';
+import React, {Fragment} from 'react';
 import ReactDOM from 'react-dom';
 
 export default function Iframe() {
@@ -16,7 +16,7 @@ export default function Iframe() {
   );
 }
 
-const iframeStyle = { border: '2px solid #eee', height: 80 };
+const iframeStyle = {border: '2px solid #eee', height: 80};
 
 function Frame(props) {
   const [element, setElement] = React.useState(null);
diff --git a/fixtures/devtools/shell/app/InspectableElements/Contexts.js b/fixtures/devtools/shell/app/InspectableElements/Contexts.js
index 65e35d46068ea..08c380dc0c2d0 100644
--- a/fixtures/devtools/shell/app/InspectableElements/Contexts.js
+++ b/fixtures/devtools/shell/app/InspectableElements/Contexts.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { createContext, Component, Fragment, useContext } from 'react';
+import React, {createContext, Component, Fragment, useContext} from 'react';
 import PropTypes from 'prop-types';
 
 function someNamedFunction() {}
@@ -10,7 +10,7 @@ const contextData = {
   bool: true,
   func: someNamedFunction,
   number: 123,
-  object: { outer: { inner: {} } },
+  object: {outer: {inner: {}}},
   string: 'abc',
   symbol: Symbol.for('symbol'),
   null: null,
diff --git a/fixtures/devtools/shell/app/InspectableElements/CustomHooks.js b/fixtures/devtools/shell/app/InspectableElements/CustomHooks.js
index 56eea075d1005..bf50de23a7bb8 100644
--- a/fixtures/devtools/shell/app/InspectableElements/CustomHooks.js
+++ b/fixtures/devtools/shell/app/InspectableElements/CustomHooks.js
@@ -17,7 +17,7 @@ const object = {
   null: null,
   undefined: undefined,
   array: ['a', 'b', 'c'],
-  object: { foo: 1, bar: 2, baz: 3 },
+  object: {foo: 1, bar: 2, baz: 3},
 };
 
 function useNestedInnerHook() {
diff --git a/fixtures/devtools/shell/app/InspectableElements/InspectableElements.js b/fixtures/devtools/shell/app/InspectableElements/InspectableElements.js
index 8917b33037351..ace2a68c55641 100644
--- a/fixtures/devtools/shell/app/InspectableElements/InspectableElements.js
+++ b/fixtures/devtools/shell/app/InspectableElements/InspectableElements.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Fragment } from 'react';
+import React, {Fragment} from 'react';
 import Contexts from './Contexts';
 import CustomHooks from './CustomHooks';
 import CustomObject from './CustomObject';
diff --git a/fixtures/devtools/shell/app/InspectableElements/NestedProps.js b/fixtures/devtools/shell/app/InspectableElements/NestedProps.js
index d6f5a804eb695..7927307bc8b50 100644
--- a/fixtures/devtools/shell/app/InspectableElements/NestedProps.js
+++ b/fixtures/devtools/shell/app/InspectableElements/NestedProps.js
@@ -22,7 +22,7 @@ export default function ObjectProps() {
       }}
       array={['first', 'second', 'third']}
       objectInArray={[object]}
-      arrayInObject={{ array: ['first', 'second', 'third'] }}
+      arrayInObject={{array: ['first', 'second', 'third']}}
       deepObject={{
         // Known limitation: we won't go deeper than several levels.
         // In the future, we might offer a way to request deeper access on demand.
diff --git a/fixtures/devtools/shell/app/InteractionTracing/index.js b/fixtures/devtools/shell/app/InteractionTracing/index.js
index d062f976f9613..1254cc8c102ce 100644
--- a/fixtures/devtools/shell/app/InteractionTracing/index.js
+++ b/fixtures/devtools/shell/app/InteractionTracing/index.js
@@ -1,7 +1,7 @@
 // @flow
 
-import React, { Fragment, useCallback, useEffect, useState } from 'react';
-import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
+import React, {Fragment, useCallback, useEffect, useState} from 'react';
+import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
 import {
   unstable_trace as trace,
   unstable_wrap as wrap,
@@ -11,54 +11,66 @@ export default function InteractionTracing() {
   const [count, setCount] = useState(0);
   const [shouldCascade, setShouldCascade] = useState(false);
 
-  const handleUpdate = useCallback(() => {
-    trace('count', performance.now(), () => {
-      setTimeout(
-        wrap(() => {
-          setCount(count + 1);
-        }),
-        count * 100
-      );
-    });
-  }, [count]);
-
-  const handleCascadingUpdate = useCallback(() => {
-    trace('cascade', performance.now(), () => {
-      setTimeout(
-        wrap(() => {
-          batchedUpdates(() => {
+  const handleUpdate = useCallback(
+    () => {
+      trace('count', performance.now(), () => {
+        setTimeout(
+          wrap(() => {
             setCount(count + 1);
-            setShouldCascade(true);
-          });
-        }),
-        count * 100
-      );
-    });
-  }, [count]);
+          }),
+          count * 100
+        );
+      });
+    },
+    [count]
+  );
 
-  const handleMultiple = useCallback(() => {
-    trace('first', performance.now(), () => {
-      trace('second', performance.now(), () => {
+  const handleCascadingUpdate = useCallback(
+    () => {
+      trace('cascade', performance.now(), () => {
         setTimeout(
           wrap(() => {
-            setCount(count + 1);
+            batchedUpdates(() => {
+              setCount(count + 1);
+              setShouldCascade(true);
+            });
           }),
           count * 100
         );
       });
-    });
-  }, [count]);
+    },
+    [count]
+  );
 
-  useEffect(() => {
-    if (shouldCascade) {
-      setTimeout(
-        wrap(() => {
-          setShouldCascade(false);
-        }),
-        count * 100
-      );
-    }
-  }, [count, shouldCascade]);
+  const handleMultiple = useCallback(
+    () => {
+      trace('first', performance.now(), () => {
+        trace('second', performance.now(), () => {
+          setTimeout(
+            wrap(() => {
+              setCount(count + 1);
+            }),
+            count * 100
+          );
+        });
+      });
+    },
+    [count]
+  );
+
+  useEffect(
+    () => {
+      if (shouldCascade) {
+        setTimeout(
+          wrap(() => {
+            setShouldCascade(false);
+          }),
+          count * 100
+        );
+      }
+    },
+    [count, shouldCascade]
+  );
 
   return (
     <Fragment>
diff --git a/fixtures/devtools/shell/app/PriorityLevels/index.js b/fixtures/devtools/shell/app/PriorityLevels/index.js
index 28884519809b7..db0d086e4d2b9 100644
--- a/fixtures/devtools/shell/app/PriorityLevels/index.js
+++ b/fixtures/devtools/shell/app/PriorityLevels/index.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Fragment, useCallback, useState } from 'react';
+import React, {Fragment, useCallback, useState} from 'react';
 import {
   unstable_IdlePriority as IdlePriority,
   unstable_LowPriority as LowPriority,
diff --git a/fixtures/devtools/shell/app/ReactNativeWeb/index.js b/fixtures/devtools/shell/app/ReactNativeWeb/index.js
index 7e2e27ede730c..0cdd3f361a1c2 100644
--- a/fixtures/devtools/shell/app/ReactNativeWeb/index.js
+++ b/fixtures/devtools/shell/app/ReactNativeWeb/index.js
@@ -1,7 +1,7 @@
 // @flow
 
-import React, { Fragment, useState } from 'react';
-import { Button, Text, View } from 'react-native-web';
+import React, {Fragment, useState} from 'react';
+import {Button, Text, View} from 'react-native-web';
 
 export default function ReactNativeWeb() {
   const [backgroundColor, setBackgroundColor] = useState('blue');
@@ -17,13 +17,13 @@ export default function ReactNativeWeb() {
             '\u0623\u062D\u0628 \u0627\u0644\u0644\u063A\u0629 \u0627\u0644\u0639\u0631\u0628\u064A\u0629 auto (default) - arabic RTL'
           }
         </Text>
-        <Text style={{ textAlign: 'left' }}>
+        <Text style={{textAlign: 'left'}}>
           left left left left left left left left left left left left left left
           left
         </Text>
         <Button
           onPress={toggleColor}
-          style={{ backgroundColor }}
+          style={{backgroundColor}}
           title={`Switch background color to "${
             backgroundColor === 'purple' ? 'green' : 'purple'
           }"`}
diff --git a/fixtures/devtools/shell/app/SuspenseTree/index.js b/fixtures/devtools/shell/app/SuspenseTree/index.js
index 873f210e163d8..7fedd9ff4bc1f 100644
--- a/fixtures/devtools/shell/app/SuspenseTree/index.js
+++ b/fixtures/devtools/shell/app/SuspenseTree/index.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Fragment, Suspense, useState } from 'react';
+import React, {Fragment, Suspense, useState} from 'react';
 
 function SuspenseTree() {
   return (
@@ -15,7 +15,7 @@ function SuspenseTree() {
   );
 }
 
-function PrimaryFallbackTest({ initialSuspend }) {
+function PrimaryFallbackTest({initialSuspend}) {
   const [suspend, setSuspend] = useState(initialSuspend);
   const fallbackStep = useTestSequence('fallback', Fallback1, Fallback2);
   const primaryStep = useTestSequence('primary', Primary1, Primary2);
@@ -101,8 +101,7 @@ function LoadLater() {
     <Suspense
       fallback={
         <Fallback1 onClick={() => setLoadChild(true)}>Click to load</Fallback1>
-      }
-    >
+      }>
       {loadChild ? (
         <Primary1 onClick={() => setLoadChild(false)}>
           Loaded! Click to suspend again.
@@ -118,19 +117,19 @@ function Never() {
   throw new Promise(resolve => {});
 }
 
-function Fallback1({ prop, ...rest }: any) {
+function Fallback1({prop, ...rest}: any) {
   return <span {...rest} />;
 }
 
-function Fallback2({ prop, ...rest }: any) {
+function Fallback2({prop, ...rest}: any) {
   return <span {...rest} />;
 }
 
-function Primary1({ prop, ...rest }: any) {
+function Primary1({prop, ...rest}: any) {
   return <span {...rest} />;
 }
 
-function Primary2({ prop, ...rest }: any) {
+function Primary2({prop, ...rest}: any) {
   return <span {...rest} />;
 }
 
diff --git a/fixtures/devtools/shell/app/ToDoList/List.js b/fixtures/devtools/shell/app/ToDoList/List.js
index f96df7748a886..f8d54673e965a 100644
--- a/fixtures/devtools/shell/app/ToDoList/List.js
+++ b/fixtures/devtools/shell/app/ToDoList/List.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Fragment, useCallback, useState } from 'react';
+import React, {Fragment, useCallback, useState} from 'react';
 import ListItem from './ListItem';
 import styles from './List.css';
 
@@ -15,26 +15,29 @@ type Props = {||};
 export default function List(props: Props) {
   const [newItemText, setNewItemText] = useState<string>('');
   const [items, setItems] = useState<Array<Item>>([
-    { id: 1, isComplete: true, text: 'First' },
-    { id: 2, isComplete: true, text: 'Second' },
-    { id: 3, isComplete: false, text: 'Third' },
+    {id: 1, isComplete: true, text: 'First'},
+    {id: 2, isComplete: true, text: 'Second'},
+    {id: 3, isComplete: false, text: 'Third'},
   ]);
   const [uid, setUID] = useState<number>(4);
 
-  const handleClick = useCallback(() => {
-    if (newItemText !== '') {
-      setItems([
-        ...items,
-        {
-          id: uid,
-          isComplete: false,
-          text: newItemText,
-        },
-      ]);
-      setUID(uid + 1);
-      setNewItemText('');
-    }
-  }, [newItemText, items, uid]);
+  const handleClick = useCallback(
+    () => {
+      if (newItemText !== '') {
+        setItems([
+          ...items,
+          {
+            id: uid,
+            isComplete: false,
+            text: newItemText,
+          },
+        ]);
+        setUID(uid + 1);
+        setNewItemText('');
+      }
+    },
+    [newItemText, items, uid]
+  );
 
   const handleKeyPress = useCallback(
     event => {
@@ -88,8 +91,7 @@ export default function List(props: Props) {
       <button
         className={styles.IconButton}
         disabled={newItemText === ''}
-        onClick={handleClick}
-      >
+        onClick={handleClick}>
         <span role="img" aria-label="Add item">
           ➕
         </span>
diff --git a/fixtures/devtools/shell/app/ToDoList/ListItem.js b/fixtures/devtools/shell/app/ToDoList/ListItem.js
index 2305e28ce6bd1..89a1b6edede81 100644
--- a/fixtures/devtools/shell/app/ToDoList/ListItem.js
+++ b/fixtures/devtools/shell/app/ToDoList/ListItem.js
@@ -1,9 +1,9 @@
 // @flow
 
-import React, { memo, useCallback } from 'react';
+import React, {memo, useCallback} from 'react';
 import styles from './ListItem.css';
 
-import type { Item } from './List';
+import type {Item} from './List';
 
 type Props = {|
   item: Item,
@@ -11,14 +11,20 @@ type Props = {|
   toggleItem: (item: Item) => void,
 |};
 
-function ListItem({ item, removeItem, toggleItem }: Props) {
-  const handleDelete = useCallback(() => {
-    removeItem(item);
-  }, [item, removeItem]);
+function ListItem({item, removeItem, toggleItem}: Props) {
+  const handleDelete = useCallback(
+    () => {
+      removeItem(item);
+    },
+    [item, removeItem]
+  );
 
-  const handleToggle = useCallback(() => {
-    toggleItem(item);
-  }, [item, toggleItem]);
+  const handleToggle = useCallback(
+    () => {
+      toggleItem(item);
+    },
+    [item, toggleItem]
+  );
 
   return (
     <li className={styles.ListItem}>
diff --git a/fixtures/devtools/shell/app/Toggle/index.js b/fixtures/devtools/shell/app/Toggle/index.js
index 5e96cd447be7a..9740c797de88b 100644
--- a/fixtures/devtools/shell/app/Toggle/index.js
+++ b/fixtures/devtools/shell/app/Toggle/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, {useState} from 'react';
 
 export default function Toggle() {
   const [show, setShow] = useState(false);
@@ -16,6 +16,6 @@ export default function Toggle() {
   );
 }
 
-function Greeting({ children }) {
+function Greeting({children}) {
   return <p>{children}</p>;
 }
diff --git a/fixtures/devtools/shell/app/index.js b/fixtures/devtools/shell/app/index.js
index 4115c1c4807fc..45cffcf1af270 100644
--- a/fixtures/devtools/shell/app/index.js
+++ b/fixtures/devtools/shell/app/index.js
@@ -2,7 +2,7 @@
 
 // This test harness mounts each test app as a separate root to test multi-root applications.
 
-import { createElement } from 'react';
+import {createElement} from 'react';
 import {
   // $FlowFixMe Flow does not yet know about createRoot()
   unstable_createRoot as createRoot,
@@ -19,7 +19,7 @@ import ReactNativeWeb from './ReactNativeWeb';
 import ToDoList from './ToDoList';
 import Toggle from './Toggle';
 import SuspenseTree from './SuspenseTree';
-import { ignoreErrors, ignoreWarnings } from './console';
+import {ignoreErrors, ignoreWarnings} from './console';
 
 import './styles.css';
 
diff --git a/fixtures/devtools/shell/src/devtools.js b/fixtures/devtools/shell/src/devtools.js
index 230ddc94d2bd7..2b68c73344c4a 100644
--- a/fixtures/devtools/shell/src/devtools.js
+++ b/fixtures/devtools/shell/src/devtools.js
@@ -1,18 +1,18 @@
 /** @flow */
 
-import { createElement } from 'react';
+import {createElement} from 'react';
 // $FlowFixMe Flow does not yet know about createRoot()
-import { unstable_createRoot as createRoot } from 'react-dom';
+import {unstable_createRoot as createRoot} from 'react-dom';
 import {
   activate as activateBackend,
   initialize as initializeBackend,
 } from 'react-devtools-inline/backend';
-import { initialize as initializeFrontend } from 'react-devtools-inline/frontend';
-import { initDevTools } from 'src/devtools';
+import {initialize as initializeFrontend} from 'react-devtools-inline/frontend';
+import {initDevTools} from 'src/devtools';
 
 const iframe = ((document.getElementById('target'): any): HTMLIFrameElement);
 
-const { contentDocument, contentWindow } = iframe;
+const {contentDocument, contentWindow} = iframe;
 
 // Helps with positioning Overlay UI.
 contentWindow.__REACT_DEVTOOLS_TARGET_WINDOW__ = window;
diff --git a/fixtures/devtools/shell/webpack.config.js b/fixtures/devtools/shell/webpack.config.js
index ce58e6418a180..09d99b0d28d4c 100644
--- a/fixtures/devtools/shell/webpack.config.js
+++ b/fixtures/devtools/shell/webpack.config.js
@@ -1,6 +1,6 @@
-const { resolve } = require('path');
-const { DefinePlugin } = require('webpack');
-const { getGitHubURL, getVersionString } = require('../utils');
+const {resolve} = require('path');
+const {DefinePlugin} = require('webpack');
+const {getGitHubURL, getVersionString} = require('../utils');
 
 const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {
diff --git a/packages/react-devtools-core/src/backend.js b/packages/react-devtools-core/src/backend.js
index 3874e58a07984..1c99eb954a6ce 100644
--- a/packages/react-devtools-core/src/backend.js
+++ b/packages/react-devtools-core/src/backend.js
@@ -2,16 +2,16 @@
 
 import Agent from 'react-devtools-shared/src/backend/agent';
 import Bridge from 'react-devtools-shared/src/bridge';
-import { installHook } from 'react-devtools-shared/src/hook';
-import { initBackend } from 'react-devtools-shared/src/backend';
-import { __DEBUG__ } from 'react-devtools-shared/src/constants';
+import {installHook} from 'react-devtools-shared/src/hook';
+import {initBackend} from 'react-devtools-shared/src/backend';
+import {__DEBUG__} from 'react-devtools-shared/src/constants';
 import setupNativeStyleEditor from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
-import { getDefaultComponentFilters } from 'react-devtools-shared/src/utils';
+import {getDefaultComponentFilters} from 'react-devtools-shared/src/utils';
 
-import type { BackendBridge } from 'react-devtools-shared/src/bridge';
-import type { ComponentFilter } from 'react-devtools-shared/src/types';
-import type { DevToolsHook } from 'react-devtools-shared/src/backend/types';
-import type { ResolveNativeStyle } from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
+import type {BackendBridge} from 'react-devtools-shared/src/bridge';
+import type {ComponentFilter} from 'react-devtools-shared/src/types';
+import type {DevToolsHook} from 'react-devtools-shared/src/backend/types';
+import type {ResolveNativeStyle} from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
 
 type ConnectOptions = {
   host?: string,
@@ -26,7 +26,9 @@ installHook(window);
 
 const hook: DevToolsHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
 
-let savedComponentFilters: Array<ComponentFilter> = getDefaultComponentFilters();
+let savedComponentFilters: Array<
+  ComponentFilter,
+> = getDefaultComponentFilters();
 
 function debug(methodName: string, ...args) {
   if (__DEBUG__) {
@@ -34,7 +36,7 @@ function debug(methodName: string, ...args) {
       `%c[core/backend] %c${methodName}`,
       'color: teal; font-weight: bold;',
       'font-weight: bold;',
-      ...args
+      ...args,
     );
   }
 }
@@ -47,7 +49,8 @@ export function connectToDevTools(options: ?ConnectOptions) {
     websocket,
     resolveRNStyle = null,
     isAppActive = () => true,
-  } = options || {};
+  } =
+    options || {};
 
   let retryTimeoutID: TimeoutID | null = null;
 
@@ -94,12 +97,12 @@ export function connectToDevTools(options: ?ConnectOptions) {
             debug('wall.send()', event, payload);
           }
 
-          ws.send(JSON.stringify({ event, payload }));
+          ws.send(JSON.stringify({event, payload}));
         } else {
           if (__DEBUG__) {
             debug(
               'wall.send()',
-              'Shutting down bridge because of closed WebSocket connection'
+              'Shutting down bridge because of closed WebSocket connection',
             );
           }
 
@@ -113,18 +116,18 @@ export function connectToDevTools(options: ?ConnectOptions) {
     });
     bridge.addListener(
       'inspectElement',
-      ({ id, rendererID }: { id: number, rendererID: number }) => {
+      ({id, rendererID}: {id: number, rendererID: number}) => {
         const renderer = agent.rendererInterfaces[rendererID];
         if (renderer != null) {
           // Send event for RN to highlight.
           const nodes: ?Array<HTMLElement> = renderer.findNativeNodesForFiberID(
-            id
+            id,
           );
           if (nodes != null && nodes[0] != null) {
             agent.emit('showNativeHighlight', nodes[0]);
           }
         }
-      }
+      },
     );
     bridge.addListener(
       'updateComponentFilters',
@@ -133,7 +136,7 @@ export function connectToDevTools(options: ?ConnectOptions) {
         // In that case, the renderer will already be using the updated values.
         // We'll lose these in between backend reloads but that can't be helped.
         savedComponentFilters = componentFilters;
-      }
+      },
     );
 
     // The renderer interface doesn't read saved component filters directly,
@@ -166,7 +169,7 @@ export function connectToDevTools(options: ?ConnectOptions) {
         ((resolveRNStyle || hook.resolveRNStyle: any): ResolveNativeStyle),
         nativeStyleEditorValidAttributes ||
           hook.nativeStyleEditorValidAttributes ||
-          null
+          null,
       );
     } else {
       // Otherwise listen to detect if the environment later supports it.
@@ -181,7 +184,7 @@ export function connectToDevTools(options: ?ConnectOptions) {
             bridge,
             agent,
             lazyResolveRNStyle,
-            lazyNativeStyleEditorValidAttributes
+            lazyNativeStyleEditorValidAttributes,
           );
         }
       };
@@ -198,7 +201,7 @@ export function connectToDevTools(options: ?ConnectOptions) {
             lazyResolveRNStyle = value;
             initAfterTick();
           },
-        }: Object)
+        }: Object),
       );
       Object.defineProperty(
         hook,
@@ -212,7 +215,7 @@ export function connectToDevTools(options: ?ConnectOptions) {
             lazyNativeStyleEditorValidAttributes = value;
             initAfterTick();
           },
-        }: Object)
+        }: Object),
       );
     }
   };
@@ -250,7 +253,7 @@ export function connectToDevTools(options: ?ConnectOptions) {
       }
     } catch (e) {
       console.error(
-        '[React DevTools] Failed to parse JSON: ' + String(event.data)
+        '[React DevTools] Failed to parse JSON: ' + String(event.data),
       );
       return;
     }
diff --git a/packages/react-devtools-core/src/editor.js b/packages/react-devtools-core/src/editor.js
index 26043f07f650d..55ce120b56ef8 100644
--- a/packages/react-devtools-core/src/editor.js
+++ b/packages/react-devtools-core/src/editor.js
@@ -1,9 +1,9 @@
 // @flow
 
-import { existsSync } from 'fs';
-import { basename, join, isAbsolute } from 'path';
-import { execSync, spawn } from 'child_process';
-import { parse } from 'shell-quote';
+import {existsSync} from 'fs';
+import {basename, join, isAbsolute} from 'path';
+import {execSync, spawn} from 'child_process';
+import {parse} from 'shell-quote';
 
 function isTerminalEditor(editor: string): boolean {
   switch (editor) {
@@ -33,7 +33,7 @@ const COMMON_EDITORS = {
 function getArgumentsForLineNumber(
   editor: string,
   filePath: string,
-  lineNumber: number
+  lineNumber: number,
 ): Array<string> {
   switch (basename(editor)) {
     case 'vim':
@@ -104,7 +104,7 @@ let childProcess = null;
 
 export function getValidFilePath(
   maybeRelativePath: string,
-  absoluteProjectRoots: Array<string>
+  absoluteProjectRoots: Array<string>,
 ): string | null {
   // We use relative paths at Facebook with deterministic builds.
   // This is why our internal tooling calls React DevTools with absoluteProjectRoots.
@@ -128,7 +128,7 @@ export function getValidFilePath(
 
 export function doesFilePathExist(
   maybeRelativePath: string,
-  absoluteProjectRoots: Array<string>
+  absoluteProjectRoots: Array<string>,
 ): boolean {
   return getValidFilePath(maybeRelativePath, absoluteProjectRoots) !== null;
 }
@@ -136,7 +136,7 @@ export function doesFilePathExist(
 export function launchEditor(
   maybeRelativePath: string,
   lineNumber: number,
-  absoluteProjectRoots: Array<string>
+  absoluteProjectRoots: Array<string>,
 ) {
   const filePath = getValidFilePath(maybeRelativePath, absoluteProjectRoots);
   if (filePath === null) {
@@ -174,7 +174,7 @@ export function launchEditor(
       stdio: 'inherit',
     });
   } else {
-    childProcess = spawn(editor, args, { stdio: 'inherit' });
+    childProcess = spawn(editor, args, {stdio: 'inherit'});
   }
   childProcess.on('error', function() {});
   childProcess.on('exit', function(errorCode) {
diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index 67d1dae775cc5..8b8e33adcb396 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -1,6 +1,6 @@
 // @flow
 
-import { createElement } from 'react';
+import {createElement} from 'react';
 import {
   // $FlowFixMe Flow does not yet know about flushSync()
   flushSync,
@@ -9,16 +9,19 @@ import {
 } from 'react-dom';
 import Bridge from 'react-devtools-shared/src/bridge';
 import Store from 'react-devtools-shared/src/devtools/store';
-import { getSavedComponentFilters, getAppendComponentStack } from 'react-devtools-shared/src/utils';
-import { Server } from 'ws';
-import { existsSync, readFileSync } from 'fs';
-import { installHook } from 'react-devtools-shared/src/hook';
+import {
+  getSavedComponentFilters,
+  getAppendComponentStack,
+} from 'react-devtools-shared/src/utils';
+import {Server} from 'ws';
+import {existsSync, readFileSync} from 'fs';
+import {installHook} from 'react-devtools-shared/src/hook';
 import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
-import { doesFilePathExist, launchEditor } from './editor';
-import { __DEBUG__ } from 'react-devtools-shared/src/constants';
+import {doesFilePathExist, launchEditor} from './editor';
+import {__DEBUG__} from 'react-devtools-shared/src/constants';
 
-import type { FrontendBridge } from 'react-devtools-shared/src/bridge';
-import type { InspectedElement } from 'react-devtools-shared/src/devtools/views/Components/types';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Components/types';
 
 installHook(window);
 
@@ -71,7 +74,7 @@ function debug(methodName: string, ...args) {
       `%c[core/standalone] %c${methodName}`,
       'color: teal; font-weight: bold;',
       'font-weight: bold;',
-      ...args
+      ...args,
     );
   }
 }
@@ -101,13 +104,13 @@ function reload() {
         store: ((store: any): Store),
         warnIfLegacyBackendDetected: true,
         viewElementSourceFunction,
-      })
+      }),
     );
   }, 100);
 }
 
 function canViewElementSourceFunction(
-  inspectedElement: InspectedElement
+  inspectedElement: InspectedElement,
 ): boolean {
   if (
     inspectedElement.canViewSource === false ||
@@ -116,16 +119,16 @@ function canViewElementSourceFunction(
     return false;
   }
 
-  const { source } = inspectedElement;
+  const {source} = inspectedElement;
 
   return doesFilePathExist(source.fileName, projectRoots);
 }
 
 function viewElementSourceFunction(
   id: number,
-  inspectedElement: InspectedElement
+  inspectedElement: InspectedElement,
 ): void {
-  const { source } = inspectedElement;
+  const {source} = inspectedElement;
   if (source !== null) {
     launchEditor(source.fileName, source.lineNumber, projectRoots);
   } else {
@@ -139,7 +142,7 @@ function onDisconnected() {
   node.innerHTML = nodeWaitingToConnectHTML;
 }
 
-function onError({ code, message }) {
+function onError({code, message}) {
   safeUnmount();
 
   if (code === 'EADDRINUSE') {
@@ -189,7 +192,7 @@ function initialize(socket: WebSocket) {
     },
     send(event: string, payload: any, transferable?: Array<any>) {
       if (socket.readyState === socket.OPEN) {
-        socket.send(JSON.stringify({ event, payload }));
+        socket.send(JSON.stringify({event, payload}));
       }
     },
   });
@@ -197,7 +200,7 @@ function initialize(socket: WebSocket) {
     socket.close();
   });
 
-  store = new Store(bridge, { supportsNativeInspection: false });
+  store = new Store(bridge, {supportsNativeInspection: false});
 
   log('Connected');
   reload();
@@ -225,14 +228,14 @@ function connectToSocket(socket: WebSocket) {
 
 function startServer(port?: number = 8097) {
   const httpServer = require('http').createServer();
-  const server = new Server({ server: httpServer });
+  const server = new Server({server: httpServer});
   let connected: WebSocket | null = null;
   server.on('connection', (socket: WebSocket) => {
     if (connected !== null) {
       connected.close();
       log.warn(
         'Only one connection allowed at a time.',
-        'Closing the previous connection'
+        'Closing the previous connection',
       );
     }
     connected = socket;
@@ -271,10 +274,10 @@ function startServer(port?: number = 8097) {
     // This will ensure that saved filters are shared across different web pages.
     const savedPreferencesString = `
       window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
-        getSavedComponentFilters()
+        getSavedComponentFilters(),
       )};
       window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(
-        getAppendComponentStack()
+        getAppendComponentStack(),
       )};`;
 
     response.end(
@@ -282,7 +285,7 @@ function startServer(port?: number = 8097) {
         '\n;' +
         backendFile.toString() +
         '\n;' +
-        'ReactDevToolsBackend.connectToDevTools();'
+        'ReactDevToolsBackend.connectToDevTools();',
     );
   });
 
diff --git a/packages/react-devtools-core/webpack.backend.js b/packages/react-devtools-core/webpack.backend.js
index 14ef8a2cb06b5..fd230f0aa8c37 100644
--- a/packages/react-devtools-core/webpack.backend.js
+++ b/packages/react-devtools-core/webpack.backend.js
@@ -1,6 +1,6 @@
-const { resolve } = require('path');
-const { DefinePlugin } = require('webpack');
-const { getGitHubURL, getVersionString } = require('../../shells/utils');
+const {resolve} = require('path');
+const {DefinePlugin} = require('webpack');
+const {getGitHubURL, getVersionString} = require('../../shells/utils');
 
 const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {
diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
index 034d281a5775a..f7e6cf7172ba0 100644
--- a/packages/react-devtools-core/webpack.standalone.js
+++ b/packages/react-devtools-core/webpack.standalone.js
@@ -1,6 +1,6 @@
-const { resolve } = require('path');
-const { DefinePlugin } = require('webpack');
-const { getGitHubURL, getVersionString } = require('../../shells/utils');
+const {resolve} = require('path');
+const {DefinePlugin} = require('webpack');
+const {getGitHubURL, getVersionString} = require('../../shells/utils');
 
 const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {
diff --git a/packages/react-devtools-extensions/babel.config.js b/packages/react-devtools-extensions/babel.config.js
index 6dd41082deded..b5a9ef62aa911 100644
--- a/packages/react-devtools-extensions/babel.config.js
+++ b/packages/react-devtools-extensions/babel.config.js
@@ -4,7 +4,7 @@ const firefoxManifest = require('./shells/browser/firefox/manifest.json');
 const minChromeVersion = parseInt(chromeManifest.minimum_chrome_version, 10);
 const minFirefoxVersion = parseInt(
   firefoxManifest.applications.gecko.strict_min_version,
-  10
+  10,
 );
 validateVersion(minChromeVersion);
 validateVersion(minFirefoxVersion);
@@ -30,7 +30,7 @@ module.exports = api => {
   }
   const plugins = [
     ['@babel/plugin-transform-flow-strip-types'],
-    ['@babel/plugin-proposal-class-properties', { loose: false }],
+    ['@babel/plugin-proposal-class-properties', {loose: false}],
   ];
   if (process.env.NODE_ENV !== 'production') {
     plugins.push(['@babel/plugin-transform-react-jsx-source']);
@@ -38,7 +38,7 @@ module.exports = api => {
   return {
     plugins,
     presets: [
-      ['@babel/preset-env', { targets }],
+      ['@babel/preset-env', {targets}],
       '@babel/preset-react',
       '@babel/preset-flow',
     ],
diff --git a/packages/react-devtools-extensions/chrome/build.js b/packages/react-devtools-extensions/chrome/build.js
index 8bcb863f11c51..76e97a9d06e83 100644
--- a/packages/react-devtools-extensions/chrome/build.js
+++ b/packages/react-devtools-extensions/chrome/build.js
@@ -1,14 +1,14 @@
 #!/usr/bin/env node
 
 const chalk = require('chalk');
-const { execSync } = require('child_process');
-const { existsSync } = require('fs');
-const { isAbsolute, join, relative } = require('path');
-const { argv } = require('yargs');
+const {execSync} = require('child_process');
+const {existsSync} = require('fs');
+const {isAbsolute, join, relative} = require('path');
+const {argv} = require('yargs');
 const build = require('../shared/build');
 
 const main = async () => {
-  const { crx, keyPath } = argv;
+  const {crx, keyPath} = argv;
 
   if (crx) {
     if (!keyPath || !existsSync(keyPath)) {
diff --git a/packages/react-devtools-extensions/chrome/test.js b/packages/react-devtools-extensions/chrome/test.js
index c010a3c319dde..ac7ac3239671b 100644
--- a/packages/react-devtools-extensions/chrome/test.js
+++ b/packages/react-devtools-extensions/chrome/test.js
@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 const chromeLaunch = require('chrome-launch'); // eslint-disable-line import/no-extraneous-dependencies
-const { resolve } = require('path');
+const {resolve} = require('path');
 
 const EXTENSION_PATH = resolve('shells/browser/chrome/build/unpacked');
 const START_URL = 'https://facebook.github.io/react/';
diff --git a/packages/react-devtools-extensions/firefox/build.js b/packages/react-devtools-extensions/firefox/build.js
index 5f7e7c5df95c1..a35e2b1684a0a 100644
--- a/packages/react-devtools-extensions/firefox/build.js
+++ b/packages/react-devtools-extensions/firefox/build.js
@@ -32,4 +32,4 @@ const main = async () => {
 
 main();
 
-module.exports = { main };
+module.exports = {main};
diff --git a/packages/react-devtools-extensions/firefox/test.js b/packages/react-devtools-extensions/firefox/test.js
index 7dd8d1e65b633..65c16fd55a25b 100644
--- a/packages/react-devtools-extensions/firefox/test.js
+++ b/packages/react-devtools-extensions/firefox/test.js
@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 
-const { exec } = require('child-process-promise');
-const { Finder } = require('firefox-profile');
-const { resolve } = require('path');
+const {exec} = require('child-process-promise');
+const {Finder} = require('firefox-profile');
+const {resolve} = require('path');
 
 const EXTENSION_PATH = resolve('shells/browser/firefox/build/unpacked');
 const START_URL = 'https://facebook.github.io/react/';
diff --git a/packages/react-devtools-extensions/flow-typed/chrome.js b/packages/react-devtools-extensions/flow-typed/chrome.js
index fac810912420f..4426e1343a776 100644
--- a/packages/react-devtools-extensions/flow-typed/chrome.js
+++ b/packages/react-devtools-extensions/flow-typed/chrome.js
@@ -42,7 +42,7 @@ declare var chrome: {
   browserAction: {
     setIcon: (options: {
       tabId: number,
-      path: { [key: string]: string },
+      path: {[key: string]: string},
     }) => void,
     setPopup: (options: {
       tabId: number,
diff --git a/packages/react-devtools-extensions/flow-typed/jest.js b/packages/react-devtools-extensions/flow-typed/jest.js
index 8563e20d93572..07c7edbe82a9d 100644
--- a/packages/react-devtools-extensions/flow-typed/jest.js
+++ b/packages/react-devtools-extensions/flow-typed/jest.js
@@ -19,7 +19,7 @@ type JestMockFn<TArguments: $ReadOnlyArray<*>, TReturn> = {
      * An array that contains all the object results that have been
      * returned by this mock function call
      */
-    results: Array<{ isThrow: boolean, value: TReturn }>,
+    results: Array<{isThrow: boolean, value: TReturn}>,
   },
   /**
    * Resets all information stored in the mockFn.mock.calls and
@@ -204,7 +204,7 @@ type EnzymeMatchersType = {
   toIncludeText(text: string): void,
   toMatchElement(
     element: React$Element<any>,
-    options?: {| ignoreProps?: boolean, verbose?: boolean |}
+    options?: {|ignoreProps?: boolean, verbose?: boolean|}
   ): void,
   toMatchSelector(selector: string): void,
   // 7.x
@@ -222,11 +222,11 @@ type DomTestingLibraryType = {
   toHaveAttribute(name: string, expectedValue?: string): void,
   toHaveClass(...classNames: string[]): void,
   toHaveFocus(): void,
-  toHaveFormValues(expectedValues: { [name: string]: any }): void,
+  toHaveFormValues(expectedValues: {[name: string]: any}): void,
   toHaveStyle(css: string): void,
   toHaveTextContent(
     content: string | RegExp,
-    options?: { normalizeWhitespace: boolean }
+    options?: {normalizeWhitespace: boolean}
   ): void,
   toBeInTheDOM(): void,
 };
@@ -243,7 +243,7 @@ type JestJQueryMatchersType = {
   toHaveText(text: string | RegExp): void,
   toHaveData(key: string, val?: any): void,
   toHaveValue(val: any): void,
-  toHaveCss(css: { [key: string]: any }): void,
+  toHaveCss(css: {[key: string]: any}): void,
   toBeChecked(): void,
   toBeDisabled(): void,
   toBeEmpty(): void,
@@ -1079,11 +1079,11 @@ declare var xit: typeof it;
 declare var xtest: typeof it;
 
 type JestPrettyFormatColors = {
-  comment: { close: string, open: string },
-  content: { close: string, open: string },
-  prop: { close: string, open: string },
-  tag: { close: string, open: string },
-  value: { close: string, open: string },
+  comment: {close: string, open: string},
+  content: {close: string, open: string},
+  prop: {close: string, open: string},
+  tag: {close: string, open: string},
+  value: {close: string, open: string},
 };
 
 type JestPrettyFormatIndent = string => string;
@@ -1141,7 +1141,7 @@ declare var expect: {
     JestExtendedMatchersType,
 
   /** Add additional Jasmine matchers to Jest's roster */
-  extend(matchers: { [name: string]: JestMatcher }): void,
+  extend(matchers: {[name: string]: JestMatcher}): void,
   /** Add a module that formats application-specific data structures. */
   addSnapshotSerializer(pluginModule: JestPrettyFormatPlugin): void,
   assertions(expectedAssertions: number): void,
@@ -1182,7 +1182,7 @@ declare var jasmine: {
   createSpyObj(
     baseName: string,
     methodNames: Array<string>
-  ): { [methodName: string]: JestSpyType },
+  ): {[methodName: string]: JestSpyType},
   objectContaining(value: Object): Object,
   stringMatching(value: string): string,
 };
diff --git a/packages/react-devtools-extensions/flow-typed/npm/react-test-renderer_v16.x.x.js b/packages/react-devtools-extensions/flow-typed/npm/react-test-renderer_v16.x.x.js
index 67eb20ab753fa..39fbaf9fdb3c1 100644
--- a/packages/react-devtools-extensions/flow-typed/npm/react-test-renderer_v16.x.x.js
+++ b/packages/react-devtools-extensions/flow-typed/npm/react-test-renderer_v16.x.x.js
@@ -8,7 +8,7 @@ type ReactComponentInstance = React$Component<any>;
 
 type ReactTestRendererJSON = {
   type: string,
-  props: { [propName: string]: any },
+  props: {[propName: string]: any},
   children: null | ReactTestRendererJSON[],
 };
 
@@ -21,25 +21,25 @@ type ReactTestRendererTree = ReactTestRendererJSON & {
 type ReactTestInstance = {
   instance: ?ReactComponentInstance,
   type: string,
-  props: { [propName: string]: any },
+  props: {[propName: string]: any},
   parent: null | ReactTestInstance,
   children: Array<ReactTestInstance | string>,
 
   find(predicate: (node: ReactTestInstance) => boolean): ReactTestInstance,
   findByType(type: React$ElementType): ReactTestInstance,
-  findByProps(props: { [propName: string]: any }): ReactTestInstance,
+  findByProps(props: {[propName: string]: any}): ReactTestInstance,
 
   findAll(
     predicate: (node: ReactTestInstance) => boolean,
-    options?: { deep: boolean }
+    options?: {deep: boolean}
   ): ReactTestInstance[],
   findAllByType(
     type: React$ElementType,
-    options?: { deep: boolean }
+    options?: {deep: boolean}
   ): ReactTestInstance[],
   findAllByProps(
-    props: { [propName: string]: any },
-    options?: { deep: boolean }
+    props: {[propName: string]: any},
+    options?: {deep: boolean}
   ): ReactTestInstance[],
 };
 
diff --git a/packages/react-devtools-extensions/flow.js b/packages/react-devtools-extensions/flow.js
index 9ffd20656336b..8cd9e1b5f333e 100644
--- a/packages/react-devtools-extensions/flow.js
+++ b/packages/react-devtools-extensions/flow.js
@@ -4,7 +4,7 @@ declare module 'node-events' {
   declare class EventEmitter<Events: Object> {
     addListener<Event: $Keys<Events>>(
       event: Event,
-      listener: (...$ElementType<Events, Event>) => any
+      listener: (...$ElementType<Events, Event>) => any,
     ): void;
     emit: <Event: $Keys<Events>>(
       event: Event,
diff --git a/packages/react-devtools-extensions/shared/build.js b/packages/react-devtools-extensions/shared/build.js
index 6d2ec5371f3bc..45773650efa45 100644
--- a/packages/react-devtools-extensions/shared/build.js
+++ b/packages/react-devtools-extensions/shared/build.js
@@ -1,11 +1,11 @@
 #!/usr/bin/env node
 
 const archiver = require('archiver');
-const { execSync } = require('child_process');
-const { readFileSync, writeFileSync, createWriteStream } = require('fs');
-const { copy, ensureDir, move, remove } = require('fs-extra');
-const { join } = require('path');
-const { getGitCommit } = require('../../utils');
+const {execSync} = require('child_process');
+const {readFileSync, writeFileSync, createWriteStream} = require('fs');
+const {copy, ensureDir, move, remove} = require('fs-extra');
+const {join} = require('path');
+const {getGitCommit} = require('../../utils');
 
 // These files are copied along with Webpack-bundled files
 // to produce the final web extension
@@ -72,7 +72,7 @@ const build = async (tempPath, manifestPath) => {
   writeFileSync(copiedManifestPath, JSON.stringify(manifest, null, 2));
 
   // Pack the extension
-  const archive = archiver('zip', { zlib: { level: 9 } });
+  const archive = archiver('zip', {zlib: {level: 9}});
   const zipStream = createWriteStream(join(tempPath, 'ReactDevTools.zip'));
   await new Promise((resolve, reject) => {
     archive
diff --git a/packages/react-devtools-extensions/shared/deploy.js b/packages/react-devtools-extensions/shared/deploy.js
index 6cc33e1cbf4e8..9564e77c9f902 100644
--- a/packages/react-devtools-extensions/shared/deploy.js
+++ b/packages/react-devtools-extensions/shared/deploy.js
@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 
-const { exec, execSync } = require('child_process');
-const { readFileSync, writeFileSync } = require('fs');
-const { join } = require('path');
+const {exec, execSync} = require('child_process');
+const {readFileSync, writeFileSync} = require('fs');
+const {join} = require('path');
 
 const main = async buildId => {
   const root = join(__dirname, '..', buildId);
diff --git a/packages/react-devtools-extensions/shared/popups/shared.js b/packages/react-devtools-extensions/shared/popups/shared.js
index 130f1f457ecf5..0647e1c301a1e 100644
--- a/packages/react-devtools-extensions/shared/popups/shared.js
+++ b/packages/react-devtools-extensions/shared/popups/shared.js
@@ -8,7 +8,7 @@ document.addEventListener('DOMContentLoaded', function() {
       const ln = links[i];
       const location = ln.href;
       ln.onclick = function() {
-        chrome.tabs.create({ active: true, url: location });
+        chrome.tabs.create({active: true, url: location});
       };
     })();
   }
diff --git a/packages/react-devtools-extensions/shared/src/backend.js b/packages/react-devtools-extensions/shared/src/backend.js
index a8260bb8e91ab..85277ec8f0e06 100644
--- a/packages/react-devtools-extensions/shared/src/backend.js
+++ b/packages/react-devtools-extensions/shared/src/backend.js
@@ -22,7 +22,7 @@ window.addEventListener('message', welcome);
 function setup(hook) {
   const Agent = require('react-devtools-shared/src/backend/agent').default;
   const Bridge = require('react-devtools-shared/src/bridge').default;
-  const { initBackend } = require('react-devtools-shared/src/backend');
+  const {initBackend} = require('react-devtools-shared/src/backend');
   const setupNativeStyleEditor = require('react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor')
     .default;
 
@@ -48,7 +48,7 @@ function setup(hook) {
       window.postMessage(
         {
           source: 'react-devtools-bridge',
-          payload: { event, payload },
+          payload: {event, payload},
         },
         '*',
         transferable
diff --git a/packages/react-devtools-extensions/shared/src/background.js b/packages/react-devtools-extensions/shared/src/background.js
index e22071b3aa657..500e18fa57628 100644
--- a/packages/react-devtools-extensions/shared/src/background.js
+++ b/packages/react-devtools-extensions/shared/src/background.js
@@ -36,7 +36,7 @@ function isNumeric(str: string): boolean {
 function installContentScript(tabId: number) {
   chrome.tabs.executeScript(
     tabId,
-    { file: '/build/contentScript.js' },
+    {file: '/build/contentScript.js'},
     function() {}
   );
 }
diff --git a/packages/react-devtools-extensions/shared/src/injectGlobalHook.js b/packages/react-devtools-extensions/shared/src/injectGlobalHook.js
index 0b75fb77c00e5..9efb34ef2c88c 100644
--- a/packages/react-devtools-extensions/shared/src/injectGlobalHook.js
+++ b/packages/react-devtools-extensions/shared/src/injectGlobalHook.js
@@ -1,9 +1,9 @@
 /* global chrome */
 
 import nullthrows from 'nullthrows';
-import { installHook } from 'react-devtools-shared/src/hook';
-import { SESSION_STORAGE_RELOAD_AND_PROFILE_KEY } from 'react-devtools-shared/src/constants';
-import { sessionStorageGetItem } from 'react-devtools-shared/src/storage';
+import {installHook} from 'react-devtools-shared/src/hook';
+import {SESSION_STORAGE_RELOAD_AND_PROFILE_KEY} from 'react-devtools-shared/src/constants';
+import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
 
 function injectCode(code) {
   const script = document.createElement('script');
diff --git a/packages/react-devtools-extensions/shared/src/main.js b/packages/react-devtools-extensions/shared/src/main.js
index 027be3ce6b9bd..ae1182c6a69d7 100644
--- a/packages/react-devtools-extensions/shared/src/main.js
+++ b/packages/react-devtools-extensions/shared/src/main.js
@@ -1,7 +1,7 @@
 /* global chrome */
 
-import { createElement } from 'react';
-import { unstable_createRoot as createRoot, flushSync } from 'react-dom';
+import {createElement} from 'react';
+import {unstable_createRoot as createRoot, flushSync} from 'react-dom';
 import Bridge from 'react-devtools-shared/src/bridge';
 import Store from 'react-devtools-shared/src/devtools/store';
 import inject from './inject';
@@ -10,7 +10,10 @@ import {
   getBrowserName,
   getBrowserTheme,
 } from './utils';
-import { getSavedComponentFilters, getAppendComponentStack } from 'react-devtools-shared/src/utils';
+import {
+  getSavedComponentFilters,
+  getAppendComponentStack,
+} from 'react-devtools-shared/src/utils';
 import {
   localStorageGetItem,
   localStorageRemoveItem,
@@ -93,7 +96,7 @@ function createPanelIfReactLoaded() {
             };
           },
           send(event: string, payload: any, transferable?: Array<any>) {
-            port.postMessage({ event, payload }, transferable);
+            port.postMessage({event, payload}, transferable);
           },
         });
         bridge.addListener('reloadAppForProfiling', () => {
diff --git a/packages/react-devtools-extensions/shared/src/renderer.js b/packages/react-devtools-extensions/shared/src/renderer.js
index e9165c40e6696..8b099b437f3a6 100644
--- a/packages/react-devtools-extensions/shared/src/renderer.js
+++ b/packages/react-devtools-extensions/shared/src/renderer.js
@@ -8,7 +8,7 @@
  * @flow
  */
 
-import { attach } from 'react-devtools-shared/src/backend/renderer';
+import {attach} from 'react-devtools-shared/src/backend/renderer';
 
 Object.defineProperty(
   window,
diff --git a/packages/react-devtools-extensions/shared/src/utils.js b/packages/react-devtools-extensions/shared/src/utils.js
index c419244596592..c8d4003115a85 100644
--- a/packages/react-devtools-extensions/shared/src/utils.js
+++ b/packages/react-devtools-extensions/shared/src/utils.js
@@ -8,7 +8,7 @@ export function createViewElementSource(bridge: Bridge, store: Store) {
     if (rendererID != null) {
       // Ask the renderer interface to determine the component function,
       // and store it as a global variable on the window
-      bridge.send('viewElementSource', { id, rendererID });
+      bridge.send('viewElementSource', {id, rendererID});
 
       setTimeout(() => {
         // Ask Chrome to display the location of the component function,
diff --git a/packages/react-devtools-extensions/shared/webpack.backend.js b/packages/react-devtools-extensions/shared/webpack.backend.js
index 31bd9a3449111..ccca69b347ea4 100644
--- a/packages/react-devtools-extensions/shared/webpack.backend.js
+++ b/packages/react-devtools-extensions/shared/webpack.backend.js
@@ -1,6 +1,6 @@
-const { resolve } = require('path');
-const { DefinePlugin } = require('webpack');
-const { getGitHubURL, getVersionString } = require('../utils');
+const {resolve} = require('path');
+const {DefinePlugin} = require('webpack');
+const {getGitHubURL, getVersionString} = require('../utils');
 
 const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {
diff --git a/packages/react-devtools-extensions/shared/webpack.config.js b/packages/react-devtools-extensions/shared/webpack.config.js
index 06cd0eceed68e..c2b56e66af828 100644
--- a/packages/react-devtools-extensions/shared/webpack.config.js
+++ b/packages/react-devtools-extensions/shared/webpack.config.js
@@ -1,6 +1,6 @@
-const { resolve } = require('path');
-const { DefinePlugin } = require('webpack');
-const { getGitHubURL, getVersionString } = require('../utils');
+const {resolve} = require('path');
+const {DefinePlugin} = require('webpack');
+const {getGitHubURL, getVersionString} = require('../utils');
 
 const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {
diff --git a/packages/react-devtools-extensions/utils.js b/packages/react-devtools-extensions/utils.js
index 515f5c242b6a9..8bc91f152429d 100644
--- a/packages/react-devtools-extensions/utils.js
+++ b/packages/react-devtools-extensions/utils.js
@@ -1,6 +1,6 @@
-const { execSync } = require('child_process');
-const { readFileSync } = require('fs');
-const { resolve } = require('path');
+const {execSync} = require('child_process');
+const {readFileSync} = require('fs');
+const {resolve} = require('path');
 
 function getGitCommit() {
   return execSync('git show -s --format=%h')
@@ -26,7 +26,7 @@ function getGitHubURL() {
 
 function getVersionString() {
   const packageVersion = JSON.parse(
-    readFileSync(resolve(__dirname, '../package.json'))
+    readFileSync(resolve(__dirname, '../package.json')),
   ).version;
 
   const commit = getGitCommit();
@@ -34,4 +34,4 @@ function getVersionString() {
   return `${packageVersion}-${commit}`;
 }
 
-module.exports = { getGitCommit, getGitHubURL, getVersionString };
+module.exports = {getGitCommit, getGitHubURL, getVersionString};
diff --git a/packages/react-devtools-inline/src/backend.js b/packages/react-devtools-inline/src/backend.js
index 7ff6d02f2bb28..55a6aea49af4b 100644
--- a/packages/react-devtools-inline/src/backend.js
+++ b/packages/react-devtools-inline/src/backend.js
@@ -2,8 +2,8 @@
 
 import Agent from 'react-devtools-shared/src/backend/agent';
 import Bridge from 'react-devtools-shared/src/bridge';
-import { initBackend } from 'react-devtools-shared/src/backend';
-import { installHook } from 'react-devtools-shared/src/hook';
+import {initBackend} from 'react-devtools-shared/src/backend';
+import {installHook} from 'react-devtools-shared/src/hook';
 import setupNativeStyleEditor from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
 import {
   MESSAGE_TYPE_GET_SAVED_PREFERENCES,
@@ -11,16 +11,16 @@ import {
 } from './constants';
 
 function startActivation(contentWindow: window) {
-  const { parent } = contentWindow;
+  const {parent} = contentWindow;
 
-  const onMessage = ({ data }) => {
+  const onMessage = ({data}) => {
     switch (data.type) {
       case MESSAGE_TYPE_SAVED_PREFERENCES:
         // This is the only message we're listening for,
         // so it's safe to cleanup after we've received it.
         contentWindow.removeEventListener('message', onMessage);
 
-        const { appendComponentStack, componentFilters } = data;
+        const {appendComponentStack, componentFilters} = data;
 
         contentWindow.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
         contentWindow.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
@@ -49,11 +49,11 @@ function startActivation(contentWindow: window) {
   // because they are stored in localStorage within the context of the extension (on the frontend).
   // Instead it relies on the extension to pass preferences through.
   // Because we might be in a sandboxed iframe, we have to ask for them by way of postMessage().
-  parent.postMessage({ type: MESSAGE_TYPE_GET_SAVED_PREFERENCES }, '*');
+  parent.postMessage({type: MESSAGE_TYPE_GET_SAVED_PREFERENCES}, '*');
 }
 
 function finishActivation(contentWindow: window) {
-  const { parent } = contentWindow;
+  const {parent} = contentWindow;
 
   const bridge = new Bridge({
     listen(fn) {
@@ -66,7 +66,7 @@ function finishActivation(contentWindow: window) {
       };
     },
     send(event: string, payload: any, transferable?: Array<any>) {
-      parent.postMessage({ event, payload }, '*', transferable);
+      parent.postMessage({event, payload}, '*', transferable);
     },
   });
 
@@ -82,7 +82,7 @@ function finishActivation(contentWindow: window) {
       bridge,
       agent,
       hook.resolveRNStyle,
-      hook.nativeStyleEditorValidAttributes
+      hook.nativeStyleEditorValidAttributes,
     );
   }
 }
diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js
index a1f8da206d64c..083848c63c38a 100644
--- a/packages/react-devtools-inline/src/frontend.js
+++ b/packages/react-devtools-inline/src/frontend.js
@@ -1,22 +1,25 @@
 /** @flow */
 
-import React, { forwardRef } from 'react';
+import React, {forwardRef} from 'react';
 import Bridge from 'react-devtools-shared/src/bridge';
 import Store from 'react-devtools-shared/src/devtools/store';
 import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
-import { getSavedComponentFilters, getAppendComponentStack } from 'react-devtools-shared/src/utils';
+import {
+  getSavedComponentFilters,
+  getAppendComponentStack,
+} from 'react-devtools-shared/src/utils';
 import {
   MESSAGE_TYPE_GET_SAVED_PREFERENCES,
   MESSAGE_TYPE_SAVED_PREFERENCES,
 } from './constants';
 
-import type { FrontendBridge } from 'react-devtools-shared/src/bridge';
-import type { Props } from 'react-devtools-shared/src/devtools/views/DevTools';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {Props} from 'react-devtools-shared/src/devtools/views/DevTools';
 
 export function initialize(
-  contentWindow: window
+  contentWindow: window,
 ): React.AbstractComponent<Props, mixed> {
-  const onMessage = ({ data, source }) => {
+  const onMessage = ({data, source}) => {
     if (source === 'react-devtools-content-script') {
       // Ignore messages from the DevTools browser extension.
     }
@@ -36,7 +39,7 @@ export function initialize(
             appendComponentStack: getAppendComponentStack(),
             componentFilters: getSavedComponentFilters(),
           },
-          '*'
+          '*',
         );
         break;
       default:
@@ -48,7 +51,7 @@ export function initialize(
 
   const bridge: FrontendBridge = new Bridge({
     listen(fn) {
-      const onMessage = ({ data }) => {
+      const onMessage = ({data}) => {
         fn(data);
       };
       window.addEventListener('message', onMessage);
@@ -57,7 +60,7 @@ export function initialize(
       };
     },
     send(event: string, payload: any, transferable?: Array<any>) {
-      contentWindow.postMessage({ event, payload }, '*', transferable);
+      contentWindow.postMessage({event, payload}, '*', transferable);
     },
   });
 
diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js
index 254d4e4129ecf..dbfe570a43c65 100644
--- a/packages/react-devtools-inline/webpack.config.js
+++ b/packages/react-devtools-inline/webpack.config.js
@@ -1,6 +1,6 @@
-const { resolve } = require('path');
-const { DefinePlugin } = require('webpack');
-const { getGitHubURL, getVersionString } = require('../../shells/utils');
+const {resolve} = require('path');
+const {DefinePlugin} = require('webpack');
+const {getGitHubURL, getVersionString} = require('../../shells/utils');
 
 const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {
diff --git a/packages/react-devtools-shared/src/__tests__/bridge-test.js b/packages/react-devtools-shared/src/__tests__/bridge-test.js
index 3bf6055c4b121..ddd9e044e9fd7 100644
--- a/packages/react-devtools-shared/src/__tests__/bridge-test.js
+++ b/packages/react-devtools-shared/src/__tests__/bridge-test.js
@@ -36,7 +36,7 @@ describe('Bridge', () => {
     jest.runAllTimers();
     expect(wall.send).not.toHaveBeenCalled();
     expect(console.warn).toHaveBeenCalledWith(
-      'Cannot send message "should not send" through a Bridge that has been shutdown.'
+      'Cannot send message "should not send" through a Bridge that has been shutdown.',
     );
   });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/console-test.js b/packages/react-devtools-shared/src/__tests__/console-test.js
index a633e6f817a11..dc6dde9f48a49 100644
--- a/packages/react-devtools-shared/src/__tests__/console-test.js
+++ b/packages/react-devtools-shared/src/__tests__/console-test.js
@@ -61,7 +61,7 @@ describe('console', () => {
   });
 
   it('should only patch the console once', () => {
-    const { error, warn } = fakeConsole;
+    const {error, warn} = fakeConsole;
 
     patchConsole();
 
@@ -109,7 +109,7 @@ describe('console', () => {
     expect(mockWarn).toHaveBeenCalledTimes(1);
     expect(mockWarn.mock.calls[0]).toHaveLength(1);
     expect(mockWarn.mock.calls[0][0]).toBe(
-      'warn\n    in Child (at fake.js:123)'
+      'warn\n    in Child (at fake.js:123)',
     );
     expect(mockError).toHaveBeenCalledTimes(1);
     expect(mockError.mock.calls[0]).toHaveLength(2);
@@ -118,7 +118,7 @@ describe('console', () => {
   });
 
   it('should append component stacks to errors and warnings logged during render', () => {
-    const Intermediate = ({ children }) => children;
+    const Intermediate = ({children}) => children;
     const Parent = () => (
       <Intermediate>
         <Child />
@@ -140,18 +140,18 @@ describe('console', () => {
     expect(mockWarn.mock.calls[0]).toHaveLength(2);
     expect(mockWarn.mock.calls[0][0]).toBe('warn');
     expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
-      '\n    in Child (at **)\n    in Parent (at **)'
+      '\n    in Child (at **)\n    in Parent (at **)',
     );
     expect(mockError).toHaveBeenCalledTimes(1);
     expect(mockError.mock.calls[0]).toHaveLength(2);
     expect(mockError.mock.calls[0][0]).toBe('error');
     expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(
-      '\n    in Child (at **)\n    in Parent (at **)'
+      '\n    in Child (at **)\n    in Parent (at **)',
     );
   });
 
   it('should append component stacks to errors and warnings logged from effects', () => {
-    const Intermediate = ({ children }) => children;
+    const Intermediate = ({children}) => children;
     const Parent = () => (
       <Intermediate>
         <Child />
@@ -182,28 +182,28 @@ describe('console', () => {
     expect(mockWarn.mock.calls[0]).toHaveLength(2);
     expect(mockWarn.mock.calls[0][0]).toBe('active warn');
     expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
-      '\n    in Child (at **)\n    in Parent (at **)'
+      '\n    in Child (at **)\n    in Parent (at **)',
     );
     expect(mockWarn.mock.calls[1]).toHaveLength(2);
     expect(mockWarn.mock.calls[1][0]).toBe('passive warn');
     expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][1])).toEqual(
-      '\n    in Child (at **)\n    in Parent (at **)'
+      '\n    in Child (at **)\n    in Parent (at **)',
     );
     expect(mockError).toHaveBeenCalledTimes(2);
     expect(mockError.mock.calls[0]).toHaveLength(2);
     expect(mockError.mock.calls[0][0]).toBe('active error');
     expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(
-      '\n    in Child (at **)\n    in Parent (at **)'
+      '\n    in Child (at **)\n    in Parent (at **)',
     );
     expect(mockError.mock.calls[1]).toHaveLength(2);
     expect(mockError.mock.calls[1][0]).toBe('passive error');
     expect(normalizeCodeLocInfo(mockError.mock.calls[1][1])).toBe(
-      '\n    in Child (at **)\n    in Parent (at **)'
+      '\n    in Child (at **)\n    in Parent (at **)',
     );
   });
 
   it('should append component stacks to errors and warnings logged from commit hooks', () => {
-    const Intermediate = ({ children }) => children;
+    const Intermediate = ({children}) => children;
     const Parent = () => (
       <Intermediate>
         <Child />
@@ -238,28 +238,28 @@ describe('console', () => {
     expect(mockWarn.mock.calls[0]).toHaveLength(2);
     expect(mockWarn.mock.calls[0][0]).toBe('didMount warn');
     expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
-      '\n    in Child (at **)\n    in Parent (at **)'
+      '\n    in Child (at **)\n    in Parent (at **)',
     );
     expect(mockWarn.mock.calls[1]).toHaveLength(2);
     expect(mockWarn.mock.calls[1][0]).toBe('didUpdate warn');
     expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][1])).toEqual(
-      '\n    in Child (at **)\n    in Parent (at **)'
+      '\n    in Child (at **)\n    in Parent (at **)',
     );
     expect(mockError).toHaveBeenCalledTimes(2);
     expect(mockError.mock.calls[0]).toHaveLength(2);
     expect(mockError.mock.calls[0][0]).toBe('didMount error');
     expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(
-      '\n    in Child (at **)\n    in Parent (at **)'
+      '\n    in Child (at **)\n    in Parent (at **)',
     );
     expect(mockError.mock.calls[1]).toHaveLength(2);
     expect(mockError.mock.calls[1][0]).toBe('didUpdate error');
     expect(normalizeCodeLocInfo(mockError.mock.calls[1][1])).toBe(
-      '\n    in Child (at **)\n    in Parent (at **)'
+      '\n    in Child (at **)\n    in Parent (at **)',
     );
   });
 
   it('should append component stacks to errors and warnings logged from gDSFP', () => {
-    const Intermediate = ({ children }) => children;
+    const Intermediate = ({children}) => children;
     const Parent = () => (
       <Intermediate>
         <Child />
@@ -287,13 +287,13 @@ describe('console', () => {
     expect(mockWarn.mock.calls[0]).toHaveLength(2);
     expect(mockWarn.mock.calls[0][0]).toBe('warn');
     expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
-      '\n    in Child (at **)\n    in Parent (at **)'
+      '\n    in Child (at **)\n    in Parent (at **)',
     );
     expect(mockError).toHaveBeenCalledTimes(1);
     expect(mockError.mock.calls[0]).toHaveLength(2);
     expect(mockError.mock.calls[0][0]).toBe('error');
     expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(
-      '\n    in Child (at **)\n    in Parent (at **)'
+      '\n    in Child (at **)\n    in Parent (at **)',
     );
   });
 
@@ -321,13 +321,13 @@ describe('console', () => {
     expect(mockWarn.mock.calls[1]).toHaveLength(2);
     expect(mockWarn.mock.calls[1][0]).toBe('warn');
     expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][1])).toEqual(
-      '\n    in Child (at **)'
+      '\n    in Child (at **)',
     );
     expect(mockError).toHaveBeenCalledTimes(2);
     expect(mockError.mock.calls[1]).toHaveLength(2);
     expect(mockError.mock.calls[1][0]).toBe('error');
     expect(normalizeCodeLocInfo(mockError.mock.calls[1][1])).toBe(
-      '\n    in Child (at **)'
+      '\n    in Child (at **)',
     );
   });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
index 78696aa16d8b0..6749fa530892c 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
@@ -1,8 +1,8 @@
 // @flow
 
 import typeof ReactTestRenderer from 'react-test-renderer';
-import type { GetInspectedElementPath } from 'react-devtools-shared/src/devtools/views/Components/InspectedElementContext';
-import type { FrontendBridge } from 'react-devtools-shared/src/bridge';
+import type {GetInspectedElementPath} from 'react-devtools-shared/src/devtools/views/Components/InspectedElementContext';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type Store from 'react-devtools-shared/src/devtools/store';
 
 describe('InspectedElementContext', () => {
@@ -36,12 +36,14 @@ describe('InspectedElementContext', () => {
     TestUtils = require('react-dom/test-utils');
     TestRenderer = utils.requireTestRenderer();
 
-    BridgeContext = require('react-devtools-shared/src/devtools/views/context').BridgeContext;
+    BridgeContext = require('react-devtools-shared/src/devtools/views/context')
+      .BridgeContext;
     InspectedElementContext = require('react-devtools-shared/src/devtools/views/Components/InspectedElementContext')
       .InspectedElementContext;
     InspectedElementContextController = require('react-devtools-shared/src/devtools/views/Components/InspectedElementContext')
       .InspectedElementContextController;
-    StoreContext = require('react-devtools-shared/src/devtools/views/context').StoreContext;
+    StoreContext = require('react-devtools-shared/src/devtools/views/context')
+      .StoreContext;
     TreeContextController = require('react-devtools-shared/src/devtools/views/Components/TreeContext')
       .TreeContextController;
   });
@@ -55,8 +57,7 @@ describe('InspectedElementContext', () => {
       <StoreContext.Provider value={store}>
         <TreeContextController
           defaultSelectedElementID={defaultSelectedElementID}
-          defaultSelectedElementIndex={defaultSelectedElementIndex}
-        >
+          defaultSelectedElementIndex={defaultSelectedElementIndex}>
           <InspectedElementContextController>
             {children}
           </InspectedElementContextController>
@@ -73,15 +74,15 @@ describe('InspectedElementContext', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(<Example a={1} b="abc" />, container)
+      ReactDOM.render(<Example a={1} b="abc" />, container),
     );
 
     const id = ((store.getElementIDAtIndex(0): any): number);
 
     let didFinish = false;
 
-    function Suspender({ target }) {
-      const { getInspectedElement } = React.useContext(InspectedElementContext);
+    function Suspender({target}) {
+      const {getInspectedElement} = React.useContext(InspectedElementContext);
       const inspectedElement = getInspectedElement(id);
       expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
       didFinish = true;
@@ -93,14 +94,13 @@ describe('InspectedElementContext', () => {
         TestRenderer.create(
           <Contexts
             defaultSelectedElementID={id}
-            defaultSelectedElementIndex={0}
-          >
+            defaultSelectedElementIndex={0}>
             <React.Suspense fallback={null}>
               <Suspender target={id} />
             </React.Suspense>
-          </Contexts>
+          </Contexts>,
         ),
-      false
+      false,
     );
     expect(didFinish).toBe(true);
 
@@ -113,15 +113,15 @@ describe('InspectedElementContext', () => {
     const container = document.createElement('div');
     await utils.actAsync(
       () => ReactDOM.render(<Example a={1} b="abc" />, container),
-      false
+      false,
     );
 
     const id = ((store.getElementIDAtIndex(0): any): number);
 
     let inspectedElement = null;
 
-    function Suspender({ target }) {
-      const { getInspectedElement } = React.useContext(InspectedElementContext);
+    function Suspender({target}) {
+      const {getInspectedElement} = React.useContext(InspectedElementContext);
       inspectedElement = getInspectedElement(id);
       return null;
     }
@@ -134,14 +134,14 @@ describe('InspectedElementContext', () => {
           <React.Suspense fallback={null}>
             <Suspender target={id} />
           </React.Suspense>
-        </Contexts>
+        </Contexts>,
       );
     }, false);
     expect(inspectedElement).toMatchSnapshot('1: initial render');
 
     await utils.actAsync(
       () => ReactDOM.render(<Example a={2} b="def" />, container),
-      false
+      false,
     );
 
     inspectedElement = null;
@@ -150,14 +150,13 @@ describe('InspectedElementContext', () => {
         renderer.update(
           <Contexts
             defaultSelectedElementID={id}
-            defaultSelectedElementIndex={0}
-          >
+            defaultSelectedElementIndex={0}>
             <React.Suspense fallback={null}>
               <Suspender target={id} />
             </React.Suspense>
-          </Contexts>
+          </Contexts>,
         ),
-      false
+      false,
     );
     expect(inspectedElement).toMatchSnapshot('2: updated state');
 
@@ -167,7 +166,7 @@ describe('InspectedElementContext', () => {
   it('should not re-render a function with hooks if it did not update since it was last inspected', async done => {
     let targetRenderCount = 0;
 
-    const Wrapper = ({ children }) => children;
+    const Wrapper = ({children}) => children;
     const Target = React.memo(props => {
       targetRenderCount++;
       React.useState(0);
@@ -180,16 +179,16 @@ describe('InspectedElementContext', () => {
         <Wrapper>
           <Target a={1} b="abc" />
         </Wrapper>,
-        container
-      )
+        container,
+      ),
     );
 
     const id = ((store.getElementIDAtIndex(1): any): number);
 
     let inspectedElement = null;
 
-    function Suspender({ target }) {
-      const { getInspectedElement } = React.useContext(InspectedElementContext);
+    function Suspender({target}) {
+      const {getInspectedElement} = React.useContext(InspectedElementContext);
       inspectedElement = getInspectedElement(target);
       return null;
     }
@@ -202,14 +201,13 @@ describe('InspectedElementContext', () => {
         (renderer = TestRenderer.create(
           <Contexts
             defaultSelectedElementID={id}
-            defaultSelectedElementIndex={1}
-          >
+            defaultSelectedElementIndex={1}>
             <React.Suspense fallback={null}>
               <Suspender target={id} />
             </React.Suspense>
-          </Contexts>
+          </Contexts>,
         )),
-      false
+      false,
     );
     expect(targetRenderCount).toBe(1);
     expect(inspectedElement).toMatchSnapshot('1: initial render');
@@ -223,14 +221,13 @@ describe('InspectedElementContext', () => {
         renderer.update(
           <Contexts
             defaultSelectedElementID={id}
-            defaultSelectedElementIndex={1}
-          >
+            defaultSelectedElementIndex={1}>
             <React.Suspense fallback={null}>
               <Suspender target={id} />
             </React.Suspense>
-          </Contexts>
+          </Contexts>,
         ),
-      false
+      false,
     );
     expect(targetRenderCount).toBe(0);
     expect(inspectedElement).toEqual(initialInspectedElement);
@@ -243,9 +240,9 @@ describe('InspectedElementContext', () => {
           <Wrapper>
             <Target a={2} b="def" />
           </Wrapper>,
-          container
+          container,
         ),
-      false
+      false,
     );
 
     // Target should have been rendered once (by ReactDOM) and once by DevTools for inspection.
@@ -275,7 +272,7 @@ describe('InspectedElementContext', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(<Target a={1} b="abc" />, container)
+      ReactDOM.render(<Target a={1} b="abc" />, container),
     );
 
     expect(targetRenderCount).toBe(1);
@@ -292,8 +289,8 @@ describe('InspectedElementContext', () => {
 
     let inspectedElement = null;
 
-    function Suspender({ target }) {
-      const { getInspectedElement } = React.useContext(InspectedElementContext);
+    function Suspender({target}) {
+      const {getInspectedElement} = React.useContext(InspectedElementContext);
       inspectedElement = getInspectedElement(target);
       return null;
     }
@@ -303,14 +300,13 @@ describe('InspectedElementContext', () => {
         TestRenderer.create(
           <Contexts
             defaultSelectedElementID={id}
-            defaultSelectedElementIndex={1}
-          >
+            defaultSelectedElementIndex={1}>
             <React.Suspense fallback={null}>
               <Suspender target={id} />
             </React.Suspense>
-          </Contexts>
+          </Contexts>,
         ),
-      false
+      false,
     );
 
     expect(inspectedElement).not.toBe(null);
@@ -342,15 +338,15 @@ describe('InspectedElementContext', () => {
           value_null={null}
           value_undefined={undefined}
         />,
-        container
-      )
+        container,
+      ),
     );
 
     const id = ((store.getElementIDAtIndex(0): any): number);
     let inspectedElement = null;
 
-    function Suspender({ target }) {
-      const { getInspectedElement } = React.useContext(InspectedElementContext);
+    function Suspender({target}) {
+      const {getInspectedElement} = React.useContext(InspectedElementContext);
       inspectedElement = getInspectedElement(id);
       return null;
     }
@@ -360,20 +356,19 @@ describe('InspectedElementContext', () => {
         TestRenderer.create(
           <Contexts
             defaultSelectedElementID={id}
-            defaultSelectedElementIndex={0}
-          >
+            defaultSelectedElementIndex={0}>
             <React.Suspense fallback={null}>
               <Suspender target={id} />
             </React.Suspense>
-          </Contexts>
+          </Contexts>,
         ),
-      false
+      false,
     );
 
     expect(inspectedElement).not.toBeNull();
     expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
 
-    const { props } = (inspectedElement: any);
+    const {props} = (inspectedElement: any);
     expect(props.boolean_false).toBe(false);
     expect(props.boolean_true).toBe(true);
     expect(Number.isFinite(props.infinity)).toBe(false);
@@ -408,16 +403,16 @@ describe('InspectedElementContext', () => {
           typed_array={typedArray}
           date={new Date()}
         />,
-        container
-      )
+        container,
+      ),
     );
 
     const id = ((store.getElementIDAtIndex(0): any): number);
 
     let inspectedElement = null;
 
-    function Suspender({ target }) {
-      const { getInspectedElement } = React.useContext(InspectedElementContext);
+    function Suspender({target}) {
+      const {getInspectedElement} = React.useContext(InspectedElementContext);
       inspectedElement = getInspectedElement(id);
       return null;
     }
@@ -427,14 +422,13 @@ describe('InspectedElementContext', () => {
         TestRenderer.create(
           <Contexts
             defaultSelectedElementID={id}
-            defaultSelectedElementIndex={0}
-          >
+            defaultSelectedElementIndex={0}>
             <React.Suspense fallback={null}>
               <Suspender target={id} />
             </React.Suspense>
-          </Contexts>
+          </Contexts>,
         ),
-      false
+      false,
     );
 
     expect(inspectedElement).not.toBeNull();
@@ -488,7 +482,7 @@ describe('InspectedElementContext', () => {
 
     const descriptor = ((Object.getOwnPropertyDescriptor(
       CustomData.prototype,
-      'number'
+      'number',
     ): any): PropertyDescriptor<number>);
     descriptor.enumerable = true;
     Object.defineProperty(CustomData.prototype, 'number', descriptor);
@@ -497,15 +491,15 @@ describe('InspectedElementContext', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(<Example data={new CustomData()} />, container)
+      ReactDOM.render(<Example data={new CustomData()} />, container),
     );
 
     const id = ((store.getElementIDAtIndex(0): any): number);
 
     let didFinish = false;
 
-    function Suspender({ target }) {
-      const { getInspectedElement } = React.useContext(InspectedElementContext);
+    function Suspender({target}) {
+      const {getInspectedElement} = React.useContext(InspectedElementContext);
       const inspectedElement = getInspectedElement(id);
       expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
       didFinish = true;
@@ -517,14 +511,13 @@ describe('InspectedElementContext', () => {
         TestRenderer.create(
           <Contexts
             defaultSelectedElementID={id}
-            defaultSelectedElementIndex={0}
-          >
+            defaultSelectedElementIndex={0}>
             <React.Suspense fallback={null}>
               <Suspender target={id} />
             </React.Suspense>
-          </Contexts>
+          </Contexts>,
         ),
-      false
+      false,
     );
     expect(didFinish).toBe(true);
 
@@ -562,8 +555,8 @@ describe('InspectedElementContext', () => {
             },
           }}
         />,
-        container
-      )
+        container,
+      ),
     );
 
     const id = ((store.getElementIDAtIndex(0): any): number);
@@ -571,7 +564,7 @@ describe('InspectedElementContext', () => {
     let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);
     let inspectedElement = null;
 
-    function Suspender({ target }) {
+    function Suspender({target}) {
       const context = React.useContext(InspectedElementContext);
       getInspectedElementPath = context.getInspectedElementPath;
       inspectedElement = context.getInspectedElement(target);
@@ -583,14 +576,13 @@ describe('InspectedElementContext', () => {
         TestRenderer.create(
           <Contexts
             defaultSelectedElementID={id}
-            defaultSelectedElementIndex={0}
-          >
+            defaultSelectedElementIndex={0}>
             <React.Suspense fallback={null}>
               <Suspender target={id} />
             </React.Suspense>
-          </Contexts>
+          </Contexts>,
         ),
-      false
+      false,
     );
     expect(getInspectedElementPath).not.toBeNull();
     expect(inspectedElement).not.toBeNull();
@@ -615,7 +607,7 @@ describe('InspectedElementContext', () => {
     });
     expect(inspectedElement).not.toBeNull();
     expect(inspectedElement).toMatchSnapshot(
-      '3: Inspect props.nestedObject.a.b.c'
+      '3: Inspect props.nestedObject.a.b.c',
     );
 
     inspectedElement = null;
@@ -635,7 +627,7 @@ describe('InspectedElementContext', () => {
     });
     expect(inspectedElement).not.toBeNull();
     expect(inspectedElement).toMatchSnapshot(
-      '4: Inspect props.nestedObject.a.b.c.0.d'
+      '4: Inspect props.nestedObject.a.b.c.0.d',
     );
 
     inspectedElement = null;
@@ -657,7 +649,7 @@ describe('InspectedElementContext', () => {
     });
     expect(inspectedElement).not.toBeNull();
     expect(inspectedElement).toMatchSnapshot(
-      '6: Inspect hooks.0.value.foo.bar'
+      '6: Inspect hooks.0.value.foo.bar',
     );
 
     done();
@@ -688,8 +680,8 @@ describe('InspectedElementContext', () => {
             },
           }}
         />,
-        container
-      )
+        container,
+      ),
     );
 
     const id = ((store.getElementIDAtIndex(0): any): number);
@@ -697,7 +689,7 @@ describe('InspectedElementContext', () => {
     let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);
     let inspectedElement = null;
 
-    function Suspender({ target }) {
+    function Suspender({target}) {
       const context = React.useContext(InspectedElementContext);
       getInspectedElementPath = context.getInspectedElementPath;
       inspectedElement = context.getInspectedElement(id);
@@ -709,14 +701,13 @@ describe('InspectedElementContext', () => {
         TestRenderer.create(
           <Contexts
             defaultSelectedElementID={id}
-            defaultSelectedElementIndex={0}
-          >
+            defaultSelectedElementIndex={0}>
             <React.Suspense fallback={null}>
               <Suspender target={id} />
             </React.Suspense>
-          </Contexts>
+          </Contexts>,
         ),
-      false
+      false,
     );
     expect(getInspectedElementPath).not.toBeNull();
     expect(inspectedElement).not.toBeNull();
@@ -760,7 +751,7 @@ describe('InspectedElementContext', () => {
               },
             }}
           />,
-          container
+          container,
         );
       });
     });
@@ -792,8 +783,8 @@ describe('InspectedElementContext', () => {
             },
           }}
         />,
-        container
-      )
+        container,
+      ),
     );
 
     const id = ((store.getElementIDAtIndex(0): any): number);
@@ -801,7 +792,7 @@ describe('InspectedElementContext', () => {
     let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);
     let inspectedElement = null;
 
-    function Suspender({ target }) {
+    function Suspender({target}) {
       const context = React.useContext(InspectedElementContext);
       getInspectedElementPath = context.getInspectedElementPath;
       inspectedElement = context.getInspectedElement(id);
@@ -813,14 +804,13 @@ describe('InspectedElementContext', () => {
         TestRenderer.create(
           <Contexts
             defaultSelectedElementID={id}
-            defaultSelectedElementIndex={0}
-          >
+            defaultSelectedElementIndex={0}>
             <React.Suspense fallback={null}>
               <Suspender target={id} />
             </React.Suspense>
-          </Contexts>
+          </Contexts>,
         ),
-      false
+      false,
     );
     expect(getInspectedElementPath).not.toBeNull();
     expect(inspectedElement).not.toBeNull();
@@ -839,7 +829,7 @@ describe('InspectedElementContext', () => {
             },
           }}
         />,
-        container
+        container,
       );
     });
 
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js b/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
index 13e105cf0d62e..b6290daf61a95 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
@@ -23,6 +23,6 @@ export function print(inspectedElement, serialize, indent) {
       state: inspectedElement.state,
     },
     null,
-    2
+    2,
   );
 }
diff --git a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
index fe1e7fa89f58e..3452745c21cf3 100644
--- a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
@@ -1,8 +1,8 @@
 // @flow
 
-import type { InspectedElementPayload } from 'react-devtools-shared/src/backend/types';
-import type { DehydratedData } from 'react-devtools-shared/src/devtools/views/Components/types';
-import type { FrontendBridge } from 'react-devtools-shared/src/bridge';
+import type {InspectedElementPayload} from 'react-devtools-shared/src/backend/types';
+import type {DehydratedData} from 'react-devtools-shared/src/devtools/views/Components/types';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type Store from 'react-devtools-shared/src/devtools/store';
 
 describe('InspectedElementContext', () => {
@@ -20,7 +20,7 @@ describe('InspectedElementContext', () => {
   };
 
   function dehydrateHelper(
-    dehydratedData: DehydratedData | null
+    dehydratedData: DehydratedData | null,
   ): Object | null {
     if (dehydratedData !== null) {
       return hydrate(dehydratedData.data, dehydratedData.cleaned);
@@ -31,7 +31,7 @@ describe('InspectedElementContext', () => {
 
   async function read(
     id: number,
-    path?: Array<string | number>
+    path?: Array<string | number>,
   ): Promise<Object> {
     return new Promise((resolve, reject) => {
       const rendererID = ((store.getRendererIDForElement(id): any): number);
@@ -49,7 +49,7 @@ describe('InspectedElementContext', () => {
       };
 
       bridge.addListener('inspectedElement', onInspectedElement);
-      bridge.send('inspectElement', { id, path, rendererID });
+      bridge.send('inspectElement', {id, path, rendererID});
 
       jest.runOnlyPendingTimers();
     });
@@ -66,7 +66,7 @@ describe('InspectedElementContext', () => {
     // We use the UMD because Jest doesn't enable us to mock deep imports (e.g. "react/lib/Something").
     jest.mock('react', () => jest.requireActual('react-15/dist/react.js'));
     jest.mock('react-dom', () =>
-      jest.requireActual('react-dom-15/dist/react-dom.js')
+      jest.requireActual('react-dom-15/dist/react-dom.js'),
     );
 
     React = require('react');
@@ -77,7 +77,7 @@ describe('InspectedElementContext', () => {
     const Example = () => null;
 
     act(() =>
-      ReactDOM.render(<Example a={1} b="abc" />, document.createElement('div'))
+      ReactDOM.render(<Example a={1} b="abc" />, document.createElement('div')),
     );
 
     const id = ((store.getElementIDAtIndex(0): any): number);
@@ -106,8 +106,8 @@ describe('InspectedElementContext', () => {
           value_null={null}
           value_undefined={undefined}
         />,
-        document.createElement('div')
-      )
+        document.createElement('div'),
+      ),
     );
 
     const id = ((store.getElementIDAtIndex(0): any): number);
@@ -115,7 +115,7 @@ describe('InspectedElementContext', () => {
 
     expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
 
-    const { props } = inspectedElement.value;
+    const {props} = inspectedElement.value;
     expect(props.boolean_false).toBe(false);
     expect(props.boolean_true).toBe(true);
     expect(Number.isFinite(props.infinity)).toBe(false);
@@ -149,8 +149,8 @@ describe('InspectedElementContext', () => {
           typed_array={typedArray}
           date={new Date()}
         />,
-        document.createElement('div')
-      )
+        document.createElement('div'),
+      ),
     );
 
     const id = ((store.getElementIDAtIndex(0): any): number);
@@ -206,18 +206,18 @@ describe('InspectedElementContext', () => {
 
     const descriptor = ((Object.getOwnPropertyDescriptor(
       CustomData.prototype,
-      'number'
+      'number',
     ): any): PropertyDescriptor<number>);
     descriptor.enumerable = true;
     Object.defineProperty(CustomData.prototype, 'number', descriptor);
 
-    const Example = ({ data }) => null;
+    const Example = ({data}) => null;
 
     act(() =>
       ReactDOM.render(
         <Example data={new CustomData()} />,
-        document.createElement('div')
-      )
+        document.createElement('div'),
+      ),
     );
 
     const id = ((store.getElementIDAtIndex(0): any): number);
@@ -248,8 +248,8 @@ describe('InspectedElementContext', () => {
             },
           }}
         />,
-        document.createElement('div')
-      )
+        document.createElement('div'),
+      ),
     );
 
     const id = ((store.getElementIDAtIndex(0): any): number);
@@ -262,7 +262,7 @@ describe('InspectedElementContext', () => {
 
     inspectedElement = await read(id, ['props', 'nestedObject', 'a', 'b', 'c']);
     expect(inspectedElement).toMatchSnapshot(
-      '3: Inspect props.nestedObject.a.b.c'
+      '3: Inspect props.nestedObject.a.b.c',
     );
 
     inspectedElement = await read(id, [
@@ -275,7 +275,7 @@ describe('InspectedElementContext', () => {
       'd',
     ]);
     expect(inspectedElement).toMatchSnapshot(
-      '4: Inspect props.nestedObject.a.b.c.0.d'
+      '4: Inspect props.nestedObject.a.b.c.0.d',
     );
 
     done();
diff --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
index fc5d373e5bbd4..dd4004f64a3e0 100644
--- a/packages/react-devtools-shared/src/__tests__/legacy/storeLegacy-v15-test.js
+++ b/packages/react-devtools-shared/src/__tests__/legacy/storeLegacy-v15-test.js
@@ -18,7 +18,7 @@ describe('Store (legacy)', () => {
     // We use the UMD because Jest doesn't enable us to mock deep imports (e.g. "react/lib/Something").
     jest.mock('react', () => jest.requireActual('react-15/dist/react.js'));
     jest.mock('react-dom', () =>
-      jest.requireActual('react-dom-15/dist/react-dom.js')
+      jest.requireActual('react-dom-15/dist/react-dom.js'),
     );
 
     React = require('react');
@@ -29,7 +29,7 @@ describe('Store (legacy)', () => {
     const Component = () => <div>Hi</div>;
 
     act(() =>
-      ReactDOM.render(<Component count={4} />, document.createElement('div'))
+      ReactDOM.render(<Component count={4} />, document.createElement('div')),
     );
     expect(store).toMatchSnapshot('1: mount');
 
@@ -38,7 +38,7 @@ describe('Store (legacy)', () => {
     const rootID = store.roots[0];
 
     expect(() => store.toggleIsCollapsed(rootID, true)).toThrow(
-      'Root nodes cannot be collapsed'
+      'Root nodes cannot be collapsed',
     );
   });
 
@@ -48,17 +48,15 @@ describe('Store (legacy)', () => {
     });
 
     it('should support mount and update operations', () => {
-      const Grandparent = ({ count }) => (
+      const Grandparent = ({count}) => (
         <div>
           <Parent count={count} />
           <Parent count={count} />
         </div>
       );
-      const Parent = ({ count }) => (
+      const Parent = ({count}) => (
         <div>
-          {new Array(count).fill(true).map((_, index) => (
-            <Child key={index} />
-          ))}
+          {new Array(count).fill(true).map((_, index) => <Child key={index} />)}
         </div>
       );
       const Child = () => <div>Hi!</div>;
@@ -76,11 +74,9 @@ describe('Store (legacy)', () => {
     });
 
     it('should support mount and update operations for multiple roots', () => {
-      const Parent = ({ count }) => (
+      const Parent = ({count}) => (
         <div>
-          {new Array(count).fill(true).map((_, index) => (
-            <Child key={index} />
-          ))}
+          {new Array(count).fill(true).map((_, index) => <Child key={index} />)}
         </div>
       );
       const Child = () => <div>Hi!</div>;
@@ -108,7 +104,7 @@ describe('Store (legacy)', () => {
     });
 
     it('should not filter DOM nodes from the store tree', () => {
-      const Grandparent = ({ flip }) => (
+      const Grandparent = ({flip}) => (
         <div>
           <div>
             <Parent flip={flip} />
@@ -117,7 +113,7 @@ describe('Store (legacy)', () => {
           <Nothing />
         </div>
       );
-      const Parent = ({ flip }) => (
+      const Parent = ({flip}) => (
         <div>
           {flip ? 'foo' : null}
           <Child />
@@ -130,12 +126,12 @@ describe('Store (legacy)', () => {
 
       const container = document.createElement('div');
       act(() =>
-        ReactDOM.render(<Grandparent count={4} flip={false} />, container)
+        ReactDOM.render(<Grandparent count={4} flip={false} />, container),
       );
       expect(store).toMatchSnapshot('1: mount');
 
       act(() =>
-        ReactDOM.render(<Grandparent count={4} flip={true} />, container)
+        ReactDOM.render(<Grandparent count={4} flip={true} />, container),
       );
       expect(store).toMatchSnapshot('2: update');
 
@@ -144,17 +140,15 @@ describe('Store (legacy)', () => {
     });
 
     it('should support collapsing parts of the tree', () => {
-      const Grandparent = ({ count }) => (
+      const Grandparent = ({count}) => (
         <div>
           <Parent count={count} />
           <Parent count={count} />
         </div>
       );
-      const Parent = ({ count }) => (
+      const Parent = ({count}) => (
         <div>
-          {new Array(count).fill(true).map((_, index) => (
-            <Child key={index} />
-          ))}
+          {new Array(count).fill(true).map((_, index) => <Child key={index} />)}
         </div>
       );
       const Child = () => <div>Hi!</div>;
@@ -162,8 +156,8 @@ describe('Store (legacy)', () => {
       act(() =>
         ReactDOM.render(
           <Grandparent count={2} />,
-          document.createElement('div')
-        )
+          document.createElement('div'),
+        ),
       );
       expect(store).toMatchSnapshot('1: mount');
 
@@ -188,7 +182,7 @@ describe('Store (legacy)', () => {
     });
 
     it('should support adding and removing children', () => {
-      const Root = ({ children }) => <div>{children}</div>;
+      const Root = ({children}) => <div>{children}</div>;
       const Component = () => <div />;
 
       const container = document.createElement('div');
@@ -198,8 +192,8 @@ describe('Store (legacy)', () => {
           <Root>
             <Component key="a" />
           </Root>,
-          container
-        )
+          container,
+        ),
       );
       expect(store).toMatchSnapshot('1: mount');
 
@@ -209,8 +203,8 @@ describe('Store (legacy)', () => {
             <Component key="a" />
             <Component key="b" />
           </Root>,
-          container
-        )
+          container,
+        ),
       );
       expect(store).toMatchSnapshot('2: add child');
 
@@ -219,14 +213,14 @@ describe('Store (legacy)', () => {
           <Root>
             <Component key="b" />
           </Root>,
-          container
-        )
+          container,
+        ),
       );
       expect(store).toMatchSnapshot('3: remove child');
     });
 
     it('should support reordering of children', () => {
-      const Root = ({ children }) => <div>{children}</div>;
+      const Root = ({children}) => <div>{children}</div>;
       const Component = () => <div />;
 
       const Foo = () => <div>{[<Component key="0" />]}</div>;
@@ -258,11 +252,9 @@ describe('Store (legacy)', () => {
     });
 
     it('should support mount and update operations', () => {
-      const Parent = ({ count }) => (
+      const Parent = ({count}) => (
         <div>
-          {new Array(count).fill(true).map((_, index) => (
-            <Child key={index} />
-          ))}
+          {new Array(count).fill(true).map((_, index) => <Child key={index} />)}
         </div>
       );
       const Child = () => <div>Hi!</div>;
@@ -275,8 +267,8 @@ describe('Store (legacy)', () => {
             <Parent count={1} />
             <Parent count={3} />
           </div>,
-          container
-        )
+          container,
+        ),
       );
       expect(store).toMatchSnapshot('1: mount');
 
@@ -286,8 +278,8 @@ describe('Store (legacy)', () => {
             <Parent count={2} />
             <Parent count={1} />
           </div>,
-          container
-        )
+          container,
+        ),
       );
       expect(store).toMatchSnapshot('2: update');
 
@@ -296,11 +288,9 @@ describe('Store (legacy)', () => {
     });
 
     it('should support mount and update operations for multiple roots', () => {
-      const Parent = ({ count }) => (
+      const Parent = ({count}) => (
         <div>
-          {new Array(count).fill(true).map((_, index) => (
-            <Child key={index} />
-          ))}
+          {new Array(count).fill(true).map((_, index) => <Child key={index} />)}
         </div>
       );
       const Child = () => <div>Hi!</div>;
@@ -328,7 +318,7 @@ describe('Store (legacy)', () => {
     });
 
     it('should not filter DOM nodes from the store tree', () => {
-      const Grandparent = ({ flip }) => (
+      const Grandparent = ({flip}) => (
         <div>
           <div>
             <Parent flip={flip} />
@@ -337,7 +327,7 @@ describe('Store (legacy)', () => {
           <Nothing />
         </div>
       );
-      const Parent = ({ flip }) => (
+      const Parent = ({flip}) => (
         <div>
           {flip ? 'foo' : null}
           <Child />
@@ -350,7 +340,7 @@ describe('Store (legacy)', () => {
 
       const container = document.createElement('div');
       act(() =>
-        ReactDOM.render(<Grandparent count={4} flip={false} />, container)
+        ReactDOM.render(<Grandparent count={4} flip={false} />, container),
       );
       expect(store).toMatchSnapshot('1: mount');
 
@@ -361,7 +351,7 @@ describe('Store (legacy)', () => {
       expect(store).toMatchSnapshot('3: expand div');
 
       act(() =>
-        ReactDOM.render(<Grandparent count={4} flip={true} />, container)
+        ReactDOM.render(<Grandparent count={4} flip={true} />, container),
       );
       expect(store).toMatchSnapshot('4: final update');
 
@@ -370,17 +360,15 @@ describe('Store (legacy)', () => {
     });
 
     it('should support expanding parts of the tree', () => {
-      const Grandparent = ({ count }) => (
+      const Grandparent = ({count}) => (
         <div>
           <Parent count={count} />
           <Parent count={count} />
         </div>
       );
-      const Parent = ({ count }) => (
+      const Parent = ({count}) => (
         <div>
-          {new Array(count).fill(true).map((_, index) => (
-            <Child key={index} />
-          ))}
+          {new Array(count).fill(true).map((_, index) => <Child key={index} />)}
         </div>
       );
       const Child = () => <div>Hi!</div>;
@@ -388,8 +376,8 @@ describe('Store (legacy)', () => {
       act(() =>
         ReactDOM.render(
           <Grandparent count={2} />,
-          document.createElement('div')
-        )
+          document.createElement('div'),
+        ),
       );
       expect(store).toMatchSnapshot('1: mount');
 
@@ -422,10 +410,10 @@ describe('Store (legacy)', () => {
     });
 
     it('should support expanding deep parts of the tree', () => {
-      const Wrapper = ({ forwardedRef }) => (
+      const Wrapper = ({forwardedRef}) => (
         <Nested depth={3} forwardedRef={forwardedRef} />
       );
-      const Nested = ({ depth, forwardedRef }) =>
+      const Nested = ({depth, forwardedRef}) =>
         depth > 0 ? (
           <Nested depth={depth - 1} forwardedRef={forwardedRef} />
         ) : (
@@ -440,8 +428,8 @@ describe('Store (legacy)', () => {
       act(() =>
         ReactDOM.render(
           <Wrapper forwardedRef={refSetter} />,
-          document.createElement('div')
-        )
+          document.createElement('div'),
+        ),
       );
       expect(store).toMatchSnapshot('1: mount');
 
@@ -468,7 +456,7 @@ describe('Store (legacy)', () => {
     });
 
     it('should support reordering of children', () => {
-      const Root = ({ children }) => <div>{children}</div>;
+      const Root = ({children}) => <div>{children}</div>;
       const Component = () => <div />;
 
       const Foo = () => <div>{[<Component key="0" />]}</div>;
diff --git a/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js b/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js
index a596eb91bfcd0..abd9dd3b61bbe 100644
--- a/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js
@@ -1,8 +1,8 @@
 // @flow
 
 import typeof ReactTestRenderer from 'react-test-renderer';
-import type { Element } from 'react-devtools-shared/src/devtools/views/Components/types';
-import type { FrontendBridge } from 'react-devtools-shared/src/bridge';
+import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type Store from 'react-devtools-shared/src/devtools/store';
 
 describe('OwnersListContext', () => {
@@ -31,17 +31,19 @@ describe('OwnersListContext', () => {
     ReactDOM = require('react-dom');
     TestRenderer = utils.requireTestRenderer();
 
-    BridgeContext = require('react-devtools-shared/src/devtools/views/context').BridgeContext;
+    BridgeContext = require('react-devtools-shared/src/devtools/views/context')
+      .BridgeContext;
     OwnersListContext = require('react-devtools-shared/src/devtools/views/Components/OwnersListContext')
       .OwnersListContext;
     OwnersListContextController = require('react-devtools-shared/src/devtools/views/Components/OwnersListContext')
       .OwnersListContextController;
-    StoreContext = require('react-devtools-shared/src/devtools/views/context').StoreContext;
+    StoreContext = require('react-devtools-shared/src/devtools/views/context')
+      .StoreContext;
     TreeContextController = require('react-devtools-shared/src/devtools/views/Components/TreeContext')
       .TreeContextController;
   });
 
-  const Contexts = ({ children, defaultOwnerID = null }) => (
+  const Contexts = ({children, defaultOwnerID = null}) => (
     <BridgeContext.Provider value={bridge}>
       <StoreContext.Provider value={store}>
         <TreeContextController defaultOwnerID={defaultOwnerID}>
@@ -64,7 +66,7 @@ describe('OwnersListContext', () => {
     const Child = () => null;
 
     utils.act(() =>
-      ReactDOM.render(<Grandparent />, document.createElement('div'))
+      ReactDOM.render(<Grandparent />, document.createElement('div')),
     );
 
     expect(store).toMatchSnapshot('mount');
@@ -74,11 +76,11 @@ describe('OwnersListContext', () => {
 
     let didFinish = false;
 
-    function Suspender({ owner }) {
+    function Suspender({owner}) {
       const read = React.useContext(OwnersListContext);
       const owners = read(owner.id);
       expect(owners).toMatchSnapshot(
-        `owners for "${(owner && owner.displayName) || ''}"`
+        `owners for "${(owner && owner.displayName) || ''}"`,
       );
       didFinish = true;
       return null;
@@ -90,8 +92,8 @@ describe('OwnersListContext', () => {
           <React.Suspense fallback={null}>
             <Suspender owner={parent} />
           </React.Suspense>
-        </Contexts>
-      )
+        </Contexts>,
+      ),
     );
     expect(didFinish).toBe(true);
 
@@ -102,8 +104,8 @@ describe('OwnersListContext', () => {
           <React.Suspense fallback={null}>
             <Suspender owner={firstChild} />
           </React.Suspense>
-        </Contexts>
-      )
+        </Contexts>,
+      ),
     );
     expect(didFinish).toBe(true);
 
@@ -125,7 +127,7 @@ describe('OwnersListContext', () => {
     const Child = () => null;
 
     utils.act(() =>
-      ReactDOM.render(<Grandparent />, document.createElement('div'))
+      ReactDOM.render(<Grandparent />, document.createElement('div')),
     );
 
     expect(store).toMatchSnapshot('mount');
@@ -134,11 +136,11 @@ describe('OwnersListContext', () => {
 
     let didFinish = false;
 
-    function Suspender({ owner }) {
+    function Suspender({owner}) {
       const read = React.useContext(OwnersListContext);
       const owners = read(owner.id);
       expect(owners).toMatchSnapshot(
-        `owners for "${(owner && owner.displayName) || ''}"`
+        `owners for "${(owner && owner.displayName) || ''}"`,
       );
       didFinish = true;
       return null;
@@ -150,8 +152,8 @@ describe('OwnersListContext', () => {
           <React.Suspense fallback={null}>
             <Suspender owner={firstChild} />
           </React.Suspense>
-        </Contexts>
-      )
+        </Contexts>,
+      ),
     );
     expect(didFinish).toBe(true);
 
@@ -165,7 +167,7 @@ describe('OwnersListContext', () => {
     const Parent = () => null;
 
     utils.act(() =>
-      ReactDOM.render(<Grandparent />, document.createElement('div'))
+      ReactDOM.render(<Grandparent />, document.createElement('div')),
     );
 
     expect(store).toMatchSnapshot('mount');
@@ -174,11 +176,11 @@ describe('OwnersListContext', () => {
 
     let didFinish = false;
 
-    function Suspender({ owner }) {
+    function Suspender({owner}) {
       const read = React.useContext(OwnersListContext);
       const owners = read(owner.id);
       expect(owners).toMatchSnapshot(
-        `owners for "${(owner && owner.displayName) || ''}"`
+        `owners for "${(owner && owner.displayName) || ''}"`,
       );
       didFinish = true;
       return null;
@@ -190,8 +192,8 @@ describe('OwnersListContext', () => {
           <React.Suspense fallback={null}>
             <Suspender owner={grandparent} />
           </React.Suspense>
-        </Contexts>
-      )
+        </Contexts>,
+      ),
     );
     expect(didFinish).toBe(true);
 
diff --git a/packages/react-devtools-shared/src/__tests__/profilerContext-test.js b/packages/react-devtools-shared/src/__tests__/profilerContext-test.js
index 35695f7e36a42..342fd47f0c455 100644
--- a/packages/react-devtools-shared/src/__tests__/profilerContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilerContext-test.js
@@ -1,9 +1,9 @@
 // @flow
 
 import typeof ReactTestRenderer from 'react-test-renderer';
-import type { FrontendBridge } from 'react-devtools-shared/src/bridge';
-import type { Context } from 'react-devtools-shared/src/devtools/views/Profiler/ProfilerContext';
-import type { DispatcherContext } from 'react-devtools-shared/src/devtools/views/Components/TreeContext';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {Context} from 'react-devtools-shared/src/devtools/views/Profiler/ProfilerContext';
+import type {DispatcherContext} from 'react-devtools-shared/src/devtools/views/Components/TreeContext';
 import type Store from 'react-devtools-shared/src/devtools/store';
 
 describe('ProfilerContext', () => {
@@ -35,12 +35,14 @@ describe('ProfilerContext', () => {
     ReactDOM = require('react-dom');
     TestRenderer = utils.requireTestRenderer();
 
-    BridgeContext = require('react-devtools-shared/src/devtools/views/context').BridgeContext;
+    BridgeContext = require('react-devtools-shared/src/devtools/views/context')
+      .BridgeContext;
     ProfilerContext = require('react-devtools-shared/src/devtools/views/Profiler/ProfilerContext')
       .ProfilerContext;
     ProfilerContextController = require('react-devtools-shared/src/devtools/views/Profiler/ProfilerContext')
       .ProfilerContextController;
-    StoreContext = require('react-devtools-shared/src/devtools/views/context').StoreContext;
+    StoreContext = require('react-devtools-shared/src/devtools/views/context')
+      .StoreContext;
     TreeContextController = require('react-devtools-shared/src/devtools/views/Components/TreeContext')
       .TreeContextController;
     TreeDispatcherContext = require('react-devtools-shared/src/devtools/views/Components/TreeContext')
@@ -58,8 +60,7 @@ describe('ProfilerContext', () => {
       <StoreContext.Provider value={store}>
         <TreeContextController
           defaultSelectedElementID={defaultSelectedElementID}
-          defaultSelectedElementIndex={defaultSelectedElementIndex}
-        >
+          defaultSelectedElementIndex={defaultSelectedElementIndex}>
           <ProfilerContextController>{children}</ProfilerContextController>
         </TreeContextController>
       </StoreContext.Provider>
@@ -79,7 +80,7 @@ describe('ProfilerContext', () => {
       TestRenderer.create(
         <Contexts>
           <ContextReader />
-        </Contexts>
+        </Contexts>,
       );
     });
 
@@ -105,7 +106,7 @@ describe('ProfilerContext', () => {
     const Example = () => null;
 
     utils.act(() =>
-      ReactDOM.render(<Example />, document.createElement('div'))
+      ReactDOM.render(<Example />, document.createElement('div')),
     );
 
     let context: Context = ((null: any): Context);
@@ -121,7 +122,7 @@ describe('ProfilerContext', () => {
       TestRenderer.create(
         <Contexts>
           <ContextReader />
-        </Contexts>
+        </Contexts>,
       );
     });
     expect(context).not.toBeNull();
@@ -167,16 +168,15 @@ describe('ProfilerContext', () => {
       TestRenderer.create(
         <Contexts
           defaultSelectedElementID={store.getElementIDAtIndex(3)}
-          defaultSelectedElementIndex={3}
-        >
+          defaultSelectedElementIndex={3}>
           <ContextReader />
-        </Contexts>
-      )
+        </Contexts>,
+      ),
     );
 
     expect(context).not.toBeNull();
     expect(context.rootID).toBe(
-      store.getRootIDForElement(((store.getElementIDAtIndex(3): any): number))
+      store.getRootIDForElement(((store.getElementIDAtIndex(3): any): number)),
     );
 
     done();
@@ -208,17 +208,16 @@ describe('ProfilerContext', () => {
       TestRenderer.create(
         <Contexts
           defaultSelectedElementID={store.getElementIDAtIndex(3)}
-          defaultSelectedElementIndex={3}
-        >
+          defaultSelectedElementIndex={3}>
           <ContextReader />
-        </Contexts>
-      )
+        </Contexts>,
+      ),
     );
 
     // Verify the default profiling root is the first one.
     expect(context).not.toBeNull();
     expect(context.rootID).toBe(
-      store.getRootIDForElement(((store.getElementIDAtIndex(0): any): number))
+      store.getRootIDForElement(((store.getElementIDAtIndex(0): any): number)),
     );
 
     done();
@@ -257,8 +256,8 @@ describe('ProfilerContext', () => {
       TestRenderer.create(
         <Contexts defaultSelectedElementID={id} defaultSelectedElementIndex={3}>
           <ContextReader />
-        </Contexts>
-      )
+        </Contexts>,
+      ),
     );
 
     expect(selectedElementID).toBe(id);
@@ -272,7 +271,7 @@ describe('ProfilerContext', () => {
     const otherID = ((store.getElementIDAtIndex(0): any): number);
 
     // Change the selected element within a the Components tab.
-    utils.act(() => dispatch({ type: 'SELECT_ELEMENT_AT_INDEX', payload: 0 }));
+    utils.act(() => dispatch({type: 'SELECT_ELEMENT_AT_INDEX', payload: 0}));
 
     // Verify that the initial Profiler root selection is maintained.
     expect(selectedElementID).toBe(otherID);
@@ -283,15 +282,15 @@ describe('ProfilerContext', () => {
   });
 
   it('should sync selected element in the Components tab too, provided the element is a match', async done => {
-    const GrandParent = ({ includeChild }) => (
+    const GrandParent = ({includeChild}) => (
       <Parent includeChild={includeChild} />
     );
-    const Parent = ({ includeChild }) => (includeChild ? <Child /> : null);
+    const Parent = ({includeChild}) => (includeChild ? <Child /> : null);
     const Child = () => null;
 
     const container = document.createElement('div');
     utils.act(() =>
-      ReactDOM.render(<GrandParent includeChild={true} />, container)
+      ReactDOM.render(<GrandParent includeChild={true} />, container),
     );
     expect(store).toMatchSnapshot('mounted');
 
@@ -301,10 +300,10 @@ describe('ProfilerContext', () => {
     // Profile and record updates.
     await utils.actAsync(() => store.profilerStore.startProfiling());
     await utils.actAsync(() =>
-      ReactDOM.render(<GrandParent includeChild={true} />, container)
+      ReactDOM.render(<GrandParent includeChild={true} />, container),
     );
     await utils.actAsync(() =>
-      ReactDOM.render(<GrandParent includeChild={false} />, container)
+      ReactDOM.render(<GrandParent includeChild={false} />, container),
     );
     await utils.actAsync(() => store.profilerStore.stopProfiling());
 
@@ -322,8 +321,8 @@ describe('ProfilerContext', () => {
       TestRenderer.create(
         <Contexts>
           <ContextReader />
-        </Contexts>
-      )
+        </Contexts>,
+      ),
     );
     expect(selectedElementID).toBeNull();
 
@@ -340,7 +339,7 @@ describe('ProfilerContext', () => {
     expect(selectedElementID).toBe(parentID);
 
     expect(console.warn).toHaveBeenCalledWith(
-      `No element found with id "${childID}"`
+      `No element found with id "${childID}"`,
     );
 
     done();
diff --git a/packages/react-devtools-shared/src/__tests__/profilerStore-test.js b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
index 5f8e7c64c5d74..22b8150e2ffae 100644
--- a/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
@@ -21,7 +21,7 @@ describe('ProfilerStore', () => {
   });
 
   it('should not remove profiling data when roots are unmounted', async () => {
-    const Parent = ({ count }) =>
+    const Parent = ({count}) =>
       new Array(count)
         .fill(true)
         .map((_, index) => <Child key={index} duration={index} />);
@@ -66,7 +66,7 @@ describe('ProfilerStore', () => {
     expect(store.profilerStore.profilingData).not.toBe(fauxProfilingData);
     expect(console.warn).toHaveBeenCalledTimes(1);
     expect(console.warn).toHaveBeenCalledWith(
-      'Profiling data cannot be updated while profiling is in progress.'
+      'Profiling data cannot be updated while profiling is in progress.',
     );
     utils.act(() => store.profilerStore.stopProfiling());
     store.profilerStore.profilingData = fauxProfilingData;
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
index dca9fc64621d6..a98345fa54d86 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
@@ -1,7 +1,7 @@
 // @flow
 
 import typeof ReactTestRenderer from 'react-test-renderer';
-import type { FrontendBridge } from 'react-devtools-shared/src/bridge';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type Store from 'react-devtools-shared/src/devtools/store';
 
 describe('ProfilingCache', () => {
@@ -33,7 +33,7 @@ describe('ProfilingCache', () => {
   });
 
   it('should collect data for each root (including ones added or mounted after profiling started)', () => {
-    const Parent = ({ count }) => {
+    const Parent = ({count}) => {
       Scheduler.unstable_advanceTime(10);
       const children = new Array(count)
         .fill(true)
@@ -45,7 +45,7 @@ describe('ProfilingCache', () => {
         </React.Fragment>
       );
     };
-    const Child = ({ duration }) => {
+    const Child = ({duration}) => {
       Scheduler.unstable_advanceTime(duration);
       return null;
     };
@@ -67,13 +67,13 @@ describe('ProfilingCache', () => {
 
     let allProfilingDataForRoots = [];
 
-    function Validator({ previousProfilingDataForRoot, rootID }) {
+    function Validator({previousProfilingDataForRoot, rootID}) {
       const profilingDataForRoot = store.profilerStore.getDataForRoot(rootID);
       if (previousProfilingDataForRoot != null) {
         expect(profilingDataForRoot).toEqual(previousProfilingDataForRoot);
       } else {
         expect(profilingDataForRoot).toMatchSnapshot(
-          `Data for root ${profilingDataForRoot.displayName}`
+          `Data for root ${profilingDataForRoot.displayName}`,
         );
       }
       allProfilingDataForRoots.push(profilingDataForRoot);
@@ -94,8 +94,8 @@ describe('ProfilingCache', () => {
             <Validator
               previousProfilingDataForRoot={null}
               rootID={dataForRoot.rootID}
-            />
-          )
+            />,
+          ),
         );
       });
     }
@@ -110,14 +110,14 @@ describe('ProfilingCache', () => {
           <Validator
             previousProfilingDataForRoot={profilingDataForRoot}
             rootID={profilingDataForRoot.rootID}
-          />
-        )
+          />,
+        ),
       );
     });
   });
 
   it('should collect data for each commit', () => {
-    const Parent = ({ count }) => {
+    const Parent = ({count}) => {
       Scheduler.unstable_advanceTime(10);
       const children = new Array(count)
         .fill(true)
@@ -129,7 +129,7 @@ describe('ProfilingCache', () => {
         </React.Fragment>
       );
     };
-    const Child = ({ duration }) => {
+    const Child = ({duration}) => {
       Scheduler.unstable_advanceTime(duration);
       return null;
     };
@@ -146,14 +146,14 @@ describe('ProfilingCache', () => {
 
     const allCommitData = [];
 
-    function Validator({ commitIndex, previousCommitDetails, rootID }) {
+    function Validator({commitIndex, previousCommitDetails, rootID}) {
       const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
       if (previousCommitDetails != null) {
         expect(commitData).toEqual(previousCommitDetails);
       } else {
         allCommitData.push(commitData);
         expect(commitData).toMatchSnapshot(
-          `CommitDetails commitIndex: ${commitIndex}`
+          `CommitDetails commitIndex: ${commitIndex}`,
         );
       }
       return null;
@@ -168,7 +168,7 @@ describe('ProfilingCache', () => {
             commitIndex={commitIndex}
             previousCommitDetails={null}
             rootID={rootID}
-          />
+          />,
         );
       });
     }
@@ -184,7 +184,7 @@ describe('ProfilingCache', () => {
             commitIndex={commitIndex}
             previousCommitDetails={allCommitData[commitIndex]}
             rootID={rootID}
-          />
+          />,
         );
       });
     }
@@ -197,12 +197,12 @@ describe('ProfilingCache', () => {
 
     class LegacyContextProvider extends React.Component<
       any,
-      {| count: number |}
+      {|count: number|},
     > {
       static childContextTypes = {
         count: PropTypes.number,
       };
-      state = { count: 0 };
+      state = {count: 0};
       getChildContext() {
         return this.state;
       }
@@ -219,7 +219,7 @@ describe('ProfilingCache', () => {
       }
     }
 
-    const FunctionComponentWithHooks = ({ count }) => {
+    const FunctionComponentWithHooks = ({count}) => {
       React.useMemo(() => count, [count]);
       return null;
     };
@@ -245,26 +245,26 @@ describe('ProfilingCache', () => {
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() => ReactDOM.render(<LegacyContextProvider />, container));
     expect(instance).not.toBeNull();
-    utils.act(() => (instance: any).setState({ count: 1 }));
+    utils.act(() => (instance: any).setState({count: 1}));
     utils.act(() =>
-      ReactDOM.render(<LegacyContextProvider foo={123} />, container)
+      ReactDOM.render(<LegacyContextProvider foo={123} />, container),
     );
     utils.act(() =>
-      ReactDOM.render(<LegacyContextProvider bar="abc" />, container)
+      ReactDOM.render(<LegacyContextProvider bar="abc" />, container),
     );
     utils.act(() => ReactDOM.render(<LegacyContextProvider />, container));
     utils.act(() => store.profilerStore.stopProfiling());
 
     const allCommitData = [];
 
-    function Validator({ commitIndex, previousCommitDetails, rootID }) {
+    function Validator({commitIndex, previousCommitDetails, rootID}) {
       const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
       if (previousCommitDetails != null) {
         expect(commitData).toEqual(previousCommitDetails);
       } else {
         allCommitData.push(commitData);
         expect(commitData).toMatchSnapshot(
-          `CommitDetails commitIndex: ${commitIndex}`
+          `CommitDetails commitIndex: ${commitIndex}`,
         );
       }
       return null;
@@ -279,7 +279,7 @@ describe('ProfilingCache', () => {
             commitIndex={commitIndex}
             previousCommitDetails={null}
             rootID={rootID}
-          />
+          />,
         );
       });
     }
@@ -295,7 +295,7 @@ describe('ProfilingCache', () => {
             commitIndex={commitIndex}
             previousCommitDetails={allCommitData[commitIndex]}
             rootID={rootID}
-          />
+          />,
         );
       });
     }
@@ -324,16 +324,16 @@ describe('ProfilingCache', () => {
 
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() =>
-      ReactDOM.render(<Grandparent />, document.createElement('div'))
+      ReactDOM.render(<Grandparent />, document.createElement('div')),
     );
     utils.act(() => store.profilerStore.stopProfiling());
 
     let commitData = null;
 
-    function Validator({ commitIndex, rootID }) {
+    function Validator({commitIndex, rootID}) {
       commitData = store.profilerStore.getCommitData(rootID, commitIndex);
       expect(commitData).toMatchSnapshot(
-        `CommitDetails with filtered self durations`
+        `CommitDetails with filtered self durations`,
       );
       return null;
     }
@@ -380,17 +380,17 @@ describe('ProfilingCache', () => {
 
     utils.act(() => store.profilerStore.startProfiling());
     await utils.actAsync(() =>
-      ReactDOM.render(<Parent />, document.createElement('div'))
+      ReactDOM.render(<Parent />, document.createElement('div')),
     );
     utils.act(() => store.profilerStore.stopProfiling());
 
     const allCommitData = [];
 
-    function Validator({ commitIndex, rootID }) {
+    function Validator({commitIndex, rootID}) {
       const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
       allCommitData.push(commitData);
       expect(commitData).toMatchSnapshot(
-        `CommitDetails with filtered self durations`
+        `CommitDetails with filtered self durations`,
       );
       return null;
     }
@@ -400,7 +400,7 @@ describe('ProfilingCache', () => {
     for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
       utils.act(() => {
         TestRenderer.create(
-          <Validator commitIndex={commitIndex} rootID={rootID} />
+          <Validator commitIndex={commitIndex} rootID={rootID} />,
         );
       });
     }
@@ -411,7 +411,7 @@ describe('ProfilingCache', () => {
   });
 
   it('should collect data for each rendered fiber', () => {
-    const Parent = ({ count }) => {
+    const Parent = ({count}) => {
       Scheduler.unstable_advanceTime(10);
       const children = new Array(count)
         .fill(true)
@@ -423,7 +423,7 @@ describe('ProfilingCache', () => {
         </React.Fragment>
       );
     };
-    const Child = ({ duration }) => {
+    const Child = ({duration}) => {
       Scheduler.unstable_advanceTime(duration);
       return null;
     };
@@ -439,7 +439,7 @@ describe('ProfilingCache', () => {
 
     const allFiberCommits = [];
 
-    function Validator({ fiberID, previousFiberCommits, rootID }) {
+    function Validator({fiberID, previousFiberCommits, rootID}) {
       const fiberCommits = store.profilerStore.profilingCache.getFiberCommits({
         fiberID,
         rootID,
@@ -449,7 +449,7 @@ describe('ProfilingCache', () => {
       } else {
         allFiberCommits.push(fiberCommits);
         expect(fiberCommits).toMatchSnapshot(
-          `FiberCommits: element ${fiberID}`
+          `FiberCommits: element ${fiberID}`,
         );
       }
       return null;
@@ -468,7 +468,7 @@ describe('ProfilingCache', () => {
             fiberID={fiberID}
             previousFiberCommits={null}
             rootID={rootID}
-          />
+          />,
         );
       });
     }
@@ -488,14 +488,14 @@ describe('ProfilingCache', () => {
             fiberID={fiberID}
             previousFiberCommits={allFiberCommits[index]}
             rootID={rootID}
-          />
+          />,
         );
       });
     }
   });
 
   it('should report every traced interaction', () => {
-    const Parent = ({ count }) => {
+    const Parent = ({count}) => {
       Scheduler.unstable_advanceTime(10);
       const children = new Array(count)
         .fill(true)
@@ -507,7 +507,7 @@ describe('ProfilingCache', () => {
         </React.Fragment>
       );
     };
-    const Child = ({ duration }) => {
+    const Child = ({duration}) => {
       Scheduler.unstable_advanceTime(duration);
       return null;
     };
@@ -520,25 +520,25 @@ describe('ProfilingCache', () => {
       SchedulerTracing.unstable_trace(
         'mount: one child',
         Scheduler.unstable_now(),
-        () => ReactDOM.render(<Parent count={1} />, container)
-      )
+        () => ReactDOM.render(<Parent count={1} />, container),
+      ),
     );
     utils.act(() =>
       SchedulerTracing.unstable_trace(
         'update: two children',
         Scheduler.unstable_now(),
-        () => ReactDOM.render(<Parent count={2} />, container)
-      )
+        () => ReactDOM.render(<Parent count={2} />, container),
+      ),
     );
     utils.act(() => store.profilerStore.stopProfiling());
 
     let interactions = null;
 
-    function Validator({ previousInteractions, rootID }) {
+    function Validator({previousInteractions, rootID}) {
       interactions = store.profilerStore.profilingCache.getInteractionsChartData(
         {
           rootID,
-        }
+        },
       ).interactions;
       if (previousInteractions != null) {
         expect(interactions).toEqual(previousInteractions);
@@ -552,8 +552,8 @@ describe('ProfilingCache', () => {
 
     utils.act(() =>
       TestRenderer.create(
-        <Validator previousInteractions={null} rootID={rootID} />
-      )
+        <Validator previousInteractions={null} rootID={rootID} />,
+      ),
     );
 
     expect(interactions).not.toBeNull();
@@ -562,8 +562,8 @@ describe('ProfilingCache', () => {
 
     utils.act(() =>
       TestRenderer.create(
-        <Validator previousInteractions={interactions} rootID={rootID} />
-      )
+        <Validator previousInteractions={interactions} rootID={rootID} />,
+      ),
     );
   });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
index acf6bc90137b0..bc135c5a18c64 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
@@ -41,7 +41,7 @@ describe('profiling charts', () => {
       };
 
       // Memoize children to verify that chart doesn't include in the update.
-      const Child = React.memo(function Child({ duration }) {
+      const Child = React.memo(function Child({duration}) {
         Scheduler.unstable_advanceTime(duration);
         return null;
       });
@@ -51,21 +51,21 @@ describe('profiling charts', () => {
       utils.act(() => store.profilerStore.startProfiling());
       utils.act(() =>
         SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>
-          ReactDOM.render(<Parent />, container)
-        )
+          ReactDOM.render(<Parent />, container),
+        ),
       );
       utils.act(() =>
         SchedulerTracing.unstable_trace(
           'update',
           Scheduler.unstable_now(),
-          () => ReactDOM.render(<Parent />, container)
-        )
+          () => ReactDOM.render(<Parent />, container),
+        ),
       );
       utils.act(() => store.profilerStore.stopProfiling());
 
       let renderFinished = false;
 
-      function Validator({ commitIndex, rootID }) {
+      function Validator({commitIndex, rootID}) {
         const commitTree = store.profilerStore.profilingCache.getCommitTree({
           commitIndex,
           rootID,
@@ -75,11 +75,11 @@ describe('profiling charts', () => {
             commitIndex,
             commitTree,
             rootID,
-          }
+          },
         );
         expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
         expect(chartData).toMatchSnapshot(
-          `${commitIndex}: FlamegraphChartData`
+          `${commitIndex}: FlamegraphChartData`,
         );
         renderFinished = true;
         return null;
@@ -92,7 +92,7 @@ describe('profiling charts', () => {
 
         utils.act(() => {
           TestRenderer.create(
-            <Validator commitIndex={commitIndex} rootID={rootID} />
+            <Validator commitIndex={commitIndex} rootID={rootID} />,
           );
         });
 
@@ -117,7 +117,7 @@ describe('profiling charts', () => {
       };
 
       // Memoize children to verify that chart doesn't include in the update.
-      const Child = React.memo(function Child({ duration }) {
+      const Child = React.memo(function Child({duration}) {
         Scheduler.unstable_advanceTime(duration);
         return null;
       });
@@ -127,21 +127,21 @@ describe('profiling charts', () => {
       utils.act(() => store.profilerStore.startProfiling());
       utils.act(() =>
         SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>
-          ReactDOM.render(<Parent />, container)
-        )
+          ReactDOM.render(<Parent />, container),
+        ),
       );
       utils.act(() =>
         SchedulerTracing.unstable_trace(
           'update',
           Scheduler.unstable_now(),
-          () => ReactDOM.render(<Parent />, container)
-        )
+          () => ReactDOM.render(<Parent />, container),
+        ),
       );
       utils.act(() => store.profilerStore.stopProfiling());
 
       let renderFinished = false;
 
-      function Validator({ commitIndex, rootID }) {
+      function Validator({commitIndex, rootID}) {
         const commitTree = store.profilerStore.profilingCache.getCommitTree({
           commitIndex,
           rootID,
@@ -151,7 +151,7 @@ describe('profiling charts', () => {
             commitIndex,
             commitTree,
             rootID,
-          }
+          },
         );
         expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
         expect(chartData).toMatchSnapshot(`${commitIndex}: RankedChartData`);
@@ -166,7 +166,7 @@ describe('profiling charts', () => {
 
         utils.act(() => {
           TestRenderer.create(
-            <Validator commitIndex={commitIndex} rootID={rootID} />
+            <Validator commitIndex={commitIndex} rootID={rootID} />,
           );
         });
 
@@ -189,7 +189,7 @@ describe('profiling charts', () => {
       };
 
       // Memoize children to verify that chart doesn't include in the update.
-      const Child = React.memo(function Child({ duration }) {
+      const Child = React.memo(function Child({duration}) {
         Scheduler.unstable_advanceTime(duration);
         return null;
       });
@@ -199,25 +199,25 @@ describe('profiling charts', () => {
       utils.act(() => store.profilerStore.startProfiling());
       utils.act(() =>
         SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>
-          ReactDOM.render(<Parent />, container)
-        )
+          ReactDOM.render(<Parent />, container),
+        ),
       );
       utils.act(() =>
         SchedulerTracing.unstable_trace(
           'update',
           Scheduler.unstable_now(),
-          () => ReactDOM.render(<Parent />, container)
-        )
+          () => ReactDOM.render(<Parent />, container),
+        ),
       );
       utils.act(() => store.profilerStore.stopProfiling());
 
       let renderFinished = false;
 
-      function Validator({ commitIndex, rootID }) {
+      function Validator({commitIndex, rootID}) {
         const chartData = store.profilerStore.profilingCache.getInteractionsChartData(
           {
             rootID,
-          }
+          },
         );
         expect(chartData).toMatchSnapshot('Interactions');
         renderFinished = true;
@@ -231,7 +231,7 @@ describe('profiling charts', () => {
 
         utils.act(() => {
           TestRenderer.create(
-            <Validator commitIndex={commitIndex} rootID={rootID} />
+            <Validator commitIndex={commitIndex} rootID={rootID} />,
           );
         });
 
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
index 79084dfef295a..2665434972b6f 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
@@ -26,7 +26,7 @@ describe('commit tree', () => {
   });
 
   it('should be able to rebuild the store tree for each commit', () => {
-    const Parent = ({ count }) => {
+    const Parent = ({count}) => {
       Scheduler.unstable_advanceTime(10);
       return new Array(count)
         .fill(true)
@@ -48,7 +48,7 @@ describe('commit tree', () => {
 
     let renderFinished = false;
 
-    function Validator({ commitIndex, rootID }) {
+    function Validator({commitIndex, rootID}) {
       const commitTree = store.profilerStore.profilingCache.getCommitTree({
         commitIndex,
         rootID,
@@ -65,7 +65,7 @@ describe('commit tree', () => {
 
       utils.act(() => {
         TestRenderer.create(
-          <Validator commitIndex={commitIndex} rootID={rootID} />
+          <Validator commitIndex={commitIndex} rootID={rootID} />,
         );
       });
 
diff --git a/packages/react-devtools-shared/src/__tests__/profilingUtils-test.js b/packages/react-devtools-shared/src/__tests__/profilingUtils-test.js
index 81d76f65bc6d5..0bf4bcf7b8e08 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingUtils-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingUtils-test.js
@@ -13,8 +13,8 @@ describe('profiling utils', () => {
         ({
           version: 0,
           dataForRoots: [],
-        }: any)
-      )
+        }: any),
+      ),
     ).toThrow('Unsupported profiler export version "0"');
   });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/setupTests.js b/packages/react-devtools-shared/src/__tests__/setupTests.js
index df9eb4ae0ca5a..f228001ce56bb 100644
--- a/packages/react-devtools-shared/src/__tests__/setupTests.js
+++ b/packages/react-devtools-shared/src/__tests__/setupTests.js
@@ -1,6 +1,9 @@
 // @flow
 
-import type { BackendBridge, FrontendBridge } from 'react-devtools-shared/src/bridge';
+import type {
+  BackendBridge,
+  FrontendBridge,
+} from 'react-devtools-shared/src/bridge';
 
 const env = jasmine.getEnv();
 env.beforeEach(() => {
@@ -9,10 +12,10 @@ env.beforeEach(() => {
   // That's because we reset modules between tests,
   // which disconnects the DevTool's cache from the current dispatcher ref.
   const Agent = require('react-devtools-shared/src/backend/agent').default;
-  const { initBackend } = require('react-devtools-shared/src/backend');
+  const {initBackend} = require('react-devtools-shared/src/backend');
   const Bridge = require('react-devtools-shared/src/bridge').default;
   const Store = require('react-devtools-shared/src/devtools/store').default;
-  const { installHook } = require('react-devtools-shared/src/hook');
+  const {installHook} = require('react-devtools-shared/src/hook');
   const {
     getDefaultComponentFilters,
     saveComponentFilters,
@@ -49,7 +52,7 @@ env.beforeEach(() => {
       };
     },
     send(event: string, payload: any, transferable?: Array<any>) {
-      bridgeListeners.forEach(callback => callback({ event, payload }));
+      bridgeListeners.forEach(callback => callback({event, payload}));
     },
   });
 
diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index 7c273a7c3158f..fdcc128494ff0 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -24,7 +24,7 @@ describe('Store', () => {
     const Component = () => <div>Hi</div>;
 
     act(() =>
-      ReactDOM.render(<Component count={4} />, document.createElement('div'))
+      ReactDOM.render(<Component count={4} />, document.createElement('div')),
     );
     expect(store).toMatchSnapshot('1: mount');
 
@@ -33,12 +33,12 @@ describe('Store', () => {
     const rootID = store.roots[0];
 
     expect(() => store.toggleIsCollapsed(rootID, true)).toThrow(
-      'Root nodes cannot be collapsed'
+      'Root nodes cannot be collapsed',
     );
   });
 
   it('should properly handle a root with no visible nodes', () => {
-    const Root = ({ children }) => children;
+    const Root = ({children}) => children;
 
     const container = document.createElement('div');
 
@@ -55,13 +55,13 @@ describe('Store', () => {
     });
 
     it('should support mount and update operations', () => {
-      const Grandparent = ({ count }) => (
+      const Grandparent = ({count}) => (
         <React.Fragment>
           <Parent count={count} />
           <Parent count={count} />
         </React.Fragment>
       );
-      const Parent = ({ count }) =>
+      const Parent = ({count}) =>
         new Array(count).fill(true).map((_, index) => <Child key={index} />);
       const Child = () => <div>Hi!</div>;
 
@@ -78,7 +78,7 @@ describe('Store', () => {
     });
 
     it('should support mount and update operations for multiple roots', () => {
-      const Parent = ({ count }) =>
+      const Parent = ({count}) =>
         new Array(count).fill(true).map((_, index) => <Child key={index} />);
       const Child = () => <div>Hi!</div>;
 
@@ -123,8 +123,8 @@ describe('Store', () => {
       act(() =>
         ReactDOM.render(
           <Grandparent count={4} />,
-          document.createElement('div')
-        )
+          document.createElement('div'),
+        ),
       );
       expect(store).toMatchSnapshot('1: mount');
     });
@@ -137,7 +137,7 @@ describe('Store', () => {
       const Component = () => {
         return <div>Hello</div>;
       };
-      const Wrapper = ({ shouldSuspense }) => (
+      const Wrapper = ({shouldSuspense}) => (
         <React.Fragment>
           <Component key="Outside" />
           <React.Suspense fallback={<Loading />}>
@@ -207,8 +207,8 @@ describe('Store', () => {
             suspendFirst={false}
             suspendSecond={false}
           />,
-          container
-        )
+          container,
+        ),
       );
       expect(store).toMatchSnapshot('1: third child is suspended');
       act(() =>
@@ -218,8 +218,8 @@ describe('Store', () => {
             suspendFirst={true}
             suspendSecond={false}
           />,
-          container
-        )
+          container,
+        ),
       );
       expect(store).toMatchSnapshot('2: first and third child are suspended');
       act(() =>
@@ -229,8 +229,8 @@ describe('Store', () => {
             suspendFirst={false}
             suspendSecond={true}
           />,
-          container
-        )
+          container,
+        ),
       );
       expect(store).toMatchSnapshot('3: second and third child are suspended');
       act(() =>
@@ -240,8 +240,8 @@ describe('Store', () => {
             suspendFirst={true}
             suspendSecond={false}
           />,
-          container
-        )
+          container,
+        ),
       );
       expect(store).toMatchSnapshot('4: first and third child are suspended');
       act(() =>
@@ -251,8 +251,8 @@ describe('Store', () => {
             suspendFirst={true}
             suspendSecond={false}
           />,
-          container
-        )
+          container,
+        ),
       );
       expect(store).toMatchSnapshot('5: parent is suspended');
       act(() =>
@@ -262,8 +262,8 @@ describe('Store', () => {
             suspendFirst={true}
             suspendSecond={true}
           />,
-          container
-        )
+          container,
+        ),
       );
       expect(store).toMatchSnapshot('6: all children are suspended');
       act(() =>
@@ -273,8 +273,8 @@ describe('Store', () => {
             suspendFirst={false}
             suspendSecond={false}
           />,
-          container
-        )
+          container,
+        ),
       );
       expect(store).toMatchSnapshot('7: only third child is suspended');
 
@@ -284,7 +284,7 @@ describe('Store', () => {
           id: store.getElementIDAtIndex(4),
           rendererID,
           forceFallback: true,
-        })
+        }),
       );
       expect(store).toMatchSnapshot('8: first and third child are suspended');
       act(() =>
@@ -292,7 +292,7 @@ describe('Store', () => {
           id: store.getElementIDAtIndex(2),
           rendererID,
           forceFallback: true,
-        })
+        }),
       );
       expect(store).toMatchSnapshot('9: parent is suspended');
       act(() =>
@@ -302,8 +302,8 @@ describe('Store', () => {
             suspendFirst={true}
             suspendSecond={true}
           />,
-          container
-        )
+          container,
+        ),
       );
       expect(store).toMatchSnapshot('10: parent is suspended');
       act(() =>
@@ -311,7 +311,7 @@ describe('Store', () => {
           id: store.getElementIDAtIndex(2),
           rendererID,
           forceFallback: false,
-        })
+        }),
       );
       expect(store).toMatchSnapshot('11: all children are suspended');
       act(() =>
@@ -319,7 +319,7 @@ describe('Store', () => {
           id: store.getElementIDAtIndex(4),
           rendererID,
           forceFallback: false,
-        })
+        }),
       );
       expect(store).toMatchSnapshot('12: all children are suspended');
       act(() =>
@@ -329,28 +329,28 @@ describe('Store', () => {
             suspendFirst={false}
             suspendSecond={false}
           />,
-          container
-        )
+          container,
+        ),
       );
       expect(store).toMatchSnapshot('13: third child is suspended');
     });
 
     it('should support collapsing parts of the tree', () => {
-      const Grandparent = ({ count }) => (
+      const Grandparent = ({count}) => (
         <React.Fragment>
           <Parent count={count} />
           <Parent count={count} />
         </React.Fragment>
       );
-      const Parent = ({ count }) =>
+      const Parent = ({count}) =>
         new Array(count).fill(true).map((_, index) => <Child key={index} />);
       const Child = () => <div>Hi!</div>;
 
       act(() =>
         ReactDOM.render(
           <Grandparent count={2} />,
-          document.createElement('div')
-        )
+          document.createElement('div'),
+        ),
       );
       expect(store).toMatchSnapshot('1: mount');
 
@@ -375,7 +375,7 @@ describe('Store', () => {
     });
 
     it('should support reordering of children', () => {
-      const Root = ({ children }) => children;
+      const Root = ({children}) => children;
       const Component = () => null;
 
       const Foo = () => [<Component key="0" />];
@@ -405,7 +405,7 @@ describe('Store', () => {
     });
 
     it('should support mount and update operations', () => {
-      const Parent = ({ count }) =>
+      const Parent = ({count}) =>
         new Array(count).fill(true).map((_, index) => <Child key={index} />);
       const Child = () => <div>Hi!</div>;
 
@@ -417,8 +417,8 @@ describe('Store', () => {
             <Parent count={1} />
             <Parent count={3} />
           </React.Fragment>,
-          container
-        )
+          container,
+        ),
       );
       expect(store).toMatchSnapshot('1: mount');
 
@@ -428,8 +428,8 @@ describe('Store', () => {
             <Parent count={2} />
             <Parent count={1} />
           </React.Fragment>,
-          container
-        )
+          container,
+        ),
       );
       expect(store).toMatchSnapshot('2: update');
 
@@ -438,7 +438,7 @@ describe('Store', () => {
     });
 
     it('should support mount and update operations for multiple roots', () => {
-      const Parent = ({ count }) =>
+      const Parent = ({count}) =>
         new Array(count).fill(true).map((_, index) => <Child key={index} />);
       const Child = () => <div>Hi!</div>;
 
@@ -483,8 +483,8 @@ describe('Store', () => {
       act(() =>
         ReactDOM.render(
           <Grandparent count={4} />,
-          document.createElement('div')
-        )
+          document.createElement('div'),
+        ),
       );
       expect(store).toMatchSnapshot('1: mount');
 
@@ -503,7 +503,7 @@ describe('Store', () => {
       const Component = () => {
         return <div>Hello</div>;
       };
-      const Wrapper = ({ shouldSuspense }) => (
+      const Wrapper = ({shouldSuspense}) => (
         <React.Fragment>
           <Component key="Outside" />
           <React.Suspense fallback={<Loading />}>
@@ -532,21 +532,21 @@ describe('Store', () => {
     });
 
     it('should support expanding parts of the tree', () => {
-      const Grandparent = ({ count }) => (
+      const Grandparent = ({count}) => (
         <React.Fragment>
           <Parent count={count} />
           <Parent count={count} />
         </React.Fragment>
       );
-      const Parent = ({ count }) =>
+      const Parent = ({count}) =>
         new Array(count).fill(true).map((_, index) => <Child key={index} />);
       const Child = () => <div>Hi!</div>;
 
       act(() =>
         ReactDOM.render(
           <Grandparent count={2} />,
-          document.createElement('div')
-        )
+          document.createElement('div'),
+        ),
       );
       expect(store).toMatchSnapshot('1: mount');
 
@@ -575,10 +575,10 @@ describe('Store', () => {
     });
 
     it('should support expanding deep parts of the tree', () => {
-      const Wrapper = ({ forwardedRef }) => (
+      const Wrapper = ({forwardedRef}) => (
         <Nested depth={3} forwardedRef={forwardedRef} />
       );
-      const Nested = ({ depth, forwardedRef }) =>
+      const Nested = ({depth, forwardedRef}) =>
         depth > 0 ? (
           <Nested depth={depth - 1} forwardedRef={forwardedRef} />
         ) : (
@@ -590,8 +590,8 @@ describe('Store', () => {
       act(() =>
         ReactDOM.render(
           <Wrapper forwardedRef={ref} />,
-          document.createElement('div')
-        )
+          document.createElement('div'),
+        ),
       );
       expect(store).toMatchSnapshot('1: mount');
 
@@ -618,7 +618,7 @@ describe('Store', () => {
     });
 
     it('should support reordering of children', () => {
-      const Root = ({ children }) => children;
+      const Root = ({children}) => children;
       const Component = () => null;
 
       const Foo = () => [<Component key="0" />];
@@ -661,7 +661,7 @@ describe('Store', () => {
       const Child = () => null;
 
       act(() =>
-        ReactDOM.render(<SuspenseTree />, document.createElement('div'))
+        ReactDOM.render(<SuspenseTree />, document.createElement('div')),
       );
       expect(store).toMatchSnapshot('1: mount');
 
@@ -677,7 +677,7 @@ describe('Store', () => {
           id: suspenseID,
           rendererID,
           forceFallback: true,
-        })
+        }),
       );
       expect(store).toMatchSnapshot('3: toggle fallback on');
 
@@ -686,7 +686,7 @@ describe('Store', () => {
           id: suspenseID,
           rendererID,
           forceFallback: false,
-        })
+        }),
       );
       expect(store).toMatchSnapshot('4: toggle fallback on');
     });
@@ -708,7 +708,7 @@ describe('Store', () => {
       const Child = () => null;
 
       act(() =>
-        ReactDOM.render(<Grandparent />, document.createElement('div'))
+        ReactDOM.render(<Grandparent />, document.createElement('div')),
       );
 
       for (let i = 0; i < store.numElements; i++) {
@@ -742,8 +742,8 @@ describe('Store', () => {
             <Grandparent />
             <Grandparent />
           </React.Fragment>,
-          document.createElement('div')
-        )
+          document.createElement('div'),
+        ),
       );
 
       for (let i = 0; i < store.numElements; i++) {
@@ -762,14 +762,14 @@ describe('Store', () => {
             <Grandparent />
             <Grandparent />
           </React.Fragment>,
-          document.createElement('div')
+          document.createElement('div'),
         );
         ReactDOM.render(
           <React.Fragment>
             <Grandparent />
             <Grandparent />
           </React.Fragment>,
-          document.createElement('div')
+          document.createElement('div'),
         );
       });
 
diff --git a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
index 11f54ad30137f..a5dcfdb5a32db 100644
--- a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
@@ -1,6 +1,6 @@
 // @flow
 
-import type { FrontendBridge } from 'react-devtools-shared/src/bridge';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type Store from 'react-devtools-shared/src/devtools/store';
 
 describe('Store component filters', () => {
@@ -36,12 +36,12 @@ describe('Store component filters', () => {
   it('should throw if filters are updated while profiling', () => {
     act(() => store.profilerStore.startProfiling());
     expect(() => (store.componentFilters = [])).toThrow(
-      'Cannot modify filter preferences while profiling'
+      'Cannot modify filter preferences while profiling',
     );
   });
 
   it('should support filtering by element type', () => {
-    class Root extends React.Component<{| children: React$Node |}> {
+    class Root extends React.Component<{|children: React$Node|}> {
       render() {
         return <div>{this.props.children}</div>;
       }
@@ -53,8 +53,8 @@ describe('Store component filters', () => {
         <Root>
           <Component />
         </Root>,
-        document.createElement('div')
-      )
+        document.createElement('div'),
+      ),
     );
     expect(store).toMatchSnapshot('1: mount');
 
@@ -62,7 +62,7 @@ describe('Store component filters', () => {
       () =>
         (store.componentFilters = [
           utils.createElementTypeFilter(Types.ElementTypeHostComponent),
-        ])
+        ]),
     );
 
     expect(store).toMatchSnapshot('2: hide host components');
@@ -71,7 +71,7 @@ describe('Store component filters', () => {
       () =>
         (store.componentFilters = [
           utils.createElementTypeFilter(Types.ElementTypeClass),
-        ])
+        ]),
     );
 
     expect(store).toMatchSnapshot('3: hide class components');
@@ -81,7 +81,7 @@ describe('Store component filters', () => {
         (store.componentFilters = [
           utils.createElementTypeFilter(Types.ElementTypeClass),
           utils.createElementTypeFilter(Types.ElementTypeFunction),
-        ])
+        ]),
     );
 
     expect(store).toMatchSnapshot('4: hide class and function components');
@@ -91,7 +91,7 @@ describe('Store component filters', () => {
         (store.componentFilters = [
           utils.createElementTypeFilter(Types.ElementTypeClass, false),
           utils.createElementTypeFilter(Types.ElementTypeFunction, false),
-        ])
+        ]),
     );
 
     expect(store).toMatchSnapshot('5: disable all filters');
@@ -107,14 +107,14 @@ describe('Store component filters', () => {
       () =>
         (store.componentFilters = [
           utils.createElementTypeFilter(Types.ElementTypeRoot),
-        ])
+        ]),
     );
 
     expect(store).toMatchSnapshot('2: add invalid filter');
   });
 
   it('should filter by display name', () => {
-    const Text = ({ label }) => label;
+    const Text = ({label}) => label;
     const Foo = () => <Text label="foo" />;
     const Bar = () => <Text label="bar" />;
     const Baz = () => <Text label="baz" />;
@@ -126,13 +126,13 @@ describe('Store component filters', () => {
           <Bar />
           <Baz />
         </React.Fragment>,
-        document.createElement('div')
-      )
+        document.createElement('div'),
+      ),
     );
     expect(store).toMatchSnapshot('1: mount');
 
     act(
-      () => (store.componentFilters = [utils.createDisplayNameFilter('Foo')])
+      () => (store.componentFilters = [utils.createDisplayNameFilter('Foo')]),
     );
     expect(store).toMatchSnapshot('2: filter "Foo"');
 
@@ -140,7 +140,7 @@ describe('Store component filters', () => {
     expect(store).toMatchSnapshot('3: filter "Ba"');
 
     act(
-      () => (store.componentFilters = [utils.createDisplayNameFilter('B.z')])
+      () => (store.componentFilters = [utils.createDisplayNameFilter('B.z')]),
     );
     expect(store).toMatchSnapshot('4: filter "B.z"');
   });
@@ -155,18 +155,18 @@ describe('Store component filters', () => {
       () =>
         (store.componentFilters = [
           utils.createLocationFilter(__filename.replace(__dirname, '')),
-        ])
+        ]),
     );
 
     expect(store).toMatchSnapshot(
-      '2: hide all components declared within this test filed'
+      '2: hide all components declared within this test filed',
     );
 
     act(
       () =>
         (store.componentFilters = [
           utils.createLocationFilter('this:is:a:made:up:path'),
-        ])
+        ]),
     );
 
     expect(store).toMatchSnapshot('3: hide components in a made up fake path');
@@ -203,21 +203,21 @@ describe('Store component filters', () => {
         (store.componentFilters = [
           utils.createHOCFilter(false),
           utils.createHOCFilter(true),
-        ])
+        ]),
     );
     act(
       () =>
         (store.componentFilters = [
           utils.createHOCFilter(true),
           utils.createLocationFilter('abc', false),
-        ])
+        ]),
     );
     act(
       () =>
         (store.componentFilters = [
           utils.createHOCFilter(true),
           utils.createElementTypeFilter(Types.ElementTypeHostComponent, false),
-        ])
+        ]),
     );
   });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/storeOwners-test.js b/packages/react-devtools-shared/src/__tests__/storeOwners-test.js
index 51788f9462dc6..0af23c35c813b 100644
--- a/packages/react-devtools-shared/src/__tests__/storeOwners-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeOwners-test.js
@@ -1,6 +1,6 @@
 // @flow
 
-const { printOwnersList } = require('../devtools/utils');
+const {printOwnersList} = require('../devtools/utils');
 
 describe('Store owners list', () => {
   let React;
@@ -25,21 +25,21 @@ describe('Store owners list', () => {
         </div>
       </Intermediate>
     );
-    const Wrapper = ({ children }) => children;
+    const Wrapper = ({children}) => children;
     const Leaf = () => <div>Leaf</div>;
-    const Intermediate = ({ children }) => <Wrapper>{children}</Wrapper>;
+    const Intermediate = ({children}) => <Wrapper>{children}</Wrapper>;
 
     act(() => ReactDOM.render(<Root />, document.createElement('div')));
     expect(store).toMatchSnapshot('1: mount');
 
     const rootID = store.getElementIDAtIndex(0);
     expect(
-      printOwnersList(store.getOwnersListForElement(rootID))
+      printOwnersList(store.getOwnersListForElement(rootID)),
     ).toMatchSnapshot('2: components owned by <Root>');
 
     const intermediateID = store.getElementIDAtIndex(1);
     expect(
-      printOwnersList(store.getOwnersListForElement(intermediateID))
+      printOwnersList(store.getOwnersListForElement(intermediateID)),
     ).toMatchSnapshot('3: components owned by <Intermediate>');
   });
 
@@ -50,9 +50,9 @@ describe('Store owners list', () => {
       </Intermediate>,
       <Leaf key="leaf" />,
     ];
-    const Wrapper = ({ children }) => children;
+    const Wrapper = ({children}) => children;
     const Leaf = () => <div>Leaf</div>;
-    const Intermediate = ({ children }) => [
+    const Intermediate = ({children}) => [
       <Leaf key="leaf" />,
       <Wrapper key="wrapper">{children}</Wrapper>,
     ];
@@ -62,17 +62,17 @@ describe('Store owners list', () => {
 
     const rootID = store.getElementIDAtIndex(0);
     expect(
-      printOwnersList(store.getOwnersListForElement(rootID))
+      printOwnersList(store.getOwnersListForElement(rootID)),
     ).toMatchSnapshot('2: components owned by <Root>');
 
     const intermediateID = store.getElementIDAtIndex(1);
     expect(
-      printOwnersList(store.getOwnersListForElement(intermediateID))
+      printOwnersList(store.getOwnersListForElement(intermediateID)),
     ).toMatchSnapshot('3: components owned by <Intermediate>');
   });
 
   it('should show the proper owners list order and contents after insertions and deletions', () => {
-    const Root = ({ includeDirect, includeIndirect }) => (
+    const Root = ({includeDirect, includeIndirect}) => (
       <div>
         {includeDirect ? <Leaf /> : null}
         {includeIndirect ? (
@@ -82,64 +82,64 @@ describe('Store owners list', () => {
         ) : null}
       </div>
     );
-    const Wrapper = ({ children }) => children;
+    const Wrapper = ({children}) => children;
     const Leaf = () => <div>Leaf</div>;
-    const Intermediate = ({ children }) => <Wrapper>{children}</Wrapper>;
+    const Intermediate = ({children}) => <Wrapper>{children}</Wrapper>;
 
     const container = document.createElement('div');
 
     act(() =>
       ReactDOM.render(
         <Root includeDirect={false} includeIndirect={true} />,
-        container
-      )
+        container,
+      ),
     );
     expect(store).toMatchSnapshot('1: mount');
 
     const rootID = store.getElementIDAtIndex(0);
     expect(
-      printOwnersList(store.getOwnersListForElement(rootID))
+      printOwnersList(store.getOwnersListForElement(rootID)),
     ).toMatchSnapshot('2: components owned by <Root>');
 
     act(() =>
       ReactDOM.render(
         <Root includeDirect={true} includeIndirect={true} />,
-        container
-      )
+        container,
+      ),
     );
     expect(store).toMatchSnapshot('3: update to add direct');
 
     expect(
-      printOwnersList(store.getOwnersListForElement(rootID))
+      printOwnersList(store.getOwnersListForElement(rootID)),
     ).toMatchSnapshot('4: components owned by <Root>');
 
     act(() =>
       ReactDOM.render(
         <Root includeDirect={true} includeIndirect={false} />,
-        container
-      )
+        container,
+      ),
     );
     expect(store).toMatchSnapshot('5: update to remove indirect');
 
     expect(
-      printOwnersList(store.getOwnersListForElement(rootID))
+      printOwnersList(store.getOwnersListForElement(rootID)),
     ).toMatchSnapshot('6: components owned by <Root>');
 
     act(() =>
       ReactDOM.render(
         <Root includeDirect={false} includeIndirect={false} />,
-        container
-      )
+        container,
+      ),
     );
     expect(store).toMatchSnapshot('7: update to remove both');
 
     expect(
-      printOwnersList(store.getOwnersListForElement(rootID))
+      printOwnersList(store.getOwnersListForElement(rootID)),
     ).toMatchSnapshot('8: components owned by <Root>');
   });
 
   it('should show the proper owners list ordering after reordered children', () => {
-    const Root = ({ ascending }) =>
+    const Root = ({ascending}) =>
       ascending
         ? [<Leaf key="A" />, <Leaf key="B" />, <Leaf key="C" />]
         : [<Leaf key="C" />, <Leaf key="B" />, <Leaf key="A" />];
@@ -151,14 +151,14 @@ describe('Store owners list', () => {
 
     const rootID = store.getElementIDAtIndex(0);
     expect(
-      printOwnersList(store.getOwnersListForElement(rootID))
+      printOwnersList(store.getOwnersListForElement(rootID)),
     ).toMatchSnapshot('2: components owned by <Root>');
 
     act(() => ReactDOM.render(<Root ascending={false} />, container));
     expect(store).toMatchSnapshot('3: update (descending)');
 
     expect(
-      printOwnersList(store.getOwnersListForElement(rootID))
+      printOwnersList(store.getOwnersListForElement(rootID)),
     ).toMatchSnapshot('4: components owned by <Root>');
   });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/storeSerializer.js b/packages/react-devtools-shared/src/__tests__/storeSerializer.js
index e59d5b057abb8..947c449a89a58 100644
--- a/packages/react-devtools-shared/src/__tests__/storeSerializer.js
+++ b/packages/react-devtools-shared/src/__tests__/storeSerializer.js
@@ -1,11 +1,14 @@
-import { printStore } from 'react-devtools-shared/src/devtools/utils'
+import {printStore} from 'react-devtools-shared/src/devtools/utils';
 
 // test() is part of Jest's serializer API
 export function test(maybeStore) {
   // It's important to lazy-require the Store rather than imported at the head of the module.
   // Because we reset modules between tests, different Store implementations will be used for each test.
   // Unfortunately Jest does not reset its own serializer modules.
-  return maybeStore instanceof require('react-devtools-shared/src/devtools/store').default;
+  return (
+    maybeStore instanceof
+    require('react-devtools-shared/src/devtools/store').default
+  );
 }
 
 // print() is part of Jest's serializer API
@@ -15,4 +18,4 @@ export function print(store, serialize, indent) {
 
 // Used for Jest snapshot testing.
 // May also be useful for visually debugging the tree, so it lives on the Store.
-export { printStore };
+export {printStore};
diff --git a/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js b/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js
index 8877d5d9992d2..37ea32475ad2b 100644
--- a/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js
@@ -43,7 +43,7 @@ describe('StoreStress (Sync Mode)', () => {
     const d = <D key="d" />;
     const e = <E key="e" />;
 
-    function Parent({ children }) {
+    function Parent({children}) {
       return children;
     }
 
@@ -195,7 +195,7 @@ describe('StoreStress (Sync Mode)', () => {
       [c, a],
     ];
 
-    const Root = ({ children }) => {
+    const Root = ({children}) => {
       return children;
     };
 
@@ -235,8 +235,8 @@ describe('StoreStress (Sync Mode)', () => {
             <Root>
               <div>{steps[i]}</div>
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         expect(print(store)).toMatch(snapshots[i]);
         act(() =>
@@ -244,8 +244,8 @@ describe('StoreStress (Sync Mode)', () => {
             <Root>
               <div>{steps[j]}</div>
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         expect(print(store)).toMatch(snapshots[j]);
         act(() =>
@@ -253,8 +253,8 @@ describe('StoreStress (Sync Mode)', () => {
             <Root>
               <div>{steps[i]}</div>
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         expect(print(store)).toMatch(snapshots[i]);
         act(() => ReactDOM.unmountComponentAtNode(container));
@@ -295,7 +295,7 @@ describe('StoreStress (Sync Mode)', () => {
       throw new Promise(() => {});
     };
 
-    const Root = ({ children }) => {
+    const Root = ({children}) => {
       return children;
     };
 
@@ -311,8 +311,8 @@ describe('StoreStress (Sync Mode)', () => {
             <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
             <Y />
           </Root>,
-          container
-        )
+          container,
+        ),
       );
       // We snapshot each step once so it doesn't regress.
       expect(store).toMatchSnapshot();
@@ -334,8 +334,8 @@ describe('StoreStress (Sync Mode)', () => {
             </React.Suspense>
             <Y />
           </Root>,
-          container
-        )
+          container,
+        ),
       );
       expect(print(store)).toEqual(snapshots[i]);
       act(() => ReactDOM.unmountComponentAtNode(container));
@@ -354,8 +354,8 @@ describe('StoreStress (Sync Mode)', () => {
               <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         expect(print(store)).toEqual(snapshots[i]);
         // Re-render with steps[j].
@@ -366,8 +366,8 @@ describe('StoreStress (Sync Mode)', () => {
               <React.Suspense fallback={z}>{steps[j]}</React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         // Verify the successful transition to steps[j].
         expect(print(store)).toEqual(snapshots[j]);
@@ -379,8 +379,8 @@ describe('StoreStress (Sync Mode)', () => {
               <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         expect(print(store)).toEqual(snapshots[i]);
         // Clean up after every iteration.
@@ -405,8 +405,8 @@ describe('StoreStress (Sync Mode)', () => {
               </React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         expect(print(store)).toEqual(snapshots[i]);
         // Re-render with steps[j].
@@ -421,8 +421,8 @@ describe('StoreStress (Sync Mode)', () => {
               </React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         // Verify the successful transition to steps[j].
         expect(print(store)).toEqual(snapshots[j]);
@@ -438,8 +438,8 @@ describe('StoreStress (Sync Mode)', () => {
               </React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         expect(print(store)).toEqual(snapshots[i]);
         // Clean up after every iteration.
@@ -460,8 +460,8 @@ describe('StoreStress (Sync Mode)', () => {
               <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         expect(print(store)).toEqual(snapshots[i]);
         // Re-render with steps[j].
@@ -476,8 +476,8 @@ describe('StoreStress (Sync Mode)', () => {
               </React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         // Verify the successful transition to steps[j].
         expect(print(store)).toEqual(snapshots[j]);
@@ -489,8 +489,8 @@ describe('StoreStress (Sync Mode)', () => {
               <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         expect(print(store)).toEqual(snapshots[i]);
         // Clean up after every iteration.
@@ -515,8 +515,8 @@ describe('StoreStress (Sync Mode)', () => {
               </React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         expect(print(store)).toEqual(snapshots[i]);
         // Re-render with steps[j].
@@ -527,8 +527,8 @@ describe('StoreStress (Sync Mode)', () => {
               <React.Suspense fallback={z}>{steps[j]}</React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         // Verify the successful transition to steps[j].
         expect(print(store)).toEqual(snapshots[j]);
@@ -544,8 +544,8 @@ describe('StoreStress (Sync Mode)', () => {
               </React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         expect(print(store)).toEqual(snapshots[i]);
         // Clean up after every iteration.
@@ -566,8 +566,8 @@ describe('StoreStress (Sync Mode)', () => {
               <React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
 
         // We get ID from the index in the tree above:
@@ -609,8 +609,8 @@ describe('StoreStress (Sync Mode)', () => {
               </React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         expect(print(store)).toEqual(snapshots[j]);
 
@@ -633,8 +633,8 @@ describe('StoreStress (Sync Mode)', () => {
               <React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         // Fallback is still forced though.
         expect(print(store)).toEqual(snapshots[j]);
@@ -689,7 +689,7 @@ describe('StoreStress (Sync Mode)', () => {
       throw new Promise(() => {});
     };
 
-    const MaybeSuspend = ({ children, suspend }) => {
+    const MaybeSuspend = ({children, suspend}) => {
       if (suspend) {
         return (
           <div>
@@ -707,7 +707,7 @@ describe('StoreStress (Sync Mode)', () => {
       );
     };
 
-    const Root = ({ children }) => {
+    const Root = ({children}) => {
       return children;
     };
 
@@ -725,8 +725,8 @@ describe('StoreStress (Sync Mode)', () => {
             </React.Suspense>
             <Y />
           </Root>,
-          container
-        )
+          container,
+        ),
       );
       // We snapshot each step once so it doesn't regress.
       expect(store).toMatchSnapshot();
@@ -751,8 +751,8 @@ describe('StoreStress (Sync Mode)', () => {
             </React.Suspense>
             <Y />
           </Root>,
-          container
-        )
+          container,
+        ),
       );
       // We snapshot each step once so it doesn't regress.
       expect(store).toMatchSnapshot();
@@ -775,8 +775,8 @@ describe('StoreStress (Sync Mode)', () => {
               </React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         expect(print(store)).toEqual(snapshots[i]);
         // Re-render with steps[j].
@@ -789,8 +789,8 @@ describe('StoreStress (Sync Mode)', () => {
               </React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         // Verify the successful transition to steps[j].
         expect(print(store)).toEqual(snapshots[j]);
@@ -804,8 +804,8 @@ describe('StoreStress (Sync Mode)', () => {
               </React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         expect(print(store)).toEqual(snapshots[i]);
         // Clean up after every iteration.
@@ -833,8 +833,8 @@ describe('StoreStress (Sync Mode)', () => {
               </React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         expect(print(store)).toEqual(fallbackSnapshots[i]);
         // Re-render with steps[j].
@@ -852,8 +852,8 @@ describe('StoreStress (Sync Mode)', () => {
               </React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         // Verify the successful transition to steps[j].
         expect(print(store)).toEqual(fallbackSnapshots[j]);
@@ -872,8 +872,8 @@ describe('StoreStress (Sync Mode)', () => {
               </React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         expect(print(store)).toEqual(fallbackSnapshots[i]);
         // Clean up after every iteration.
@@ -896,8 +896,8 @@ describe('StoreStress (Sync Mode)', () => {
               </React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         expect(print(store)).toEqual(snapshots[i]);
         // Re-render with steps[j].
@@ -910,8 +910,8 @@ describe('StoreStress (Sync Mode)', () => {
               </React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         // Verify the successful transition to steps[j].
         expect(print(store)).toEqual(fallbackSnapshots[j]);
@@ -925,8 +925,8 @@ describe('StoreStress (Sync Mode)', () => {
               </React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         expect(print(store)).toEqual(snapshots[i]);
         // Clean up after every iteration.
@@ -949,8 +949,8 @@ describe('StoreStress (Sync Mode)', () => {
               </React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         expect(print(store)).toEqual(fallbackSnapshots[i]);
         // Re-render with steps[j].
@@ -963,8 +963,8 @@ describe('StoreStress (Sync Mode)', () => {
               </React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         // Verify the successful transition to steps[j].
         expect(print(store)).toEqual(snapshots[j]);
@@ -978,8 +978,8 @@ describe('StoreStress (Sync Mode)', () => {
               </React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         expect(print(store)).toEqual(fallbackSnapshots[i]);
         // Clean up after every iteration.
@@ -1002,8 +1002,8 @@ describe('StoreStress (Sync Mode)', () => {
               </React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
 
         // We get ID from the index in the tree above:
@@ -1043,8 +1043,8 @@ describe('StoreStress (Sync Mode)', () => {
               </React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         expect(print(store)).toEqual(fallbackSnapshots[j]);
 
@@ -1069,8 +1069,8 @@ describe('StoreStress (Sync Mode)', () => {
               </React.Suspense>
               <Y />
             </Root>,
-            container
-          )
+            container,
+          ),
         );
         // Fallback is still forced though.
         expect(print(store)).toEqual(fallbackSnapshots[j]);
diff --git a/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
index d2a834ca98509..f219c7f813c3c 100644
--- a/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
@@ -43,7 +43,7 @@ describe('StoreStressConcurrent', () => {
     const d = <D key="d" />;
     const e = <E key="e" />;
 
-    function Parent({ children }) {
+    function Parent({children}) {
       return children;
     }
 
@@ -201,7 +201,7 @@ describe('StoreStressConcurrent', () => {
       [c, a],
     ];
 
-    const Root = ({ children }) => {
+    const Root = ({children}) => {
       return children;
     };
 
@@ -246,24 +246,24 @@ describe('StoreStressConcurrent', () => {
           root.render(
             <Root>
               <div>{steps[i]}</div>
-            </Root>
-          )
+            </Root>,
+          ),
         );
         expect(print(store)).toMatch(snapshots[i]);
         act(() =>
           root.render(
             <Root>
               <div>{steps[j]}</div>
-            </Root>
-          )
+            </Root>,
+          ),
         );
         expect(print(store)).toMatch(snapshots[j]);
         act(() =>
           root.render(
             <Root>
               <div>{steps[i]}</div>
-            </Root>
-          )
+            </Root>,
+          ),
         );
         expect(print(store)).toMatch(snapshots[i]);
         act(() => root.unmount());
@@ -304,7 +304,7 @@ describe('StoreStressConcurrent', () => {
       throw new Promise(() => {});
     };
 
-    const Root = ({ children }) => {
+    const Root = ({children}) => {
       return children;
     };
 
@@ -321,8 +321,8 @@ describe('StoreStressConcurrent', () => {
             <X />
             <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
             <Y />
-          </Root>
-        )
+          </Root>,
+        ),
       );
       // We snapshot each step once so it doesn't regress.
       expect(store).toMatchSnapshot();
@@ -343,8 +343,8 @@ describe('StoreStressConcurrent', () => {
               <Z />
             </React.Suspense>
             <Y />
-          </Root>
-        )
+          </Root>,
+        ),
       );
       expect(print(store)).toEqual(snapshots[i]);
       act(() => root.unmount());
@@ -364,8 +364,8 @@ describe('StoreStressConcurrent', () => {
               <X />
               <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         expect(print(store)).toEqual(snapshots[i]);
         // Re-render with steps[j].
@@ -375,8 +375,8 @@ describe('StoreStressConcurrent', () => {
               <X />
               <React.Suspense fallback={z}>{steps[j]}</React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         // Verify the successful transition to steps[j].
         expect(print(store)).toEqual(snapshots[j]);
@@ -387,8 +387,8 @@ describe('StoreStressConcurrent', () => {
               <X />
               <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         expect(print(store)).toEqual(snapshots[i]);
         // Clean up after every iteration.
@@ -414,8 +414,8 @@ describe('StoreStressConcurrent', () => {
                 <Z />
               </React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         expect(print(store)).toEqual(snapshots[i]);
         // Re-render with steps[j].
@@ -429,8 +429,8 @@ describe('StoreStressConcurrent', () => {
                 <Z />
               </React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         // Verify the successful transition to steps[j].
         expect(print(store)).toEqual(snapshots[j]);
@@ -445,8 +445,8 @@ describe('StoreStressConcurrent', () => {
                 <Z />
               </React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         expect(print(store)).toEqual(snapshots[i]);
         // Clean up after every iteration.
@@ -468,8 +468,8 @@ describe('StoreStressConcurrent', () => {
               <X />
               <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         expect(print(store)).toEqual(snapshots[i]);
         // Re-render with steps[j].
@@ -483,8 +483,8 @@ describe('StoreStressConcurrent', () => {
                 <Z />
               </React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         // Verify the successful transition to steps[j].
         expect(print(store)).toEqual(snapshots[j]);
@@ -495,8 +495,8 @@ describe('StoreStressConcurrent', () => {
               <X />
               <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         expect(print(store)).toEqual(snapshots[i]);
         // Clean up after every iteration.
@@ -522,8 +522,8 @@ describe('StoreStressConcurrent', () => {
                 <Z />
               </React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         expect(print(store)).toEqual(snapshots[i]);
         // Re-render with steps[j].
@@ -533,8 +533,8 @@ describe('StoreStressConcurrent', () => {
               <X />
               <React.Suspense fallback={z}>{steps[j]}</React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         // Verify the successful transition to steps[j].
         expect(print(store)).toEqual(snapshots[j]);
@@ -549,8 +549,8 @@ describe('StoreStressConcurrent', () => {
                 <Z />
               </React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         expect(print(store)).toEqual(snapshots[i]);
         // Clean up after every iteration.
@@ -572,8 +572,8 @@ describe('StoreStressConcurrent', () => {
               <X />
               <React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
 
         // We get ID from the index in the tree above:
@@ -614,8 +614,8 @@ describe('StoreStressConcurrent', () => {
                 <Z />
               </React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         expect(print(store)).toEqual(snapshots[j]);
 
@@ -637,8 +637,8 @@ describe('StoreStressConcurrent', () => {
               <X />
               <React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         // Fallback is still forced though.
         expect(print(store)).toEqual(snapshots[j]);
@@ -693,7 +693,7 @@ describe('StoreStressConcurrent', () => {
       throw new Promise(() => {});
     };
 
-    const MaybeSuspend = ({ children, suspend }) => {
+    const MaybeSuspend = ({children, suspend}) => {
       if (suspend) {
         return (
           <div>
@@ -711,7 +711,7 @@ describe('StoreStressConcurrent', () => {
       );
     };
 
-    const Root = ({ children }) => {
+    const Root = ({children}) => {
       return children;
     };
 
@@ -730,8 +730,8 @@ describe('StoreStressConcurrent', () => {
               <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
             </React.Suspense>
             <Y />
-          </Root>
-        )
+          </Root>,
+        ),
       );
       // We snapshot each step once so it doesn't regress.
       expect(store).toMatchSnapshot();
@@ -755,8 +755,8 @@ describe('StoreStressConcurrent', () => {
               <Z />
             </React.Suspense>
             <Y />
-          </Root>
-        )
+          </Root>,
+        ),
       );
       // We snapshot each step once so it doesn't regress.
       expect(store).toMatchSnapshot();
@@ -780,8 +780,8 @@ describe('StoreStressConcurrent', () => {
                 <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
               </React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         expect(print(store)).toEqual(snapshots[i]);
         // Re-render with steps[j].
@@ -793,8 +793,8 @@ describe('StoreStressConcurrent', () => {
                 <MaybeSuspend suspend={false}>{steps[j]}</MaybeSuspend>
               </React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         // Verify the successful transition to steps[j].
         expect(print(store)).toEqual(snapshots[j]);
@@ -807,8 +807,8 @@ describe('StoreStressConcurrent', () => {
                 <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
               </React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         expect(print(store)).toEqual(snapshots[i]);
         // Clean up after every iteration.
@@ -837,8 +837,8 @@ describe('StoreStressConcurrent', () => {
                 <Z />
               </React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         expect(print(store)).toEqual(fallbackSnapshots[i]);
         // Re-render with steps[j].
@@ -855,8 +855,8 @@ describe('StoreStressConcurrent', () => {
                 <Z />
               </React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         // Verify the successful transition to steps[j].
         expect(print(store)).toEqual(fallbackSnapshots[j]);
@@ -874,8 +874,8 @@ describe('StoreStressConcurrent', () => {
                 <Z />
               </React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         expect(print(store)).toEqual(fallbackSnapshots[i]);
         // Clean up after every iteration.
@@ -899,8 +899,8 @@ describe('StoreStressConcurrent', () => {
                 <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
               </React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         expect(print(store)).toEqual(snapshots[i]);
         // Re-render with steps[j].
@@ -912,8 +912,8 @@ describe('StoreStressConcurrent', () => {
                 <MaybeSuspend suspend={true}>{steps[i]}</MaybeSuspend>
               </React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         // Verify the successful transition to steps[j].
         expect(print(store)).toEqual(fallbackSnapshots[j]);
@@ -926,8 +926,8 @@ describe('StoreStressConcurrent', () => {
                 <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
               </React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         expect(print(store)).toEqual(snapshots[i]);
         // Clean up after every iteration.
@@ -951,8 +951,8 @@ describe('StoreStressConcurrent', () => {
                 <MaybeSuspend suspend={true}>{steps[j]}</MaybeSuspend>
               </React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         expect(print(store)).toEqual(fallbackSnapshots[i]);
         // Re-render with steps[j].
@@ -964,8 +964,8 @@ describe('StoreStressConcurrent', () => {
                 <MaybeSuspend suspend={false}>{steps[j]}</MaybeSuspend>
               </React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         // Verify the successful transition to steps[j].
         expect(print(store)).toEqual(snapshots[j]);
@@ -978,8 +978,8 @@ describe('StoreStressConcurrent', () => {
                 <MaybeSuspend suspend={true}>{steps[j]}</MaybeSuspend>
               </React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         expect(print(store)).toEqual(fallbackSnapshots[i]);
         // Clean up after every iteration.
@@ -1003,8 +1003,8 @@ describe('StoreStressConcurrent', () => {
                 <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
               </React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
 
         // We get ID from the index in the tree above:
@@ -1043,8 +1043,8 @@ describe('StoreStressConcurrent', () => {
                 <MaybeSuspend suspend={true}>{steps[i]}</MaybeSuspend>
               </React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         expect(print(store)).toEqual(fallbackSnapshots[j]);
 
@@ -1068,8 +1068,8 @@ describe('StoreStressConcurrent', () => {
                 <MaybeSuspend suspend={false}>{steps[i]}</MaybeSuspend>
               </React.Suspense>
               <Y />
-            </Root>
-          )
+            </Root>,
+          ),
         );
         // Fallback is still forced though.
         expect(print(store)).toEqual(fallbackSnapshots[j]);
diff --git a/packages/react-devtools-shared/src/__tests__/treeContext-test.js b/packages/react-devtools-shared/src/__tests__/treeContext-test.js
index e007dcf97cb36..3983b156eec27 100644
--- a/packages/react-devtools-shared/src/__tests__/treeContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/treeContext-test.js
@@ -1,7 +1,7 @@
 // @flow
 
 import typeof ReactTestRenderer from 'react-test-renderer';
-import type { FrontendBridge } from 'react-devtools-shared/src/bridge';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type Store from 'react-devtools-shared/src/devtools/store';
 import type {
   DispatcherContext,
@@ -35,8 +35,10 @@ describe('TreeListContext', () => {
     ReactDOM = require('react-dom');
     TestRenderer = utils.requireTestRenderer();
 
-    BridgeContext = require('react-devtools-shared/src/devtools/views/context').BridgeContext;
-    StoreContext = require('react-devtools-shared/src/devtools/views/context').StoreContext;
+    BridgeContext = require('react-devtools-shared/src/devtools/views/context')
+      .BridgeContext;
+    StoreContext = require('react-devtools-shared/src/devtools/views/context')
+      .StoreContext;
     TreeContext = require('react-devtools-shared/src/devtools/views/Components/TreeContext');
   });
 
@@ -76,7 +78,7 @@ describe('TreeListContext', () => {
       const Child = () => null;
 
       utils.act(() =>
-        ReactDOM.render(<Grandparent />, document.createElement('div'))
+        ReactDOM.render(<Grandparent />, document.createElement('div')),
       );
 
       expect(store).toMatchSnapshot('0: mount');
@@ -85,7 +87,7 @@ describe('TreeListContext', () => {
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
       expect(state).toMatchSnapshot('1: initial state');
 
-      utils.act(() => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }));
+      utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('2: select first element');
 
@@ -94,7 +96,7 @@ describe('TreeListContext', () => {
         state.selectedElementIndex < store.numElements - 1
       ) {
         const index = ((state.selectedElementIndex: any): number);
-        utils.act(() => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }));
+        utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));
         utils.act(() => renderer.update(<Contexts />));
         expect(state).toMatchSnapshot(`3: select element after (${index})`);
       }
@@ -104,16 +106,16 @@ describe('TreeListContext', () => {
         state.selectedElementIndex > 0
       ) {
         const index = ((state.selectedElementIndex: any): number);
-        utils.act(() => dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' }));
+        utils.act(() => dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'}));
         utils.act(() => renderer.update(<Contexts />));
         expect(state).toMatchSnapshot(`4: select element before (${index})`);
       }
 
-      utils.act(() => dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' }));
+      utils.act(() => dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('5: select previous wraps around to last');
 
-      utils.act(() => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }));
+      utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('6: select next wraps around to first');
     });
@@ -134,7 +136,7 @@ describe('TreeListContext', () => {
       const Child = () => null;
 
       utils.act(() =>
-        ReactDOM.render(<Grandparent />, document.createElement('div'))
+        ReactDOM.render(<Grandparent />, document.createElement('div')),
       );
 
       expect(store).toMatchSnapshot('0: mount');
@@ -143,24 +145,22 @@ describe('TreeListContext', () => {
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
       expect(state).toMatchSnapshot('1: initial state');
 
-      utils.act(() =>
-        dispatch({ type: 'SELECT_ELEMENT_AT_INDEX', payload: 0 })
-      );
+      utils.act(() => dispatch({type: 'SELECT_ELEMENT_AT_INDEX', payload: 0}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('2: select first element');
 
-      utils.act(() => dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }));
+      utils.act(() => dispatch({type: 'SELECT_CHILD_ELEMENT_IN_TREE'}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('3: select Parent');
 
-      utils.act(() => dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }));
+      utils.act(() => dispatch({type: 'SELECT_CHILD_ELEMENT_IN_TREE'}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('4: select Child');
 
       const previousState = state;
 
       // There are no more children to select, so this should be a no-op
-      utils.act(() => dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }));
+      utils.act(() => dispatch({type: 'SELECT_CHILD_ELEMENT_IN_TREE'}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toEqual(previousState);
     });
@@ -181,7 +181,7 @@ describe('TreeListContext', () => {
       const Child = () => null;
 
       utils.act(() =>
-        ReactDOM.render(<Grandparent />, document.createElement('div'))
+        ReactDOM.render(<Grandparent />, document.createElement('div')),
       );
 
       expect(store).toMatchSnapshot('0: mount');
@@ -193,23 +193,23 @@ describe('TreeListContext', () => {
       const lastChildID = store.getElementIDAtIndex(store.numElements - 1);
 
       utils.act(() =>
-        dispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: lastChildID })
+        dispatch({type: 'SELECT_ELEMENT_BY_ID', payload: lastChildID}),
       );
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('2: select last child');
 
-      utils.act(() => dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }));
+      utils.act(() => dispatch({type: 'SELECT_PARENT_ELEMENT_IN_TREE'}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('3: select Parent');
 
-      utils.act(() => dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }));
+      utils.act(() => dispatch({type: 'SELECT_PARENT_ELEMENT_IN_TREE'}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('4: select Grandparent');
 
       const previousState = state;
 
       // There are no more ancestors to select, so this should be a no-op
-      utils.act(() => dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }));
+      utils.act(() => dispatch({type: 'SELECT_PARENT_ELEMENT_IN_TREE'}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toEqual(previousState);
     });
@@ -228,8 +228,8 @@ describe('TreeListContext', () => {
               <Child />
             </Parent>
           </Grandparent>,
-          container
-        )
+          container,
+        ),
       );
 
       expect(store).toMatchSnapshot('0: mount');
@@ -238,9 +238,7 @@ describe('TreeListContext', () => {
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
       expect(state).toMatchSnapshot('1: initial state');
 
-      utils.act(() =>
-        dispatch({ type: 'SELECT_ELEMENT_AT_INDEX', payload: 3 })
-      );
+      utils.act(() => dispatch({type: 'SELECT_ELEMENT_AT_INDEX', payload: 3}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('2: select second child');
 
@@ -249,16 +247,16 @@ describe('TreeListContext', () => {
           <Grandparent>
             <Parent />
           </Grandparent>,
-          container
-        )
+          container,
+        ),
       );
       expect(state).toMatchSnapshot(
-        '3: remove children (parent should now be selected)'
+        '3: remove children (parent should now be selected)',
       );
 
       await utils.actAsync(() => ReactDOM.unmountComponentAtNode(container));
       expect(state).toMatchSnapshot(
-        '4: unmount root (nothing should be selected)'
+        '4: unmount root (nothing should be selected)',
       );
 
       done();
@@ -282,8 +280,8 @@ describe('TreeListContext', () => {
             <Baz />
             <Qux />
           </React.Fragment>,
-          document.createElement('div')
-        )
+          document.createElement('div'),
+        ),
       );
 
       expect(store).toMatchSnapshot('0: mount');
@@ -293,22 +291,22 @@ describe('TreeListContext', () => {
       expect(state).toMatchSnapshot('1: initial state');
 
       // NOTE: multi-match
-      utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));
+      utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'ba'}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('2: search for "ba"');
 
       // NOTE: single match
-      utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'f' }));
+      utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'f'}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('3: search for "f"');
 
       // NOTE: no match
-      utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'y' }));
+      utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'y'}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('4: search for "y"');
 
       // NOTE: HOC match
-      utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'w' }));
+      utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'w'}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('5: search for "w"');
     });
@@ -326,8 +324,8 @@ describe('TreeListContext', () => {
             <Bar />
             <Baz />
           </React.Fragment>,
-          document.createElement('div')
-        )
+          document.createElement('div'),
+        ),
       );
 
       expect(store).toMatchSnapshot('0: mount');
@@ -336,31 +334,31 @@ describe('TreeListContext', () => {
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
       expect(state).toMatchSnapshot('1: initial state');
 
-      utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));
+      utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'ba'}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('2: search for "ba"');
 
-      utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));
+      utils.act(() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('3: go to second result');
 
-      utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));
+      utils.act(() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('4: go to third result');
 
-      utils.act(() => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }));
+      utils.act(() => dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('5: go to second result');
 
-      utils.act(() => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }));
+      utils.act(() => dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('6: go to first result');
 
-      utils.act(() => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }));
+      utils.act(() => dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('7: wrap to last result');
 
-      utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));
+      utils.act(() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('8: wrap to first result');
     });
@@ -378,8 +376,8 @@ describe('TreeListContext', () => {
             <Foo />
             <Bar />
           </React.Fragment>,
-          container
-        )
+          container,
+        ),
       );
 
       expect(store).toMatchSnapshot('0: mount');
@@ -388,7 +386,7 @@ describe('TreeListContext', () => {
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
       expect(state).toMatchSnapshot('1: initial state');
 
-      utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));
+      utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'ba'}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('2: search for "ba"');
 
@@ -399,8 +397,8 @@ describe('TreeListContext', () => {
             <Bar />
             <Baz />
           </React.Fragment>,
-          container
-        )
+          container,
+        ),
       );
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('3: mount Baz');
@@ -422,8 +420,8 @@ describe('TreeListContext', () => {
             <Bar />
             <Baz />
           </React.Fragment>,
-          container
-        )
+          container,
+        ),
       );
 
       expect(store).toMatchSnapshot('0: mount');
@@ -432,11 +430,11 @@ describe('TreeListContext', () => {
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
       expect(state).toMatchSnapshot('1: initial state');
 
-      utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));
+      utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'ba'}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('2: search for "ba"');
 
-      utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));
+      utils.act(() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('3: go to second result');
 
@@ -446,8 +444,8 @@ describe('TreeListContext', () => {
             <Foo />
             <Bar />
           </React.Fragment>,
-          container
-        )
+          container,
+        ),
       );
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('4: unmount Baz');
@@ -468,7 +466,7 @@ describe('TreeListContext', () => {
       const Child = () => null;
 
       utils.act(() =>
-        ReactDOM.render(<Grandparent />, document.createElement('div'))
+        ReactDOM.render(<Grandparent />, document.createElement('div')),
       );
 
       expect(store).toMatchSnapshot('0: mount');
@@ -478,18 +476,18 @@ describe('TreeListContext', () => {
       expect(state).toMatchSnapshot('1: initial state');
 
       let parentID = ((store.getElementIDAtIndex(1): any): number);
-      utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: parentID }));
+      utils.act(() => dispatch({type: 'SELECT_OWNER', payload: parentID}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('2: parent owners tree');
 
-      utils.act(() => dispatch({ type: 'RESET_OWNER_STACK' }));
+      utils.act(() => dispatch({type: 'RESET_OWNER_STACK'}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('3: final state');
     });
 
     it('should remove an element from the owners list if it is unmounted', async done => {
-      const Grandparent = ({ count }) => <Parent count={count} />;
-      const Parent = ({ count }) =>
+      const Grandparent = ({count}) => <Parent count={count} />;
+      const Parent = ({count}) =>
         new Array(count).fill(true).map((_, index) => <Child key={index} />);
       const Child = () => null;
 
@@ -503,17 +501,17 @@ describe('TreeListContext', () => {
       expect(state).toMatchSnapshot('1: initial state');
 
       let parentID = ((store.getElementIDAtIndex(1): any): number);
-      utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: parentID }));
+      utils.act(() => dispatch({type: 'SELECT_OWNER', payload: parentID}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('2: parent owners tree');
 
       await utils.actAsync(() =>
-        ReactDOM.render(<Grandparent count={1} />, container)
+        ReactDOM.render(<Grandparent count={1} />, container),
       );
       expect(state).toMatchSnapshot('3: remove second child');
 
       await utils.actAsync(() =>
-        ReactDOM.render(<Grandparent count={0} />, container)
+        ReactDOM.render(<Grandparent count={0} />, container),
       );
       expect(state).toMatchSnapshot('4: remove first child');
 
@@ -530,8 +528,8 @@ describe('TreeListContext', () => {
           <Parent>
             <Child />
           </Parent>,
-          container
-        )
+          container,
+        ),
       );
 
       expect(store).toMatchSnapshot('0: mount');
@@ -541,7 +539,7 @@ describe('TreeListContext', () => {
       expect(state).toMatchSnapshot('1: initial state');
 
       let childID = ((store.getElementIDAtIndex(1): any): number);
-      utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: childID }));
+      utils.act(() => dispatch({type: 'SELECT_OWNER', payload: childID}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('2: child owners tree');
 
@@ -549,7 +547,7 @@ describe('TreeListContext', () => {
       expect(state).toMatchSnapshot('3: remove child');
 
       let parentID = ((store.getElementIDAtIndex(0): any): number);
-      utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: parentID }));
+      utils.act(() => dispatch({type: 'SELECT_OWNER', payload: parentID}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('4: parent owners tree');
 
@@ -586,20 +584,20 @@ describe('TreeListContext', () => {
       const childID = ((store.getElementIDAtIndex(2): any): number);
       const innerSuspenseID = ((store.getElementIDAtIndex(3): any): number);
 
-      utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: childID }));
+      utils.act(() => dispatch({type: 'SELECT_OWNER', payload: childID}));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('2: child owners tree');
 
       // Toggling a Suspense boundary inside of the flat list should update selected index
       utils.act(() =>
-        dispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: innerSuspenseID })
+        dispatch({type: 'SELECT_ELEMENT_BY_ID', payload: innerSuspenseID}),
       );
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('3: child owners tree');
 
       // Toggling a Suspense boundary outside of the flat list should exit owners list and update index
       utils.act(() =>
-        dispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: outerSuspenseID })
+        dispatch({type: 'SELECT_ELEMENT_BY_ID', payload: outerSuspenseID}),
       );
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('4: main tree');
diff --git a/packages/react-devtools-shared/src/__tests__/utils.js b/packages/react-devtools-shared/src/__tests__/utils.js
index a1e0274f0d676..1679ab5dcae2a 100644
--- a/packages/react-devtools-shared/src/__tests__/utils.js
+++ b/packages/react-devtools-shared/src/__tests__/utils.js
@@ -2,14 +2,14 @@
 
 import typeof ReactTestRenderer from 'react-test-renderer';
 
-import type { FrontendBridge } from 'react-devtools-shared/src/bridge';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type Store from 'react-devtools-shared/src/devtools/store';
-import type { ProfilingDataFrontend } from 'react-devtools-shared/src/devtools/views/Profiler/types';
-import type { ElementType } from 'react-devtools-shared/src/types';
+import type {ProfilingDataFrontend} from 'react-devtools-shared/src/devtools/views/Profiler/types';
+import type {ElementType} from 'react-devtools-shared/src/types';
 
 export function act(callback: Function): void {
-  const { act: actTestRenderer } = require('react-test-renderer');
-  const { act: actDOM } = require('react-dom/test-utils');
+  const {act: actTestRenderer} = require('react-test-renderer');
+  const {act: actDOM} = require('react-dom/test-utils');
 
   actDOM(() => {
     actTestRenderer(() => {
@@ -27,10 +27,10 @@ export function act(callback: Function): void {
 
 export async function actAsync(
   cb: () => *,
-  recursivelyFlush: boolean = true
+  recursivelyFlush: boolean = true,
 ): Promise<void> {
-  const { act: actTestRenderer } = require('react-test-renderer');
-  const { act: actDOM } = require('react-dom/test-utils');
+  const {act: actTestRenderer} = require('react-test-renderer');
+  const {act: actDOM} = require('react-dom/test-utils');
 
   // $FlowFixMe Flow doens't know about "await act()" yet
   await actDOM(async () => {
@@ -67,13 +67,13 @@ export function beforeEachProfiling(): void {
   jest
     .spyOn(performance, 'now')
     .mockImplementation(
-      jest.requireActual('scheduler/unstable_mock').unstable_now
+      jest.requireActual('scheduler/unstable_mock').unstable_now,
     );
 }
 
 export function createDisplayNameFilter(
   source: string,
-  isEnabled: boolean = true
+  isEnabled: boolean = true,
 ) {
   const Types = require('react-devtools-shared/src/types');
   let isValid = true;
@@ -101,7 +101,7 @@ export function createHOCFilter(isEnabled: boolean = true) {
 
 export function createElementTypeFilter(
   elementType: ElementType,
-  isEnabled: boolean = true
+  isEnabled: boolean = true,
 ) {
   const Types = require('react-devtools-shared/src/types');
   return {
@@ -113,7 +113,7 @@ export function createElementTypeFilter(
 
 export function createLocationFilter(
   source: string,
-  isEnabled: boolean = true
+  isEnabled: boolean = true,
 ) {
   const Types = require('react-devtools-shared/src/types');
   let isValid = true;
@@ -162,32 +162,32 @@ export function requireTestRenderer(): ReactTestRenderer {
 }
 
 export function exportImportHelper(bridge: FrontendBridge, store: Store): void {
-  const { act } = require('./utils');
+  const {act} = require('./utils');
   const {
     prepareProfilingDataExport,
     prepareProfilingDataFrontendFromExport,
   } = require('react-devtools-shared/src/devtools/views/Profiler/utils');
 
-  const { profilerStore } = store;
+  const {profilerStore} = store;
 
   expect(profilerStore.profilingData).not.toBeNull();
 
   const profilingDataFrontendInitial = ((profilerStore.profilingData: any): ProfilingDataFrontend);
 
   const profilingDataExport = prepareProfilingDataExport(
-    profilingDataFrontendInitial
+    profilingDataFrontendInitial,
   );
 
   // Simulate writing/reading to disk.
   const serializedProfilingDataExport = JSON.stringify(
     profilingDataExport,
     null,
-    2
+    2,
   );
   const parsedProfilingDataExport = JSON.parse(serializedProfilingDataExport);
 
   const profilingDataFrontend = prepareProfilingDataFrontendFromExport(
-    (parsedProfilingDataExport: any)
+    (parsedProfilingDataExport: any),
   );
 
   // Sanity check that profiling snapshots are serialized correctly.
diff --git a/packages/react-devtools-shared/src/backend/NativeStyleEditor/resolveBoxStyle.js b/packages/react-devtools-shared/src/backend/NativeStyleEditor/resolveBoxStyle.js
index 0609272dc9050..3a25494131520 100644
--- a/packages/react-devtools-shared/src/backend/NativeStyleEditor/resolveBoxStyle.js
+++ b/packages/react-devtools-shared/src/backend/NativeStyleEditor/resolveBoxStyle.js
@@ -1,6 +1,6 @@
 // @flow
 
-import type { BoxStyle } from './types';
+import type {BoxStyle} from './types';
 
 /**
  * This mirrors react-native/Libraries/Inspector/resolveBoxStyle.js (but without RTL support).
@@ -12,7 +12,7 @@ import type { BoxStyle } from './types';
  */
 export default function resolveBoxStyle(
   prefix: string,
-  style: Object
+  style: Object,
 ): BoxStyle | null {
   let hasParts = false;
   const result = {
diff --git a/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js b/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js
index 7568b6cc45459..7f72b8cbf3865 100644
--- a/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js
+++ b/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js
@@ -3,9 +3,9 @@
 import Agent from 'react-devtools-shared/src/backend/agent';
 import resolveBoxStyle from './resolveBoxStyle';
 
-import type { BackendBridge } from 'react-devtools-shared/src/bridge';
-import type { RendererID } from '../types';
-import type { StyleAndLayout } from './types';
+import type {BackendBridge} from 'react-devtools-shared/src/bridge';
+import type {RendererID} from '../types';
+import type {StyleAndLayout} from './types';
 
 export type ResolveNativeStyle = (stylesheetID: any) => ?Object;
 
@@ -13,13 +13,13 @@ export default function setupNativeStyleEditor(
   bridge: BackendBridge,
   agent: Agent,
   resolveNativeStyle: ResolveNativeStyle,
-  validAttributes?: $ReadOnlyArray<string> | null
+  validAttributes?: $ReadOnlyArray<string> | null,
 ) {
   bridge.addListener(
     'NativeStyleEditor_measure',
-    ({ id, rendererID }: {| id: number, rendererID: RendererID |}) => {
+    ({id, rendererID}: {|id: number, rendererID: RendererID|}) => {
       measureStyle(agent, bridge, resolveNativeStyle, id, rendererID);
-    }
+    },
   );
 
   bridge.addListener(
@@ -39,9 +39,9 @@ export default function setupNativeStyleEditor(
     |}) => {
       renameStyle(agent, id, rendererID, oldName, newName, value);
       setTimeout(() =>
-        measureStyle(agent, bridge, resolveNativeStyle, id, rendererID)
+        measureStyle(agent, bridge, resolveNativeStyle, id, rendererID),
       );
-    }
+    },
   );
 
   bridge.addListener(
@@ -59,9 +59,9 @@ export default function setupNativeStyleEditor(
     |}) => {
       setStyle(agent, id, rendererID, name, value);
       setTimeout(() =>
-        measureStyle(agent, bridge, resolveNativeStyle, id, rendererID)
+        measureStyle(agent, bridge, resolveNativeStyle, id, rendererID),
       );
-    }
+    },
   );
 
   bridge.send('isNativeStyleEditorSupported', {
@@ -84,9 +84,9 @@ function measureStyle(
   bridge: BackendBridge,
   resolveNativeStyle: ResolveNativeStyle,
   id: number,
-  rendererID: RendererID
+  rendererID: RendererID,
 ) {
-  const data = agent.getInstanceAndStyle({ id, rendererID });
+  const data = agent.getInstanceAndStyle({id, rendererID});
   if (!data || !data.style) {
     bridge.send(
       'NativeStyleEditor_styleAndLayout',
@@ -94,12 +94,12 @@ function measureStyle(
         id,
         layout: null,
         style: null,
-      }: StyleAndLayout)
+      }: StyleAndLayout),
     );
     return;
   }
 
-  const { instance, style } = data;
+  const {instance, style} = data;
 
   let resolvedStyle = resolveNativeStyle(style);
 
@@ -116,7 +116,7 @@ function measureStyle(
         id,
         layout: null,
         style: resolvedStyle || null,
-      }: StyleAndLayout)
+      }: StyleAndLayout),
     );
     return;
   }
@@ -132,12 +132,16 @@ function measureStyle(
           id,
           layout: null,
           style: resolvedStyle || null,
-        }: StyleAndLayout)
+        }: StyleAndLayout),
       );
       return;
     }
-    const margin = resolvedStyle != null && resolveBoxStyle('margin', resolvedStyle) || EMPTY_BOX_STYLE;
-    const padding = resolvedStyle != null && resolveBoxStyle('padding', resolvedStyle) || EMPTY_BOX_STYLE;
+    const margin =
+      (resolvedStyle != null && resolveBoxStyle('margin', resolvedStyle)) ||
+      EMPTY_BOX_STYLE;
+    const padding =
+      (resolvedStyle != null && resolveBoxStyle('padding', resolvedStyle)) ||
+      EMPTY_BOX_STYLE;
     bridge.send(
       'NativeStyleEditor_styleAndLayout',
       ({
@@ -153,7 +157,7 @@ function measureStyle(
           padding,
         },
         style: resolvedStyle || null,
-      }: StyleAndLayout)
+      }: StyleAndLayout),
     );
   });
 }
@@ -172,18 +176,18 @@ function renameStyle(
   rendererID: RendererID,
   oldName: string,
   newName: string,
-  value: string
+  value: string,
 ): void {
-  const data = agent.getInstanceAndStyle({ id, rendererID });
+  const data = agent.getInstanceAndStyle({id, rendererID});
   if (!data || !data.style) {
     return;
   }
 
-  const { instance, style } = data;
+  const {instance, style} = data;
 
   const newStyle = newName
-    ? { [oldName]: undefined, [newName]: value }
-    : { [oldName]: undefined };
+    ? {[oldName]: undefined, [newName]: value}
+    : {[oldName]: undefined};
 
   let customStyle;
 
@@ -198,7 +202,7 @@ function renameStyle(
       Object.assign(styleOverrides, newStyle);
     }
     // TODO Fabric does not support setNativeProps; chat with Sebastian or Eli
-    instance.setNativeProps({ style: newStyle });
+    instance.setNativeProps({style: newStyle});
   } else if (Array.isArray(style)) {
     const lastIndex = style.length - 1;
     if (
@@ -259,15 +263,15 @@ function setStyle(
   id: number,
   rendererID: RendererID,
   name: string,
-  value: string
+  value: string,
 ) {
-  const data = agent.getInstanceAndStyle({ id, rendererID });
+  const data = agent.getInstanceAndStyle({id, rendererID});
   if (!data || !data.style) {
     return;
   }
 
-  const { instance, style } = data;
-  const newStyle = { [name]: value };
+  const {instance, style} = data;
+  const newStyle = {[name]: value};
 
   // TODO It would be nice if the renderer interface abstracted this away somehow.
   if (instance !== null && typeof instance.setNativeProps === 'function') {
@@ -280,7 +284,7 @@ function setStyle(
       Object.assign(styleOverrides, newStyle);
     }
     // TODO Fabric does not support setNativeProps; chat with Sebastian or Eli
-    instance.setNativeProps({ style: newStyle });
+    instance.setNativeProps({style: newStyle});
   } else if (Array.isArray(style)) {
     const lastLength = style.length - 1;
     if (
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index eb72e0bfd3e01..fd79433352bbe 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -14,9 +14,9 @@ import {
   sessionStorageSetItem,
 } from 'react-devtools-shared/src/storage';
 import setupHighlighter from './views/Highlighter';
-import { patch as patchConsole, unpatch as unpatchConsole } from './console';
+import {patch as patchConsole, unpatch as unpatchConsole} from './console';
 
-import type { BackendBridge } from 'react-devtools-shared/src/bridge';
+import type {BackendBridge} from 'react-devtools-shared/src/bridge';
 import type {
   InstanceAndStyle,
   NativeType,
@@ -26,7 +26,7 @@ import type {
   RendererID,
   RendererInterface,
 } from './types';
-import type { ComponentFilter } from '../types';
+import type {ComponentFilter} from '../types';
 
 const debug = (methodName, ...args) => {
   if (__DEBUG__) {
@@ -34,7 +34,7 @@ const debug = (methodName, ...args) => {
       `%cAgent %c${methodName}`,
       'color: purple; font-weight: bold;',
       'font-weight: bold;',
-      ...args
+      ...args,
     );
   }
 };
@@ -84,7 +84,7 @@ export default class Agent extends EventEmitter<{|
   _bridge: BackendBridge;
   _isProfiling: boolean = false;
   _recordChangeDescriptions: boolean = false;
-  _rendererInterfaces: { [key: RendererID]: RendererInterface } = {};
+  _rendererInterfaces: {[key: RendererID]: RendererInterface} = {};
   _persistedSelection: PersistedSelection | null = null;
   _persistedSelectionMatch: PathMatch | null = null;
 
@@ -96,7 +96,7 @@ export default class Agent extends EventEmitter<{|
     ) {
       this._recordChangeDescriptions =
         sessionStorageGetItem(
-          SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY
+          SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
         ) === 'true';
       this._isProfiling = true;
 
@@ -105,7 +105,7 @@ export default class Agent extends EventEmitter<{|
     }
 
     const persistedSelectionString = sessionStorageGetItem(
-      SESSION_STORAGE_LAST_SELECTION_KEY
+      SESSION_STORAGE_LAST_SELECTION_KEY,
     );
     if (persistedSelectionString != null) {
       this._persistedSelection = JSON.parse(persistedSelectionString);
@@ -128,12 +128,12 @@ export default class Agent extends EventEmitter<{|
     bridge.addListener('stopProfiling', this.stopProfiling);
     bridge.addListener(
       'syncSelectionFromNativeElementsPanel',
-      this.syncSelectionFromNativeElementsPanel
+      this.syncSelectionFromNativeElementsPanel,
     );
     bridge.addListener('shutdown', this.shutdown);
     bridge.addListener(
       'updateAppendComponentStack',
-      this.updateAppendComponentStack
+      this.updateAppendComponentStack,
     );
     bridge.addListener('updateComponentFilters', this.updateComponentFilters);
     bridge.addListener('viewElementSource', this.viewElementSource);
@@ -154,7 +154,7 @@ export default class Agent extends EventEmitter<{|
     setupHighlighter(bridge, this);
   }
 
-  get rendererInterfaces(): { [key: RendererID]: RendererInterface } {
+  get rendererInterfaces(): {[key: RendererID]: RendererInterface} {
     return this._rendererInterfaces;
   }
 
@@ -189,7 +189,7 @@ export default class Agent extends EventEmitter<{|
     return null;
   }
 
-  getProfilingData = ({ rendererID }: {| rendererID: RendererID |}) => {
+  getProfilingData = ({rendererID}: {|rendererID: RendererID|}) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}"`);
@@ -202,17 +202,17 @@ export default class Agent extends EventEmitter<{|
     this._bridge.send('profilingStatus', this._isProfiling);
   };
 
-  getOwnersList = ({ id, rendererID }: ElementAndRendererID) => {
+  getOwnersList = ({id, rendererID}: ElementAndRendererID) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
     } else {
       const owners = renderer.getOwnersList(id);
-      this._bridge.send('ownersList', ({ id, owners }: OwnersList));
+      this._bridge.send('ownersList', ({id, owners}: OwnersList));
     }
   };
 
-  inspectElement = ({ id, path, rendererID }: InspectElementParams) => {
+  inspectElement = ({id, path, rendererID}: InspectElementParams) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -239,7 +239,7 @@ export default class Agent extends EventEmitter<{|
     }
   };
 
-  logElementToConsole = ({ id, rendererID }: ElementAndRendererID) => {
+  logElementToConsole = ({id, rendererID}: ElementAndRendererID) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -252,7 +252,7 @@ export default class Agent extends EventEmitter<{|
     sessionStorageSetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY, 'true');
     sessionStorageSetItem(
       SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
-      recordChangeDescriptions ? 'true' : 'false'
+      recordChangeDescriptions ? 'true' : 'false',
     );
 
     // This code path should only be hit if the shell has explicitly told the Store that it supports profiling.
@@ -261,7 +261,7 @@ export default class Agent extends EventEmitter<{|
     this._bridge.send('reloadAppForProfiling');
   };
 
-  overrideContext = ({ id, path, rendererID, value }: SetInParams) => {
+  overrideContext = ({id, path, rendererID, value}: SetInParams) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -285,7 +285,7 @@ export default class Agent extends EventEmitter<{|
     }
   };
 
-  overrideProps = ({ id, path, rendererID, value }: SetInParams) => {
+  overrideProps = ({id, path, rendererID, value}: SetInParams) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -294,7 +294,7 @@ export default class Agent extends EventEmitter<{|
     }
   };
 
-  overrideState = ({ id, path, rendererID, value }: SetInParams) => {
+  overrideState = ({id, path, rendererID, value}: SetInParams) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -325,7 +325,7 @@ export default class Agent extends EventEmitter<{|
 
   setRendererInterface(
     rendererID: RendererID,
-    rendererInterface: RendererInterface
+    rendererInterface: RendererInterface,
   ) {
     this._rendererInterfaces[rendererID] = rendererInterface;
 
@@ -400,7 +400,7 @@ export default class Agent extends EventEmitter<{|
     }
   };
 
-  viewElementSource = ({ id, rendererID }: ElementAndRendererID) => {
+  viewElementSource = ({id, rendererID}: ElementAndRendererID) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -476,7 +476,7 @@ export default class Agent extends EventEmitter<{|
     if (path !== null) {
       sessionStorageSetItem(
         SESSION_STORAGE_LAST_SELECTION_KEY,
-        JSON.stringify(({ rendererID, path }: PersistedSelection))
+        JSON.stringify(({rendererID, path}: PersistedSelection)),
       );
     } else {
       sessionStorageRemoveItem(SESSION_STORAGE_LAST_SELECTION_KEY);
diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js
index 22f5db951541c..8bcc242a5848b 100644
--- a/packages/react-devtools-shared/src/backend/console.js
+++ b/packages/react-devtools-shared/src/backend/console.js
@@ -1,9 +1,9 @@
 // @flow
 
-import { getInternalReactConstants } from './renderer';
+import {getInternalReactConstants} from './renderer';
 import describeComponentFrame from './describeComponentFrame';
 
-import type { Fiber, ReactRenderer } from './types';
+import type {Fiber, ReactRenderer} from './types';
 
 const APPEND_STACK_TO_METHODS = ['error', 'trace', 'warn'];
 
@@ -14,7 +14,7 @@ const injectedRenderers: Map<
   {|
     getCurrentFiber: () => Fiber | null,
     getDisplayNameForFiber: (fiber: Fiber) => string | null,
-  |}
+  |},
 > = new Map();
 
 let targetConsole: Object = console;
@@ -27,7 +27,7 @@ let unpatchFn: null | (() => void) = null;
 
 // Enables e.g. Jest tests to inject a mock console object.
 export function dangerous_setTargetConsoleForTesting(
-  targetConsoleForTesting: Object
+  targetConsoleForTesting: Object,
 ): void {
   targetConsole = targetConsoleForTesting;
 
@@ -41,7 +41,7 @@ export function dangerous_setTargetConsoleForTesting(
 // These internals will be used if the console is patched.
 // Injecting them separately allows the console to easily be patched or unpacted later (at runtime).
 export function registerRenderer(renderer: ReactRenderer): void {
-  const { getCurrentFiber, findFiberByHostInstance, version } = renderer;
+  const {getCurrentFiber, findFiberByHostInstance, version} = renderer;
 
   // Ignore React v15 and older because they don't expose a component stack anyway.
   if (typeof findFiberByHostInstance !== 'function') {
@@ -49,7 +49,7 @@ export function registerRenderer(renderer: ReactRenderer): void {
   }
 
   if (typeof getCurrentFiber === 'function') {
-    const { getDisplayNameForFiber } = getInternalReactConstants(version);
+    const {getDisplayNameForFiber} = getInternalReactConstants(version);
 
     injectedRenderers.set(renderer, {
       getCurrentFiber,
@@ -107,7 +107,7 @@ export function patch(): void {
                 ownerStack += describeComponentFrame(
                   name,
                   current._debugSource,
-                  ownerName
+                  ownerName,
                 );
 
                 current = owner;
diff --git a/packages/react-devtools-shared/src/backend/describeComponentFrame.js b/packages/react-devtools-shared/src/backend/describeComponentFrame.js
index 5c632471babc1..849e9bc1f4da4 100644
--- a/packages/react-devtools-shared/src/backend/describeComponentFrame.js
+++ b/packages/react-devtools-shared/src/backend/describeComponentFrame.js
@@ -10,7 +10,7 @@ const BEFORE_SLASH_RE = /^(.*)[\\/]/;
 export default function describeComponentFrame(
   name: null | string,
   source: any,
-  ownerName: null | string
+  ownerName: null | string,
 ) {
   let sourceInfo = '';
   if (source) {
diff --git a/packages/react-devtools-shared/src/backend/index.js b/packages/react-devtools-shared/src/backend/index.js
index feee4c00dedd8..98aece0a856f8 100644
--- a/packages/react-devtools-shared/src/backend/index.js
+++ b/packages/react-devtools-shared/src/backend/index.js
@@ -2,15 +2,15 @@
 
 import Agent from './agent';
 
-import { attach } from './renderer';
-import { attach as attachLegacy } from './legacy/renderer';
+import {attach} from './renderer';
+import {attach as attachLegacy} from './legacy/renderer';
 
-import type { DevToolsHook, ReactRenderer, RendererInterface } from './types';
+import type {DevToolsHook, ReactRenderer, RendererInterface} from './types';
 
 export function initBackend(
   hook: DevToolsHook,
   agent: Agent,
-  global: Object
+  global: Object,
 ): () => void {
   const subs = [
     hook.sub(
@@ -29,7 +29,7 @@ export function initBackend(
         // Now that the Store and the renderer interface are connected,
         // it's time to flush the pending operation codes to the frontend.
         rendererInterface.flushInitialOperations();
-      }
+      },
     ),
 
     hook.sub('operations', agent.onHookOperations),
@@ -69,10 +69,10 @@ export function initBackend(
   subs.push(
     hook.sub(
       'renderer',
-      ({ id, renderer }: { id: number, renderer: ReactRenderer }) => {
+      ({id, renderer}: {id: number, renderer: ReactRenderer}) => {
         attachRenderer(id, renderer);
-      }
-    )
+      },
+    ),
   );
 
   hook.emit('react-devtools', agent);
diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
index 4fff97a5fbf0a..a892bdedcd5de 100644
--- a/packages/react-devtools-shared/src/backend/legacy/renderer.js
+++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js
@@ -7,16 +7,16 @@ import {
   ElementTypeHostComponent,
   ElementTypeOtherOrUnknown,
 } from 'react-devtools-shared/src/types';
-import { getUID, utfEncodeString, printOperationsArray } from '../../utils';
-import { cleanForBridge, copyWithSet } from '../utils';
-import { getDisplayName } from 'react-devtools-shared/src/utils';
+import {getUID, utfEncodeString, printOperationsArray} from '../../utils';
+import {cleanForBridge, copyWithSet} from '../utils';
+import {getDisplayName} from 'react-devtools-shared/src/utils';
 import {
   __DEBUG__,
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
   TREE_OPERATION_REORDER_CHILDREN,
 } from '../../constants';
-import { decorateMany, forceUpdate, restoreMany } from './utils';
+import {decorateMany, forceUpdate, restoreMany} from './utils';
 
 import type {
   DevToolsHook,
@@ -28,8 +28,11 @@ import type {
   PathMatch,
   RendererInterface,
 } from '../types';
-import type { ComponentFilter, ElementType } from 'react-devtools-shared/src/types';
-import type { Owner, InspectedElement } from '../types';
+import type {
+  ComponentFilter,
+  ElementType,
+} from 'react-devtools-shared/src/types';
+import type {Owner, InspectedElement} from '../types';
 
 export type InternalInstance = Object;
 type LegacyRenderer = Object;
@@ -112,16 +115,16 @@ export function attach(
   hook: DevToolsHook,
   rendererID: number,
   renderer: LegacyRenderer,
-  global: Object
+  global: Object,
 ): RendererInterface {
   const idToInternalInstanceMap: Map<number, InternalInstance> = new Map();
   const internalInstanceToIDMap: WeakMap<
     InternalInstance,
-    number
+    number,
   > = new WeakMap();
   const internalInstanceToRootIDMap: WeakMap<
     InternalInstance,
-    number
+    number,
   > = new WeakMap();
 
   let getInternalIDForNative: GetFiberIDForNative = ((null: any): GetFiberIDForNative);
@@ -130,7 +133,7 @@ export function attach(
   if (renderer.ComponentTree) {
     getInternalIDForNative = (node, findNearestUnfilteredAncestor) => {
       const internalInstance = renderer.ComponentTree.getClosestInstanceFromNode(
-        node
+        node,
       );
       return internalInstanceToIDMap.get(internalInstance) || null;
     };
@@ -203,7 +206,7 @@ export function attach(
         // Remember the root.
         internalInstanceToRootIDMap.set(
           internalInstance,
-          getID(hostContainerInfo._topLevelWrapper)
+          getID(hostContainerInfo._topLevelWrapper),
         );
 
         try {
@@ -337,7 +340,7 @@ export function attach(
   function recordMount(
     internalInstance: InternalInstance,
     id: number,
-    parentID: number
+    parentID: number,
   ) {
     const isRoot = parentID === 0;
 
@@ -346,7 +349,7 @@ export function attach(
         '%crecordMount()',
         'color: green; font-weight: bold;',
         id,
-        getData(internalInstance).displayName
+        getData(internalInstance).displayName,
       );
     }
 
@@ -363,7 +366,7 @@ export function attach(
       pushOperation(hasOwnerMetadata ? 1 : 0);
     } else {
       const type = getElementType(internalInstance);
-      const { displayName, key } = getData(internalInstance);
+      const {displayName, key} = getData(internalInstance);
 
       const ownerID =
         internalInstance._currentElement != null &&
@@ -386,7 +389,7 @@ export function attach(
   function recordReorder(
     internalInstance: InternalInstance,
     id: number,
-    nextChildren: Array<InternalInstance>
+    nextChildren: Array<InternalInstance>,
   ) {
     pushOperation(TREE_OPERATION_REORDER_CHILDREN);
     pushOperation(id);
@@ -405,7 +408,7 @@ export function attach(
   function crawlAndRecordInitialMounts(
     id: number,
     parentID: number,
-    rootID: number
+    rootID: number,
   ) {
     if (__DEBUG__) {
       console.group('crawlAndRecordInitialMounts() id:', id);
@@ -416,7 +419,7 @@ export function attach(
       internalInstanceToRootIDMap.set(internalInstance, rootID);
       recordMount(internalInstance, id, parentID);
       getChildren(internalInstance).forEach(child =>
-        crawlAndRecordInitialMounts(getID(child), id, rootID)
+        crawlAndRecordInitialMounts(getID(child), id, rootID),
       );
     }
 
@@ -469,7 +472,7 @@ export function attach(
         // [TREE_OPERATION_REMOVE, removedIDLength, ...ids]
         (numUnmountIDs > 0 ? 2 + numUnmountIDs : 0) +
         // Mount operations
-        pendingOperations.length
+        pendingOperations.length,
     );
 
     // Identify which renderer this update is coming from.
@@ -532,7 +535,7 @@ export function attach(
       if (!Number.isInteger(op)) {
         console.error(
           'pushOperation() was called but the value is not an integer.',
-          op
+          op,
         );
       }
     }
@@ -641,7 +644,7 @@ export function attach(
 
   function inspectElement(
     id: number,
-    path?: Array<string | number>
+    path?: Array<string | number>,
   ): InspectedElementPayload {
     if (currentlyInspectedElementID !== id) {
       currentlyInspectedElementID = id;
@@ -667,15 +670,15 @@ export function attach(
 
     inspectedElement.context = cleanForBridge(
       inspectedElement.context,
-      createIsPathWhitelisted('context')
+      createIsPathWhitelisted('context'),
     );
     inspectedElement.props = cleanForBridge(
       inspectedElement.props,
-      createIsPathWhitelisted('props')
+      createIsPathWhitelisted('props'),
     );
     inspectedElement.state = cleanForBridge(
       inspectedElement.state,
-      createIsPathWhitelisted('state')
+      createIsPathWhitelisted('state'),
     );
 
     return {
@@ -692,7 +695,7 @@ export function attach(
       return null;
     }
 
-    const { displayName } = getData(internalInstance);
+    const {displayName} = getData(internalInstance);
     const type = getElementType(internalInstance);
 
     let context = null;
@@ -773,7 +776,7 @@ export function attach(
       console.groupCollapsed(
         `[Click to expand] %c<${result.displayName || 'Component'} />`,
         // --dom-tag-name-color is the CSS variable Chrome styles HTML elements with in the console.
-        'color: var(--dom-tag-name-color); font-weight: normal;'
+        'color: var(--dom-tag-name-color); font-weight: normal;',
       );
     }
     if (result.props !== null) {
@@ -791,7 +794,7 @@ export function attach(
     }
     if (window.chrome || /firefox/i.test(navigator.userAgent)) {
       console.log(
-        'Right-click any value to save it as a global variable for further inspection.'
+        'Right-click any value to save it as a global variable for further inspection.',
       );
     }
     if (supportsGroup) {
@@ -854,7 +857,7 @@ export function attach(
     const parent = path.reduce(
       // $FlowFixMe
       (reduced, attr) => (reduced ? reduced[attr] : null),
-      obj
+      obj,
     );
     if (parent) {
       // $FlowFixMe
diff --git a/packages/react-devtools-shared/src/backend/legacy/utils.js b/packages/react-devtools-shared/src/backend/legacy/utils.js
index 9fbe3079355ef..776fa6ae26052 100644
--- a/packages/react-devtools-shared/src/backend/legacy/utils.js
+++ b/packages/react-devtools-shared/src/backend/legacy/utils.js
@@ -1,6 +1,6 @@
 // @flow
 
-import type { InternalInstance } from './renderer';
+import type {InternalInstance} from './renderer';
 
 export function decorate(object: Object, attr: string, fn: Function): Function {
   const old = object[attr];
@@ -12,7 +12,7 @@ export function decorate(object: Object, attr: string, fn: Function): Function {
 
 export function decorateMany(
   source: Object,
-  fns: { [attr: string]: Function }
+  fns: {[attr: string]: Function},
 ): Object {
   const olds = {};
   for (const name in fns) {
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 2effb3344562a..cfedcf883c286 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -1,6 +1,6 @@
 // @flow
 
-import { gte } from 'semver';
+import {gte} from 'semver';
 import {
   ComponentFilterDisplayName,
   ComponentFilterElementType,
@@ -25,8 +25,8 @@ import {
   setInObject,
   utfEncodeString,
 } from 'react-devtools-shared/src/utils';
-import { sessionStorageGetItem } from 'react-devtools-shared/src/storage';
-import { cleanForBridge, copyWithSet } from './utils';
+import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
+import {cleanForBridge, copyWithSet} from './utils';
 import {
   __DEBUG__,
   SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,
@@ -36,7 +36,7 @@ import {
   TREE_OPERATION_REORDER_CHILDREN,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from '../constants';
-import { inspectHooksOfFiber } from 'react-debug-tools';
+import {inspectHooksOfFiber} from 'react-debug-tools';
 import {
   patch as patchConsole,
   registerRenderer as registerRendererWithConsole,
@@ -58,8 +58,11 @@ import type {
   ReactRenderer,
   RendererInterface,
 } from './types';
-import type { Interaction } from 'react-devtools-shared/src/devtools/views/Profiler/types';
-import type { ComponentFilter, ElementType } from 'react-devtools-shared/src/types';
+import type {Interaction} from 'react-devtools-shared/src/devtools/views/Profiler/types';
+import type {
+  ComponentFilter,
+  ElementType,
+} from 'react-devtools-shared/src/types';
 
 type getDisplayNameForFiberType = (fiber: Fiber) => string | null;
 type getTypeSymbolType = (type: any) => Symbol | number;
@@ -138,7 +141,7 @@ const getCurrentTime =
     : () => Date.now();
 
 export function getInternalReactConstants(
-  version: string
+  version: string,
 ): {|
   getDisplayNameForFiber: getDisplayNameForFiberType,
   getTypeSymbol: getTypeSymbolType,
@@ -325,7 +328,7 @@ export function getInternalReactConstants(
 
   // NOTICE Keep in sync with shouldFilterFiber() and other get*ForFiber methods
   function getDisplayNameForFiber(fiber: Fiber): string | null {
-    const { elementType, type, tag } = fiber;
+    const {elementType, type, tag} = fiber;
 
     // This is to support lazy components with a Promise as the type.
     // see https://github.com/facebook/react/pull/13397
@@ -422,7 +425,7 @@ export function attach(
   hook: DevToolsHook,
   rendererID: number,
   renderer: ReactRenderer,
-  global: Object
+  global: Object,
 ): RendererInterface {
   const {
     getDisplayNameForFiber,
@@ -432,7 +435,7 @@ export function attach(
     ReactSymbols,
     ReactTypeOfSideEffect,
   } = getInternalReactConstants(renderer.version);
-  const { NoEffect, PerformedWork, Placement } = ReactTypeOfSideEffect;
+  const {NoEffect, PerformedWork, Placement} = ReactTypeOfSideEffect;
   const {
     FunctionComponent,
     ClassComponent,
@@ -515,7 +518,7 @@ export function attach(
         }`,
         'color: red; font-weight: bold;',
         'color: blue;',
-        'color: purple;'
+        'color: purple;',
       );
     }
   };
@@ -539,7 +542,7 @@ export function attach(
         case ComponentFilterDisplayName:
           if (componentFilter.isValid && componentFilter.value !== '') {
             hideElementsWithDisplayNames.add(
-              new RegExp(componentFilter.value, 'i')
+              new RegExp(componentFilter.value, 'i'),
             );
           }
           break;
@@ -556,7 +559,7 @@ export function attach(
           break;
         default:
           console.warn(
-            `Invalid component filter type "${componentFilter.type}"`
+            `Invalid component filter type "${componentFilter.type}"`,
           );
           break;
       }
@@ -614,7 +617,7 @@ export function attach(
 
   // NOTICE Keep in sync with get*ForFiber methods
   function shouldFilterFiber(fiber: Fiber): boolean {
-    const { _debugSource, tag, type } = fiber;
+    const {_debugSource, tag, type} = fiber;
 
     switch (tag) {
       case DehydratedSuspenseComponent:
@@ -663,7 +666,7 @@ export function attach(
     }
 
     if (_debugSource != null && hideElementsWithPaths.size > 0) {
-      const { fileName } = _debugSource;
+      const {fileName} = _debugSource;
       for (let pathRegExp of hideElementsWithPaths) {
         if (pathRegExp.test(fileName)) {
           return true;
@@ -675,7 +678,7 @@ export function attach(
   }
   // NOTICE Keep in sync with shouldFilterFiber() and other get*ForFiber methods
   function getElementTypeForFiber(fiber: Fiber): ElementType {
-    const { type, tag } = fiber;
+    const {type, tag} = fiber;
 
     switch (tag) {
       case ClassComponent:
@@ -735,7 +738,7 @@ export function attach(
     if (primaryFibers.has(fiber)) {
       return fiber;
     }
-    const { alternate } = fiber;
+    const {alternate} = fiber;
     if (alternate != null && primaryFibers.has(alternate)) {
       return alternate;
     }
@@ -771,7 +774,7 @@ export function attach(
 
   function getChangeDescription(
     prevFiber: Fiber | null,
-    nextFiber: Fiber
+    nextFiber: Fiber,
   ): ChangeDescription | null {
     switch (getElementTypeForFiber(nextFiber)) {
       case ElementTypeClass:
@@ -791,16 +794,16 @@ export function attach(
             context: getContextChangedKeys(nextFiber),
             didHooksChange: didHooksChange(
               prevFiber.memoizedState,
-              nextFiber.memoizedState
+              nextFiber.memoizedState,
             ),
             isFirstMount: false,
             props: getChangedKeys(
               prevFiber.memoizedProps,
-              nextFiber.memoizedProps
+              nextFiber.memoizedProps,
             ),
             state: getChangedKeys(
               prevFiber.memoizedState,
-              nextFiber.memoizedState
+              nextFiber.memoizedState,
             ),
           };
         }
@@ -984,7 +987,7 @@ export function attach(
       if (!Number.isInteger(op)) {
         console.error(
           'pushOperation() was called but the value is not an integer.',
-          op
+          op,
         );
       }
     }
@@ -1022,7 +1025,7 @@ export function attach(
         // [TREE_OPERATION_REMOVE, removedIDLength, ...ids]
         (numUnmountIDs > 0 ? 2 + numUnmountIDs : 0) +
         // Regular operations
-        pendingOperations.length
+        pendingOperations.length,
     );
 
     // Identify which renderer this update is coming from.
@@ -1134,10 +1137,10 @@ export function attach(
         }
       }
     } else {
-      const { key } = fiber;
+      const {key} = fiber;
       const displayName = getDisplayNameForFiber(fiber);
       const elementType = getElementTypeForFiber(fiber);
-      const { _debugOwner } = fiber;
+      const {_debugOwner} = fiber;
 
       const ownerID =
         _debugOwner != null ? getFiberID(getPrimaryFiber(_debugOwner)) : 0;
@@ -1217,7 +1220,7 @@ export function attach(
   function mountFiberRecursively(
     fiber: Fiber,
     parentFiber: Fiber | null,
-    traverseSiblings = false
+    traverseSiblings = false,
   ) {
     if (__DEBUG__) {
       debug('mountFiberRecursively()', fiber, parentFiber);
@@ -1226,7 +1229,7 @@ export function attach(
     // If we have the tree selection from previous reload, try to match this Fiber.
     // Also remember whether to do the same for siblings.
     const mightSiblingsBeOnTrackedPath = updateTrackedPathStateBeforeMount(
-      fiber
+      fiber,
     );
 
     const shouldIncludeInTree = !shouldFilterFiber(fiber);
@@ -1253,7 +1256,7 @@ export function attach(
         mountFiberRecursively(
           fallbackChild,
           shouldIncludeInTree ? fiber : parentFiber,
-          true
+          true,
         );
       }
     } else {
@@ -1261,7 +1264,7 @@ export function attach(
         mountFiberRecursively(
           fiber.child,
           shouldIncludeInTree ? fiber : parentFiber,
-          true
+          true,
         );
       }
     }
@@ -1311,12 +1314,12 @@ export function attach(
 
   function recordProfilingDurations(fiber: Fiber) {
     const id = getFiberID(getPrimaryFiber(fiber));
-    const { actualDuration, treeBaseDuration } = fiber;
+    const {actualDuration, treeBaseDuration} = fiber;
 
     idToTreeBaseDurationMap.set(id, fiber.treeBaseDuration || 0);
 
     if (isProfiling) {
-      const { alternate } = fiber;
+      const {alternate} = fiber;
 
       if (
         alternate == null ||
@@ -1325,7 +1328,7 @@ export function attach(
         // Tree base duration updates are included in the operations typed array.
         // So we have to convert them from milliseconds to microseconds so we can send them as ints.
         const treeBaseDuration = Math.floor(
-          (fiber.treeBaseDuration || 0) * 1000
+          (fiber.treeBaseDuration || 0) * 1000,
         );
         pushOperation(TREE_OPERATION_UPDATE_TREE_BASE_DURATION);
         pushOperation(id);
@@ -1355,7 +1358,7 @@ export function attach(
           metadata.durations.push(id, actualDuration, selfDuration);
           metadata.maxActualDuration = Math.max(
             metadata.maxActualDuration,
-            actualDuration
+            actualDuration,
           );
 
           if (recordChangeDescriptions) {
@@ -1402,7 +1405,7 @@ export function attach(
 
   function findReorderedChildrenRecursively(
     fiber: Fiber,
-    nextChildren: Array<number>
+    nextChildren: Array<number>,
   ) {
     if (!shouldFilterFiber(fiber)) {
       nextChildren.push(getFiberID(getPrimaryFiber(fiber)));
@@ -1419,7 +1422,7 @@ export function attach(
   function updateFiberRecursively(
     nextFiber: Fiber,
     prevFiber: Fiber,
-    parentFiber: Fiber | null
+    parentFiber: Fiber | null,
   ): boolean {
     if (__DEBUG__) {
       debug('updateFiberRecursively()', nextFiber, parentFiber);
@@ -1470,7 +1473,7 @@ export function attach(
         updateFiberRecursively(
           nextFallbackChildSet,
           prevFallbackChildSet,
-          nextFiber
+          nextFiber,
         )
       ) {
         shouldResetChildren = true;
@@ -1519,7 +1522,7 @@ export function attach(
               updateFiberRecursively(
                 nextChild,
                 prevChild,
-                shouldIncludeInTree ? nextFiber : parentFiber
+                shouldIncludeInTree ? nextFiber : parentFiber,
               )
             ) {
               // If a nested tree child order changed but it can't handle its own
@@ -1536,7 +1539,7 @@ export function attach(
           } else {
             mountFiberRecursively(
               nextChild,
-              shouldIncludeInTree ? nextFiber : parentFiber
+              shouldIncludeInTree ? nextFiber : parentFiber,
             );
             shouldResetChildren = true;
           }
@@ -1626,7 +1629,7 @@ export function attach(
               (interaction: Interaction) => ({
                 ...interaction,
                 timestamp: interaction.timestamp - profilingStartTime,
-              })
+              }),
             ),
             maxActualDuration: 0,
             priorityLevel: null,
@@ -1670,7 +1673,7 @@ export function attach(
           (interaction: Interaction) => ({
             ...interaction,
             timestamp: interaction.timestamp - profilingStartTime,
-          })
+          }),
         ),
         maxActualDuration: 0,
         priorityLevel:
@@ -1705,16 +1708,16 @@ export function attach(
 
     if (isProfiling) {
       const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
-        currentRootID
+        currentRootID,
       );
       if (commitProfilingMetadata != null) {
         commitProfilingMetadata.push(
-          ((currentCommitProfilingMetadata: any): CommitProfilingData)
+          ((currentCommitProfilingMetadata: any): CommitProfilingData),
         );
       } else {
         ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).set(
           currentRootID,
-          [((currentCommitProfilingMetadata: any): CommitProfilingData)]
+          [((currentCommitProfilingMetadata: any): CommitProfilingData)],
         );
       }
     }
@@ -1786,7 +1789,7 @@ export function attach(
 
   function getFiberIDForNative(
     hostInstance,
-    findNearestUnfilteredAncestor = false
+    findNearestUnfilteredAncestor = false,
   ) {
     let fiber = renderer.findFiberByHostInstance(hostInstance);
     if (fiber != null) {
@@ -1962,7 +1965,7 @@ export function attach(
           if (!didFindChild) {
             throw Error(
               'Child was not found in either parent set. This indicates a bug ' +
-                'in React related to the return pointer. Please file an issue.'
+                'in React related to the return pointer. Please file an issue.',
             );
           }
         }
@@ -1971,7 +1974,7 @@ export function attach(
       if (a.alternate !== b) {
         throw Error(
           "Return fibers should always be each others' alternates. " +
-            'This error is likely caused by a bug in React. Please file an issue.'
+            'This error is likely caused by a bug in React. Please file an issue.',
         );
       }
     }
@@ -1996,7 +1999,7 @@ export function attach(
       return;
     }
 
-    const { elementType, tag, type } = fiber;
+    const {elementType, tag, type} = fiber;
 
     switch (tag) {
       case ClassComponent:
@@ -2027,7 +2030,7 @@ export function attach(
       return null;
     }
 
-    const { _debugOwner } = fiber;
+    const {_debugOwner} = fiber;
 
     const owners = [
       {
@@ -2065,7 +2068,7 @@ export function attach(
       style = fiber.memoizedProps.style;
     }
 
-    return { instance, style };
+    return {instance, style};
   }
 
   function inspectElementRaw(id: number): InspectedElement | null {
@@ -2146,7 +2149,7 @@ export function attach(
     if (context !== null) {
       // To simplify hydration and display logic for context, wrap in a value object.
       // Otherwise simple values (e.g. strings, booleans) become harder to handle.
-      context = { value: context };
+      context = {value: context};
     }
 
     let owners = null;
@@ -2182,7 +2185,7 @@ export function attach(
       try {
         hooks = inspectHooksOfFiber(
           fiber,
-          (renderer.currentDispatcherRef: any)
+          (renderer.currentDispatcherRef: any),
         );
       } finally {
         // Restore original console functionality.
@@ -2259,7 +2262,7 @@ export function attach(
 
   function createIsPathWhitelisted(
     key: string | null,
-    secondaryCategory: 'hooks' | null
+    secondaryCategory: 'hooks' | null,
   ) {
     // This function helps prevent previously-inspected paths from being dehydrated in updates.
     // This is important to avoid a bad user experience where expanded toggles collapse on update.
@@ -2300,7 +2303,7 @@ export function attach(
   }
 
   function updateSelectedElement(inspectedElement: InspectedElement): void {
-    const { hooks, id, props } = inspectedElement;
+    const {hooks, id, props} = inspectedElement;
 
     let fiber = idToFiberMap.get(id);
     if (fiber == null) {
@@ -2308,7 +2311,7 @@ export function attach(
       return;
     }
 
-    const { elementType, stateNode, tag, type } = fiber;
+    const {elementType, stateNode, tag, type} = fiber;
 
     switch (tag) {
       case ClassComponent:
@@ -2347,7 +2350,7 @@ export function attach(
 
   function inspectElement(
     id: number,
-    path?: Array<string | number>
+    path?: Array<string | number>,
   ): InspectedElementPayload {
     const isCurrent = isMostRecentlyInspectedElementCurrent(id);
 
@@ -2369,10 +2372,10 @@ export function attach(
           value: cleanForBridge(
             getInObject(
               ((mostRecentlyInspectedElement: any): InspectedElement),
-              path
+              path,
             ),
             createIsPathWhitelisted(null, secondaryCategory),
-            path
+            path,
           ),
         };
       } else {
@@ -2413,22 +2416,22 @@ export function attach(
       // Clone before cleaning so that we preserve the full data.
       // This will enable us to send patches without re-inspecting if hydrated paths are requested.
       // (Reducing how often we shallow-render is a better DX for function components that use hooks.)
-      const cleanedInspectedElement = { ...mostRecentlyInspectedElement };
+      const cleanedInspectedElement = {...mostRecentlyInspectedElement};
       cleanedInspectedElement.context = cleanForBridge(
         cleanedInspectedElement.context,
-        createIsPathWhitelisted('context', null)
+        createIsPathWhitelisted('context', null),
       );
       cleanedInspectedElement.hooks = cleanForBridge(
         cleanedInspectedElement.hooks,
-        createIsPathWhitelisted('hooks', 'hooks')
+        createIsPathWhitelisted('hooks', 'hooks'),
       );
       cleanedInspectedElement.props = cleanForBridge(
         cleanedInspectedElement.props,
-        createIsPathWhitelisted('props', null)
+        createIsPathWhitelisted('props', null),
       );
       cleanedInspectedElement.state = cleanForBridge(
         cleanedInspectedElement.state,
-        createIsPathWhitelisted('state', null)
+        createIsPathWhitelisted('state', null),
       );
 
       return {
@@ -2453,7 +2456,7 @@ export function attach(
       console.groupCollapsed(
         `[Click to expand] %c<${result.displayName || 'Component'} />`,
         // --dom-tag-name-color is the CSS variable Chrome styles HTML elements with in the console.
-        'color: var(--dom-tag-name-color); font-weight: normal;'
+        'color: var(--dom-tag-name-color); font-weight: normal;',
       );
     }
     if (result.props !== null) {
@@ -2474,7 +2477,7 @@ export function attach(
     }
     if (window.chrome || /firefox/i.test(navigator.userAgent)) {
       console.log(
-        'Right-click any value to save it as a global variable for further inspection.'
+        'Right-click any value to save it as a global variable for further inspection.',
       );
     }
     if (supportsGroup) {
@@ -2486,7 +2489,7 @@ export function attach(
     id: number,
     index: number,
     path: Array<string | number>,
-    value: any
+    value: any,
   ) {
     const fiber = findCurrentFiberUsingSlowPathById(id);
     if (fiber !== null) {
@@ -2566,7 +2569,7 @@ export function attach(
 
     if (rootToCommitProfilingMetadataMap === null) {
       throw Error(
-        'getProfilingData() called before any profiling data was recorded'
+        'getProfilingData() called before any profiling data was recorded',
       );
     }
 
@@ -2651,7 +2654,7 @@ export function attach(
           interactions: Array.from(allInteractions.entries()),
           rootID,
         });
-      }
+      },
     );
 
     return {
@@ -2680,7 +2683,7 @@ export function attach(
       const rootID = getFiberID(getPrimaryFiber(root.current));
       ((displayNamesByRootID: any): DisplayNamesByRootID).set(
         rootID,
-        getDisplayNameForRoot(root.current)
+        getDisplayNameForRoot(root.current),
       );
 
       if (shouldRecordChangeDescriptions) {
@@ -2707,7 +2710,7 @@ export function attach(
   ) {
     startProfiling(
       sessionStorageGetItem(SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY) ===
-        'true'
+        'true',
     );
   }
 
@@ -2730,7 +2733,7 @@ export function attach(
       typeof scheduleUpdate !== 'function'
     ) {
       throw new Error(
-        'Expected overrideSuspense() to not get called for earlier React versions.'
+        'Expected overrideSuspense() to not get called for earlier React versions.',
       );
     }
     if (forceFallback) {
@@ -2890,7 +2893,7 @@ export function attach(
   }
 
   function getPathFrame(fiber: Fiber): PathFrame {
-    const { key } = fiber;
+    const {key} = fiber;
     let displayName = getDisplayNameForFiber(fiber);
     const index = fiber.index;
     switch (fiber.tag) {
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 2a08164decc21..6a23c0132c7b9 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -1,8 +1,11 @@
 // @flow
 
-import type { ComponentFilter, ElementType } from 'react-devtools-shared/src/types';
-import type { Interaction } from 'react-devtools-shared/src/devtools/views/Profiler/types';
-import type { ResolveNativeStyle } from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
+import type {
+  ComponentFilter,
+  ElementType,
+} from 'react-devtools-shared/src/types';
+import type {Interaction} from 'react-devtools-shared/src/devtools/views/Profiler/types';
+import type {ResolveNativeStyle} from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
 
 type BundleType =
   | 0 // PROD
@@ -50,7 +53,7 @@ export type Fiber = {|
   sibling: Fiber | null,
   index: number,
 
-  ref: null | (((handle: mixed) => void) & { _stringRef: ?string }) | RefObject,
+  ref: null | (((handle: mixed) => void) & {_stringRef: ?string}) | RefObject,
 
   pendingProps: any, // This type will be more specific once we overload the tag.
   memoizedProps: any, // The props used to create the output.
@@ -87,7 +90,7 @@ type Dispatcher = any;
 
 export type GetFiberIDForNative = (
   component: NativeType,
-  findNearestUnfilteredAncestor?: boolean
+  findNearestUnfilteredAncestor?: boolean,
 ) => number | null;
 export type FindNativeNodesForFiberID = (id: number) => ?Array<NativeType>;
 
@@ -122,14 +125,14 @@ export type ReactRenderer = {
     fiber: Object,
     id: number,
     path: Array<string | number>,
-    value: any
+    value: any,
   ) => void,
 
   // 16.7+
   overrideProps?: ?(
     fiber: Object,
     path: Array<string | number>,
-    value: any
+    value: any,
   ) => void,
 
   // 16.9+
@@ -137,7 +140,7 @@ export type ReactRenderer = {
   setSuspenseHandler?: ?(shouldSuspend: (fiber: Object) => boolean) => void,
 
   // Only injected by React v16.8+ in order to support hooks inspection.
-  currentDispatcherRef?: {| current: null | Dispatcher |},
+  currentDispatcherRef?: {|current: null | Dispatcher|},
 
   // Only injected by React v16.9+ in DEV mode.
   // Enables DevTools to append owners-only component stack to error messages.
@@ -293,7 +296,7 @@ export type RendererInterface = {
   handleCommitFiberUnmount: (fiber: Object) => void,
   inspectElement: (
     id: number,
-    path?: Array<string | number>
+    path?: Array<string | number>,
   ) => InspectedElementPayload,
   logElementToConsole: (id: number) => void,
   overrideSuspense: (id: number, forceFallback: boolean) => void,
@@ -304,7 +307,7 @@ export type RendererInterface = {
     id: number,
     index: number,
     path: Array<string | number>,
-    value: any
+    value: any,
   ) => void,
   setInProps: (id: number, path: Array<string | number>, value: any) => void,
   setInState: (id: number, path: Array<string | number>, value: any) => void,
@@ -317,7 +320,7 @@ export type RendererInterface = {
 export type Handler = (data: any) => void;
 
 export type DevToolsHook = {
-  listeners: { [key: string]: Array<Handler> },
+  listeners: {[key: string]: Array<Handler>},
   rendererInterfaces: Map<RendererID, RendererInterface>,
   renderers: Map<RendererID, ReactRenderer>,
 
@@ -339,7 +342,7 @@ export type DevToolsHook = {
   onCommitFiberRoot: (
     rendererID: RendererID,
     fiber: Object,
-    commitPriority?: number
+    commitPriority?: number,
   ) => void,
 };
 
diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js
index 3028805d736e1..af36eb3db7f09 100644
--- a/packages/react-devtools-shared/src/backend/utils.js
+++ b/packages/react-devtools-shared/src/backend/utils.js
@@ -1,13 +1,13 @@
 // @flow
 
-import { dehydrate } from '../hydration';
+import {dehydrate} from '../hydration';
 
-import type { DehydratedData } from 'react-devtools-shared/src/devtools/views/Components/types';
+import type {DehydratedData} from 'react-devtools-shared/src/devtools/views/Components/types';
 
 export function cleanForBridge(
   data: Object | null,
   isPathWhitelisted: (path: Array<string | number>) => boolean,
-  path?: Array<string | number> = []
+  path?: Array<string | number> = [],
 ): DehydratedData | null {
   if (data !== null) {
     const cleaned = [];
@@ -25,14 +25,14 @@ export function copyWithSet(
   obj: Object | Array<any>,
   path: Array<string | number>,
   value: any,
-  index: number = 0
+  index: number = 0,
 ): Object | Array<any> {
   console.log('[utils] copyWithSet()', obj, path, index, value);
   if (index >= path.length) {
     return value;
   }
   const key = path[index];
-  const updated = Array.isArray(obj) ? obj.slice() : { ...obj };
+  const updated = Array.isArray(obj) ? obj.slice() : {...obj};
   // $FlowFixMe number or string is fine here
   updated[key] = copyWithSet(obj[key], path, value, index + 1);
   return updated;
diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js b/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js
index 1d838f8c124fa..8a62e828a866c 100644
--- a/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js
+++ b/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js
@@ -19,7 +19,7 @@ export function hideOverlay() {
 export function showOverlay(
   elements: Array<HTMLElement> | null,
   componentName: string | null,
-  hideAfterTimeout: boolean
+  hideAfterTimeout: boolean,
 ) {
   // TODO (npm-packages) Detect RN and support it somehow
   if (window.document == null) {
diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
index 5e59c2b93ff41..30bd10e261b1b 100644
--- a/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
+++ b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
@@ -11,7 +11,7 @@ type Rect = {
   width: number,
 };
 
-type Box = {| top: number, left: number, width: number, height: number |};
+type Box = {|top: number, left: number, width: number, height: number|};
 
 // Note that the Overlay components are not affected by the active Theme,
 // because they highlight elements in the main Chrome window (outside of devtools).
@@ -211,11 +211,11 @@ export default class Overlay {
       outerBox.top = Math.min(outerBox.top, box.top - dims.marginTop);
       outerBox.right = Math.max(
         outerBox.right,
-        box.left + box.width + dims.marginRight
+        box.left + box.width + dims.marginRight,
       );
       outerBox.bottom = Math.max(
         outerBox.bottom,
-        box.top + box.height + dims.marginBottom
+        box.top + box.height + dims.marginBottom,
       );
       outerBox.left = Math.min(outerBox.left, box.left - dims.marginLeft);
 
@@ -234,11 +234,11 @@ export default class Overlay {
     this.tip.updateText(
       name,
       outerBox.right - outerBox.left,
-      outerBox.bottom - outerBox.top
+      outerBox.bottom - outerBox.top,
     );
     const tipBounds = getNestedBoundingClientRect(
       this.tipBoundsWindow.document.documentElement,
-      this.window
+      this.window,
     );
 
     this.tip.updatePosition(
@@ -253,7 +253,7 @@ export default class Overlay {
         left: tipBounds.left + this.tipBoundsWindow.scrollX,
         height: this.tipBoundsWindow.innerHeight,
         width: this.tipBoundsWindow.innerWidth,
-      }
+      },
     );
   }
 }
@@ -280,7 +280,7 @@ function getFiber(node) {
     return (node: any)[lastFoundInternalKey];
   }
   let internalKey = Object.keys(node).find(
-    key => key.indexOf('__reactInternalInstance') === 0
+    key => key.indexOf('__reactInternalInstance') === 0,
   );
   if (internalKey) {
     lastFoundInternalKey = internalKey;
@@ -322,7 +322,7 @@ function findTipPos(dims, bounds, tipSize) {
   top += 'px';
   left += 'px';
   return {
-    style: { top, left },
+    style: {top, left},
   };
 }
 
@@ -407,7 +407,7 @@ function mergeRectOffsets(rects: Array<Rect>): Rect {
 // taking into account any offsets caused by intermediate iframes.
 function getNestedBoundingClientRect(
   node: HTMLElement,
-  boundaryWindow: typeof window
+  boundaryWindow: typeof window,
 ): Rect {
   const ownerIframe = getOwnerIframe(node);
   if (ownerIframe && ownerIframe !== boundaryWindow) {
diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js
index b8a561fcdeac2..a0c25b2efdfc9 100644
--- a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js
+++ b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js
@@ -3,9 +3,9 @@
 import memoize from 'memoize-one';
 import throttle from 'lodash.throttle';
 import Agent from 'react-devtools-shared/src/backend/agent';
-import { hideOverlay, showOverlay } from './Highlighter';
+import {hideOverlay, showOverlay} from './Highlighter';
 
-import type { BackendBridge } from 'react-devtools-shared/src/bridge';
+import type {BackendBridge} from 'react-devtools-shared/src/bridge';
 
 // This plug-in provides in-page highlighting of the selected element.
 // It is used by the browser extension nad the standalone DevTools shell (when connected to a browser).
@@ -16,11 +16,11 @@ let iframesListeningTo: Set<HTMLIFrameElement> = new Set();
 
 export default function setupHighlighter(
   bridge: BackendBridge,
-  agent: Agent
+  agent: Agent,
 ): void {
   bridge.addListener(
     'clearNativeElementHighlight',
-    clearNativeElementHighlight
+    clearNativeElementHighlight,
   );
   bridge.addListener('highlightNativeElement', highlightNativeElement);
   bridge.addListener('shutdown', stopInspectingNative);
@@ -96,9 +96,9 @@ export default function setupHighlighter(
 
     let nodes: ?Array<HTMLElement> = null;
     if (renderer !== null) {
-      nodes = ((renderer.findNativeNodesForFiberID(
-        id
-      ): any): ?Array<HTMLElement>);
+      nodes = ((renderer.findNativeNodesForFiberID(id): any): ?Array<
+        HTMLElement,
+      >);
     }
 
     if (nodes != null && nodes[0] != null) {
@@ -107,7 +107,7 @@ export default function setupHighlighter(
         // If the node isn't visible show it before highlighting it.
         // We may want to reconsider this; it might be a little disruptive.
         // $FlowFixMe Flow only knows about 'start' | 'end'
-        node.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+        node.scrollIntoView({block: 'nearest', inline: 'nearest'});
       }
 
       showOverlay(nodes, displayName, hideAfterTimeout);
@@ -183,6 +183,6 @@ export default function setupHighlighter(
     200,
     // Don't change the selection in the very first 200ms
     // because those are usually unintentional as you lift the cursor.
-    { leading: false }
+    {leading: false},
   );
 }
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index c0396cb1fb138..8d9d0e6d4bb7f 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -2,18 +2,18 @@
 
 import EventEmitter from 'node-events';
 
-import type { ComponentFilter, Wall } from './types';
+import type {ComponentFilter, Wall} from './types';
 import type {
   InspectedElementPayload,
   OwnersList,
   ProfilingDataBackend,
   RendererID,
 } from 'react-devtools-shared/src/backend/types';
-import type { StyleAndLayout as StyleAndLayoutPayload } from 'react-devtools-shared/src/backend/NativeStyleEditor/types';
+import type {StyleAndLayout as StyleAndLayoutPayload} from 'react-devtools-shared/src/backend/NativeStyleEditor/types';
 
 const BATCH_DURATION = 100;
 
-type ElementAndRendererID = {| id: number, rendererID: RendererID |};
+type ElementAndRendererID = {|id: number, rendererID: RendererID|};
 
 type Message = {|
   event: string,
@@ -79,7 +79,7 @@ type BackendEvents = {|
 
   // React Native style editor plug-in.
   isNativeStyleEditorSupported: [
-    {| isSupported: boolean, validAttributes: ?$ReadOnlyArray<string> |},
+    {|isSupported: boolean, validAttributes: ?$ReadOnlyArray<string>|},
   ],
   NativeStyleEditor_styleAndLayout: [StyleAndLayoutPayload],
 |};
@@ -87,7 +87,7 @@ type BackendEvents = {|
 type FrontendEvents = {|
   clearNativeElementHighlight: [],
   getOwnersList: [ElementAndRendererID],
-  getProfilingData: [{| rendererID: RendererID |}],
+  getProfilingData: [{|rendererID: RendererID|}],
   getProfilingStatus: [],
   highlightNativeElement: [HighlightElementInDOM],
   inspectElement: [InspectElementParams],
@@ -117,7 +117,7 @@ type FrontendEvents = {|
 
 class Bridge<
   OutgoingEvents: Object,
-  IncomingEvents: Object
+  IncomingEvents: Object,
 > extends EventEmitter<{|
   ...IncomingEvents,
   ...OutgoingEvents,
@@ -151,7 +151,7 @@ class Bridge<
   ) {
     if (this._isShutdown) {
       console.warn(
-        `Cannot send message "${event}" through a Bridge that has been shutdown.`
+        `Cannot send message "${event}" through a Bridge that has been shutdown.`,
       );
       return;
     }
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 4fa9fbbc95bcb..c538ddbfb60fe 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -57,4 +57,4 @@ try {
   COMPACT_LINE_HEIGHT = 10;
 }
 
-export { COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT };
+export {COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT};
diff --git a/packages/react-devtools-shared/src/devtools/ProfilerStore.js b/packages/react-devtools-shared/src/devtools/ProfilerStore.js
index e60233d8a17bb..4967ef1b38a9e 100644
--- a/packages/react-devtools-shared/src/devtools/ProfilerStore.js
+++ b/packages/react-devtools-shared/src/devtools/ProfilerStore.js
@@ -1,12 +1,12 @@
 // @flow
 
 import EventEmitter from 'node-events';
-import { prepareProfilingDataFrontendFromBackendAndStore } from './views/Profiler/utils';
+import {prepareProfilingDataFrontendFromBackendAndStore} from './views/Profiler/utils';
 import ProfilingCache from './ProfilingCache';
 import Store from './store';
 
-import type { FrontendBridge } from 'react-devtools-shared/src/bridge';
-import type { ProfilingDataBackend } from 'react-devtools-shared/src/backend/types';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {ProfilingDataBackend} from 'react-devtools-shared/src/backend/types';
 import type {
   CommitDataFrontend,
   ProfilingDataForRootFrontend,
@@ -71,7 +71,7 @@ export default class ProfilerStore extends EventEmitter<{|
   constructor(
     bridge: FrontendBridge,
     store: Store,
-    defaultIsProfiling: boolean
+    defaultIsProfiling: boolean,
   ) {
     super();
 
@@ -103,7 +103,7 @@ export default class ProfilerStore extends EventEmitter<{|
     }
 
     throw Error(
-      `Could not find commit data for root "${rootID}" and commit ${commitIndex}`
+      `Could not find commit data for root "${rootID}" and commit ${commitIndex}`,
     );
   }
 
@@ -143,7 +143,7 @@ export default class ProfilerStore extends EventEmitter<{|
   set profilingData(value: ProfilingDataFrontend | null): void {
     if (this._isProfiling) {
       console.warn(
-        'Profiling data cannot be updated while profiling is in progress.'
+        'Profiling data cannot be updated while profiling is in progress.',
       );
       return;
     }
@@ -193,7 +193,7 @@ export default class ProfilerStore extends EventEmitter<{|
 
   _takeProfilingSnapshotRecursive = (
     elementID: number,
-    profilingSnapshots: Map<number, SnapshotNode>
+    profilingSnapshots: Map<number, SnapshotNode>,
   ) => {
     const element = this._store.getElementByID(elementID);
     if (element !== null) {
@@ -207,7 +207,7 @@ export default class ProfilerStore extends EventEmitter<{|
       profilingSnapshots.set(elementID, snapshotNode);
 
       element.children.forEach(childID =>
-        this._takeProfilingSnapshotRecursive(childID, profilingSnapshots)
+        this._takeProfilingSnapshotRecursive(childID, profilingSnapshots),
       );
     }
   };
@@ -242,11 +242,11 @@ export default class ProfilerStore extends EventEmitter<{|
       return;
     }
 
-    const { rendererID } = dataBackend;
+    const {rendererID} = dataBackend;
 
     if (!this._rendererQueue.has(rendererID)) {
       throw Error(
-        `Unexpected profiling data update from renderer "${rendererID}"`
+        `Unexpected profiling data update from renderer "${rendererID}"`,
       );
     }
 
@@ -257,7 +257,7 @@ export default class ProfilerStore extends EventEmitter<{|
       this._dataFrontend = prepareProfilingDataFrontendFromBackendAndStore(
         this._dataBackends,
         this._inProgressOperationsByRootID,
-        this._initialSnapshotsByRootID
+        this._initialSnapshotsByRootID,
       );
 
       this._dataBackends.splice(0);
@@ -319,7 +319,7 @@ export default class ProfilerStore extends EventEmitter<{|
           if (!this._rendererQueue.has(rendererID)) {
             this._rendererQueue.add(rendererID);
 
-            this._bridge.send('getProfilingData', { rendererID });
+            this._bridge.send('getProfilingData', {rendererID});
           }
         });
 
diff --git a/packages/react-devtools-shared/src/devtools/ProfilingCache.js b/packages/react-devtools-shared/src/devtools/ProfilingCache.js
index 6ffe360efdeee..d84b6dd036034 100644
--- a/packages/react-devtools-shared/src/devtools/ProfilingCache.js
+++ b/packages/react-devtools-shared/src/devtools/ProfilingCache.js
@@ -18,10 +18,10 @@ import {
   invalidateChartData as invalidateRankedChartData,
 } from 'react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder';
 
-import type { CommitTree } from 'react-devtools-shared/src/devtools/views/Profiler/types';
-import type { ChartData as FlamegraphChartData } from 'react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder';
-import type { ChartData as InteractionsChartData } from 'react-devtools-shared/src/devtools/views/Profiler/InteractionsChartBuilder';
-import type { ChartData as RankedChartData } from 'react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder';
+import type {CommitTree} from 'react-devtools-shared/src/devtools/views/Profiler/types';
+import type {ChartData as FlamegraphChartData} from 'react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder';
+import type {ChartData as InteractionsChartData} from 'react-devtools-shared/src/devtools/views/Profiler/InteractionsChartBuilder';
+import type {ChartData as RankedChartData} from 'react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder';
 
 export default class ProfilingCache {
   _fiberCommits: Map<number, Array<number>> = new Map();
diff --git a/packages/react-devtools-shared/src/devtools/cache.js b/packages/react-devtools-shared/src/devtools/cache.js
index 1e1279803093b..6c2abe0d8934b 100644
--- a/packages/react-devtools-shared/src/devtools/cache.js
+++ b/packages/react-devtools-shared/src/devtools/cache.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { createContext } from 'react';
+import React, {createContext} from 'react';
 
 // Cache implementation was forked from the React repo:
 // https://github.com/facebook/react/blob/master/packages/react-cache/src/ReactCache.js
@@ -58,7 +58,7 @@ function readContext(Context, observedBits) {
     throw new Error(
       'react-cache: read and preload may only be called from within a ' +
         "component's render. They are not supported in event handlers or " +
-        'lifecycle methods.'
+        'lifecycle methods.',
     );
   }
   return dispatcher.readContext(Context, observedBits);
@@ -72,12 +72,12 @@ type Config = {
 
 const entries: Map<
   Resource<any, any, any>,
-  Map<any, any> | WeakMap<any, any>
+  Map<any, any> | WeakMap<any, any>,
 > = new Map();
 const resourceConfigs: Map<Resource<any, any, any>, Config> = new Map();
 
 function getEntriesForResource(
-  resource: any
+  resource: any,
 ): Map<any, any> | WeakMap<any, any> {
   let entriesForResource = ((entries.get(resource): any): Map<any, any>);
   if (entriesForResource === undefined) {
@@ -93,7 +93,7 @@ function accessResult<Input, Key, Value>(
   resource: any,
   fetch: Input => Thenable<Value>,
   input: Input,
-  key: Key
+  key: Key,
 ): Result<Value> {
   const entriesForResource = getEntriesForResource(resource);
   const entry = entriesForResource.get(key);
@@ -113,7 +113,7 @@ function accessResult<Input, Key, Value>(
           rejectedResult.status = Rejected;
           rejectedResult.value = error;
         }
-      }
+      },
     );
     const newResult: PendingResult = {
       status: Pending,
@@ -129,7 +129,7 @@ function accessResult<Input, Key, Value>(
 export function createResource<Input, Key, Value>(
   fetch: Input => Thenable<Value>,
   hashInput: Input => Key,
-  config?: Config = {}
+  config?: Config = {},
 ): Resource<Input, Key, Value> {
   const resource = {
     clear(): void {
diff --git a/packages/react-devtools-shared/src/devtools/index.js b/packages/react-devtools-shared/src/devtools/index.js
index 7e5c8b76b2e82..df7a644d16833 100644
--- a/packages/react-devtools-shared/src/devtools/index.js
+++ b/packages/react-devtools-shared/src/devtools/index.js
@@ -1,6 +1,6 @@
 // @flow
 
-import type { FrontendBridge } from 'react-devtools-shared/src/bridge';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 
 type Shell = {|
   connect: (callback: Function) => void,
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index 6dc4fd2334997..5a8e844107b1c 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -1,14 +1,14 @@
 // @flow
 
 import EventEmitter from 'node-events';
-import { inspect } from 'util';
+import {inspect} from 'util';
 import {
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
   TREE_OPERATION_REORDER_CHILDREN,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from '../constants';
-import { ElementTypeRoot } from '../types';
+import {ElementTypeRoot} from '../types';
 import {
   getSavedComponentFilters,
   saveComponentFilters,
@@ -16,14 +16,14 @@ import {
   shallowDiffers,
   utfDecodeString,
 } from '../utils';
-import { localStorageGetItem, localStorageSetItem } from '../storage';
-import { __DEBUG__ } from '../constants';
-import { printStore } from './utils';
+import {localStorageGetItem, localStorageSetItem} from '../storage';
+import {__DEBUG__} from '../constants';
+import {printStore} from './utils';
 import ProfilerStore from './ProfilerStore';
 
-import type { Element } from './views/Components/types';
-import type { ComponentFilter, ElementType } from '../types';
-import type { FrontendBridge } from 'react-devtools-shared/src/bridge';
+import type {Element} from './views/Components/types';
+import type {ComponentFilter, ElementType} from '../types';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 
 const debug = (methodName, ...args) => {
   if (__DEBUG__) {
@@ -31,7 +31,7 @@ const debug = (methodName, ...args) => {
       `%cStore %c${methodName}`,
       'color: green; font-weight: bold;',
       'font-weight: bold;',
-      ...args
+      ...args,
     );
   }
 };
@@ -161,16 +161,16 @@ export default class Store extends EventEmitter<{|
     bridge.addListener('operations', this.onBridgeOperations);
     bridge.addListener(
       'overrideComponentFilters',
-      this.onBridgeOverrideComponentFilters
+      this.onBridgeOverrideComponentFilters,
     );
     bridge.addListener('shutdown', this.onBridgeShutdown);
     bridge.addListener(
       'isBackendStorageAPISupported',
-      this.onBridgeStorageSupported
+      this.onBridgeStorageSupported,
     );
     bridge.addListener(
       'isNativeStyleEditorSupported',
-      this.onBridgeNativeStyleEditorSupported
+      this.onBridgeNativeStyleEditorSupported,
     );
 
     this._profilerStore = new ProfilerStore(bridge, this, isProfiling);
@@ -187,11 +187,11 @@ export default class Store extends EventEmitter<{|
     // These maps should always be the same size as the number of roots
     this.assertMapSizeMatchesRootCount(
       this._rootIDToCapabilities,
-      '_rootIDToCapabilities'
+      '_rootIDToCapabilities',
     );
     this.assertMapSizeMatchesRootCount(
       this._rootIDToRendererID,
-      '_rootIDToRendererID'
+      '_rootIDToRendererID',
     );
   }
 
@@ -204,7 +204,7 @@ export default class Store extends EventEmitter<{|
           map.size
         } items\n\n${inspect(map, {
           depth: 20,
-        })}`
+        })}`,
       );
     }
   }
@@ -217,7 +217,7 @@ export default class Store extends EventEmitter<{|
 
     localStorageSetItem(
       LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY,
-      value ? 'true' : 'false'
+      value ? 'true' : 'false',
     );
 
     this.emit('collapseNodesByDefault');
@@ -236,10 +236,10 @@ export default class Store extends EventEmitter<{|
     // Filter updates are expensive to apply (since they impact the entire tree).
     // Let's determine if they've changed and avoid doing this work if they haven't.
     const prevEnabledComponentFilters = this._componentFilters.filter(
-      filter => filter.isEnabled
+      filter => filter.isEnabled,
     );
     const nextEnabledComponentFilters = value.filter(
-      filter => filter.isEnabled
+      filter => filter.isEnabled,
     );
     let haveEnabledFiltersChanged =
       prevEnabledComponentFilters.length !== nextEnabledComponentFilters.length;
@@ -293,7 +293,7 @@ export default class Store extends EventEmitter<{|
 
     localStorageSetItem(
       LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
-      value ? 'true' : 'false'
+      value ? 'true' : 'false',
     );
 
     this.emit('recordChangeDescriptions');
@@ -339,7 +339,7 @@ export default class Store extends EventEmitter<{|
       console.warn(
         `Invalid index ${index} specified; store contains ${
           this.numElements
-        } items.`
+        } items.`,
       );
 
       return null;
@@ -417,7 +417,7 @@ export default class Store extends EventEmitter<{|
     while (true) {
       const current = ((this._idToElement.get(currentID): any): Element);
 
-      const { children } = current;
+      const {children} = current;
       for (let i = 0; i < children.length; i++) {
         const childID = children[i];
         if (childID === previousID) {
@@ -474,7 +474,7 @@ export default class Store extends EventEmitter<{|
         const sortedIDs = Array.from(unsortedIDs).sort(
           (idA, idB) =>
             ((this.getIndexOfElementID(idA): any): number) -
-            ((this.getIndexOfElementID(idB): any): number)
+            ((this.getIndexOfElementID(idB): any): number),
         );
 
         // Next we need to determine the appropriate depth for each element in the list.
@@ -506,7 +506,7 @@ export default class Store extends EventEmitter<{|
               throw Error('Invalid owners list');
             }
 
-            list.push({ ...element, depth });
+            list.push({...element, depth});
           }
         });
       }
@@ -573,7 +573,7 @@ export default class Store extends EventEmitter<{|
           const weightDelta = 1 - element.weight;
 
           let parentElement = ((this._idToElement.get(
-            element.parentID
+            element.parentID,
           ): any): Element);
           while (parentElement != null) {
             // We don't need to break on a collapsed parent in the same way as the expand case below.
@@ -599,7 +599,7 @@ export default class Store extends EventEmitter<{|
             const weightDelta = newWeight - oldWeight;
 
             let parentElement = ((this._idToElement.get(
-              currentElement.parentID
+              currentElement.parentID,
             ): any): Element);
             while (parentElement != null) {
               parentElement.weight += weightDelta;
@@ -624,7 +624,7 @@ export default class Store extends EventEmitter<{|
       if (didMutate) {
         let weightAcrossRoots = 0;
         this._roots.forEach(rootID => {
-          const { weight } = ((this.getElementByID(rootID): any): Element);
+          const {weight} = ((this.getElementByID(rootID): any): Element);
           weightAcrossRoots += weight;
         });
         this._weightAcrossRoots = weightAcrossRoots;
@@ -639,7 +639,7 @@ export default class Store extends EventEmitter<{|
 
   _adjustParentTreeWeight = (
     parentElement: Element | null,
-    weightDelta: number
+    weightDelta: number,
   ) => {
     let isInsideCollapsedSubTree = false;
 
@@ -654,7 +654,7 @@ export default class Store extends EventEmitter<{|
       }
 
       parentElement = ((this._idToElement.get(
-        parentElement.parentID
+        parentElement.parentID,
       ): any): Element);
     }
 
@@ -704,7 +704,7 @@ export default class Store extends EventEmitter<{|
     while (i < stringTableEnd) {
       const nextLength = operations[i++];
       const nextString = utfDecodeString(
-        (operations.slice(i, i + nextLength): any)
+        (operations.slice(i, i + nextLength): any),
       );
       stringTable.push(nextString);
       i += nextLength;
@@ -721,7 +721,7 @@ export default class Store extends EventEmitter<{|
 
           if (this._idToElement.has(id)) {
             throw Error(
-              `Cannot add node ${id} because a node with that id is already in the Store.`
+              `Cannot add node ${id} because a node with that id is already in the Store.`,
             );
           }
 
@@ -778,18 +778,18 @@ export default class Store extends EventEmitter<{|
             if (__DEBUG__) {
               debug(
                 'Add',
-                `node ${id} (${displayName || 'null'}) as child of ${parentID}`
+                `node ${id} (${displayName || 'null'}) as child of ${parentID}`,
               );
             }
 
             if (!this._idToElement.has(parentID)) {
               throw Error(
-                `Cannot add child ${id} to parent ${parentID} because parent node was not found in the Store.`
+                `Cannot add child ${id} to parent ${parentID} because parent node was not found in the Store.`,
               );
             }
 
             const parentElement = ((this._idToElement.get(
-              parentID
+              parentID,
             ): any): Element);
             parentElement.children.push(id);
 
@@ -836,14 +836,14 @@ export default class Store extends EventEmitter<{|
 
             if (!this._idToElement.has(id)) {
               throw Error(
-                `Cannot remove node ${id} because no matching node was found in the Store.`
+                `Cannot remove node ${id} because no matching node was found in the Store.`,
               );
             }
 
             i = i + 1;
 
             const element = ((this._idToElement.get(id): any): Element);
-            const { children, ownerID, parentID, weight } = element;
+            const {children, ownerID, parentID, weight} = element;
             if (children.length > 0) {
               throw new Error(`Node ${id} was removed before its children.`);
             }
@@ -868,7 +868,7 @@ export default class Store extends EventEmitter<{|
               parentElement = ((this._idToElement.get(parentID): any): Element);
               if (parentElement === undefined) {
                 throw Error(
-                  `Cannot remove node ${id} from parent ${parentID} because no matching node was found in the Store.`
+                  `Cannot remove node ${id} from parent ${parentID} because no matching node was found in the Store.`,
                 );
               }
               const index = parentElement.children.indexOf(id);
@@ -895,7 +895,7 @@ export default class Store extends EventEmitter<{|
 
           if (!this._idToElement.has(id)) {
             throw Error(
-              `Cannot reorder children for node ${id} because no matching node was found in the Store.`
+              `Cannot reorder children for node ${id} because no matching node was found in the Store.`,
             );
           }
 
@@ -903,7 +903,7 @@ export default class Store extends EventEmitter<{|
           const children = element.children;
           if (children.length !== numChildren) {
             throw Error(
-              `Children cannot be added or removed during a reorder operation.`
+              `Children cannot be added or removed during a reorder operation.`,
             );
           }
 
@@ -915,7 +915,7 @@ export default class Store extends EventEmitter<{|
               const childElement = this._idToElement.get(childID);
               if (childElement == null || childElement.parentID !== id) {
                 console.error(
-                  `Children cannot be added or removed during a reorder operation.`
+                  `Children cannot be added or removed during a reorder operation.`,
                 );
               }
             }
@@ -946,14 +946,14 @@ export default class Store extends EventEmitter<{|
       this._hasOwnerMetadata = false;
       this._supportsProfiling = false;
       this._rootIDToCapabilities.forEach(
-        ({ hasOwnerMetadata, supportsProfiling }) => {
+        ({hasOwnerMetadata, supportsProfiling}) => {
           if (hasOwnerMetadata) {
             this._hasOwnerMetadata = true;
           }
           if (supportsProfiling) {
             this._supportsProfiling = true;
           }
-        }
+        },
       );
 
       this.emit('roots');
@@ -977,7 +977,7 @@ export default class Store extends EventEmitter<{|
   // This action should also override the saved filters too,
   // else reloading the frontend without reloading the backend would leave things out of sync.
   onBridgeOverrideComponentFilters = (
-    componentFilters: Array<ComponentFilter>
+    componentFilters: Array<ComponentFilter>,
   ) => {
     this._componentFilters = componentFilters;
 
@@ -993,7 +993,7 @@ export default class Store extends EventEmitter<{|
     this._bridge.removeListener('shutdown', this.onBridgeShutdown);
     this._bridge.removeListener(
       'isBackendStorageAPISupported',
-      this.onBridgeStorageSupported
+      this.onBridgeStorageSupported,
     );
   };
 
diff --git a/packages/react-devtools-shared/src/devtools/utils.js b/packages/react-devtools-shared/src/devtools/utils.js
index 2f70961ef789a..2979c640b2ec3 100644
--- a/packages/react-devtools-shared/src/devtools/utils.js
+++ b/packages/react-devtools-shared/src/devtools/utils.js
@@ -1,6 +1,6 @@
 // @flow
 
-import type { Element } from './views/Components/types';
+import type {Element} from './views/Components/types';
 import type Store from './store';
 
 export function printElement(element: Element, includeWeight: boolean = false) {
@@ -28,7 +28,10 @@ export function printElement(element: Element, includeWeight: boolean = false) {
     'null'}${key}>${hocs}${suffix}`;
 }
 
-export function printOwnersList(elements: Array<Element>, includeWeight: boolean = false) {
+export function printOwnersList(
+  elements: Array<Element>,
+  includeWeight: boolean = false,
+) {
   return elements
     .map(element => printElement(element, includeWeight))
     .join('\n');
@@ -40,7 +43,7 @@ export function printStore(store: Store, includeWeight: boolean = false) {
   let rootWeight = 0;
 
   store.roots.forEach(rootID => {
-    const { weight } = ((store.getElementByID(rootID): any): Element);
+    const {weight} = ((store.getElementByID(rootID): any): Element);
 
     snapshotLines.push('[root]' + (includeWeight ? ` (${weight})` : ''));
 
@@ -62,7 +65,7 @@ export function printStore(store: Store, includeWeight: boolean = false) {
     throw Error(
       `Inconsistent Store state. Individual root weights (${rootWeight}) do not match total weight (${
         store.numElements
-      })`
+      })`,
     );
   }
 
@@ -71,4 +74,4 @@ export function printStore(store: Store, includeWeight: boolean = false) {
   store.assertExpectedRootMapSizes();
 
   return snapshotLines.join('\n');
-}
\ No newline at end of file
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
index 6c3887fe66645..eea3a5d0d72f0 100644
--- a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
+++ b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
@@ -36,7 +36,7 @@ type Props = {|
   type: IconType,
 |};
 
-export default function ButtonIcon({ className = '', type }: Props) {
+export default function ButtonIcon({className = '', type}: Props) {
   let pathData = null;
   switch (type) {
     case 'add':
@@ -128,8 +128,7 @@ export default function ButtonIcon({ className = '', type }: Props) {
       className={`${styles.ButtonIcon} ${className}`}
       width="24"
       height="24"
-      viewBox="0 0 24 24"
-    >
+      viewBox="0 0 24 24">
       <path d="M0 0h24v24H0z" fill="none" />
       <path fill="currentColor" d={pathData} />
     </svg>
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Badge.js b/packages/react-devtools-shared/src/devtools/views/Components/Badge.js
index 613a32a3961c6..845c06c089c71 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Badge.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Badge.js
@@ -1,10 +1,13 @@
 // @flow
 
-import React, { Fragment } from 'react';
-import { ElementTypeMemo, ElementTypeForwardRef } from 'react-devtools-shared/src/types';
+import React, {Fragment} from 'react';
+import {
+  ElementTypeMemo,
+  ElementTypeForwardRef,
+} from 'react-devtools-shared/src/types';
 import styles from './Badge.css';
 
-import type { ElementType } from 'react-devtools-shared/src/types';
+import type {ElementType} from 'react-devtools-shared/src/types';
 
 type Props = {|
   className?: string,
@@ -12,7 +15,7 @@ type Props = {|
   type: ElementType,
 |};
 
-export default function Badge({ className, hocDisplayNames, type }: Props) {
+export default function Badge({className, hocDisplayNames, type}: Props) {
   let hocDisplayName = null;
   let totalBadgeCount = 0;
   let typeLabel = null;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Components.js b/packages/react-devtools-shared/src/devtools/views/Components/Components.js
index 3b57757a47f7b..503470a85a7e8 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Components.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Components.js
@@ -1,15 +1,15 @@
 // @flow
 
-import React, { Suspense } from 'react';
+import React, {Suspense} from 'react';
 import Tree from './Tree';
 import SelectedElement from './SelectedElement';
-import { InspectedElementContextController } from './InspectedElementContext';
-import { NativeStyleContextController } from './NativeStyleEditor/context';
-import { OwnersListContextController } from './OwnersListContext';
+import {InspectedElementContextController} from './InspectedElementContext';
+import {NativeStyleContextController} from './NativeStyleEditor/context';
+import {OwnersListContextController} from './OwnersListContext';
 import portaledContent from '../portaledContent';
-import { ModalDialog } from '../ModalDialog';
+import {ModalDialog} from '../ModalDialog';
 import SettingsModal from 'react-devtools-shared/src/devtools/views/Settings/SettingsModal';
-import { SettingsModalContextController } from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContext';
+import {SettingsModalContextController} from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContext';
 
 import styles from './Components.css';
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
index 3238315a1572a..116902b9f31e0 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Fragment, useCallback, useRef, useState } from 'react';
+import React, {Fragment, useCallback, useRef, useState} from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import styles from './EditableValue.css';
@@ -29,7 +29,7 @@ export default function EditableValue({
   }
 
   const handleChange = useCallback(
-    ({ target }) => {
+    ({target}) => {
       if (dataType === 'boolean') {
         setEditableValue(target.checked);
         overrideValueFn(path, target.checked);
@@ -38,24 +38,27 @@ export default function EditableValue({
       }
       setHasPendingChanges(true);
     },
-    [dataType, overrideValueFn, path]
+    [dataType, overrideValueFn, path],
   );
 
-  const handleReset = useCallback(() => {
-    setEditableValue(value);
-    setHasPendingChanges(false);
+  const handleReset = useCallback(
+    () => {
+      setEditableValue(value);
+      setHasPendingChanges(false);
 
-    if (inputRef.current !== null) {
-      inputRef.current.focus();
-    }
-  }, [value]);
+      if (inputRef.current !== null) {
+        inputRef.current.focus();
+      }
+    },
+    [value],
+  );
 
   const handleKeyDown = useCallback(
     event => {
       // Prevent keydown events from e.g. change selected element in the tree
       event.stopPropagation();
 
-      const { key } = event;
+      const {key} = event;
 
       if (key === 'Enter') {
         if (dataType === 'number') {
@@ -75,7 +78,7 @@ export default function EditableValue({
         setHasPendingChanges(false);
       }
     },
-    [editableValue, dataType, overrideValueFn, path, value]
+    [editableValue, dataType, overrideValueFn, path, value],
   );
 
   // Render different input types based on the dataType
@@ -125,15 +128,15 @@ export default function EditableValue({
           value={inputValue}
         />
       )}
-      {hasPendingChanges && dataType !== 'boolean' && (
-        <Button
-          className={styles.ResetButton}
-          onClick={handleReset}
-          title="Reset value"
-        >
-          <ButtonIcon type="undo" />
-        </Button>
-      )}
+      {hasPendingChanges &&
+        dataType !== 'boolean' && (
+          <Button
+            className={styles.ResetButton}
+            onClick={handleReset}
+            title="Reset value">
+            <ButtonIcon type="undo" />
+          </Button>
+        )}
     </Fragment>
   );
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.js b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
index a8dfebdb5901e..78e0a02bb560c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Element.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
@@ -1,15 +1,15 @@
 // @flow
 
-import React, { Fragment, useContext, useMemo, useState } from 'react';
+import React, {Fragment, useContext, useMemo, useState} from 'react';
 import Store from 'react-devtools-shared/src/devtools/store';
 import Badge from './Badge';
 import ButtonIcon from '../ButtonIcon';
-import { createRegExp } from '../utils';
-import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
-import { StoreContext } from '../context';
+import {createRegExp} from '../utils';
+import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
+import {StoreContext} from '../context';
 
-import type { ItemData } from './Tree';
-import type { Element } from './types';
+import type {ItemData} from './Tree';
+import type {Element} from './types';
 
 import styles from './Element.css';
 
@@ -19,10 +19,10 @@ type Props = {
   style: Object,
 };
 
-export default function ElementView({ data, index, style }: Props) {
+export default function ElementView({data, index, style}: Props) {
   const store = useContext(StoreContext);
-  const { ownerFlatTree, ownerID, selectedElementID } = useContext(
-    TreeStateContext
+  const {ownerFlatTree, ownerID, selectedElementID} = useContext(
+    TreeStateContext,
   );
   const dispatch = useContext(TreeDispatcherContext);
 
@@ -33,17 +33,17 @@ export default function ElementView({ data, index, style }: Props) {
 
   const [isHovered, setIsHovered] = useState(false);
 
-  const { isNavigatingWithKeyboard, onElementMouseEnter, treeFocused } = data;
+  const {isNavigatingWithKeyboard, onElementMouseEnter, treeFocused} = data;
   const id = element === null ? null : element.id;
   const isSelected = selectedElementID === id;
 
   const handleDoubleClick = () => {
     if (id !== null) {
-      dispatch({ type: 'SELECT_OWNER', payload: id });
+      dispatch({type: 'SELECT_OWNER', payload: id});
     }
   };
 
-  const handleMouseDown = ({ metaKey }) => {
+  const handleMouseDown = ({metaKey}) => {
     if (id !== null) {
       dispatch({
         type: 'SELECT_ELEMENT_BY_ID',
@@ -103,8 +103,7 @@ export default function ElementView({ data, index, style }: Props) {
       onMouseDown={handleMouseDown}
       onDoubleClick={handleDoubleClick}
       style={style}
-      data-depth={depth}
-    >
+      data-depth={depth}>
       {/* This wrapper is used by Tree for measurement purposes. */}
       <div
         className={styles.Wrapper}
@@ -112,8 +111,7 @@ export default function ElementView({ data, index, style }: Props) {
           // Left offset presents the appearance of a nested tree structure.
           // We must use padding rather than margin/left because of the selected background color.
           transform: `translateX(calc(${depth} * var(--indentation-size)))`,
-        }}
-      >
+        }}>
         {ownerID === null ? (
           <ExpandCollapseToggle element={element} store={store} />
         ) : null}
@@ -124,8 +122,7 @@ export default function ElementView({ data, index, style }: Props) {
             <span
               className={styles.KeyValue}
               title={key}
-              onDoubleClick={handleKeyDoubleClick}
-            >
+              onDoubleClick={handleKeyDoubleClick}>
               {key}
             </span>
             "
@@ -152,8 +149,8 @@ type ExpandCollapseToggleProps = {|
   store: Store,
 |};
 
-function ExpandCollapseToggle({ element, store }: ExpandCollapseToggleProps) {
-  const { children, id, isCollapsed } = element;
+function ExpandCollapseToggle({element, store}: ExpandCollapseToggleProps) {
+  const {children, id, isCollapsed} = element;
 
   const toggleCollapsed = event => {
     event.preventDefault();
@@ -176,8 +173,7 @@ function ExpandCollapseToggle({ element, store }: ExpandCollapseToggleProps) {
       className={styles.ExpandCollapseToggle}
       onMouseDown={stopPropagation}
       onClick={toggleCollapsed}
-      onDoubleClick={swallowDoubleClick}
-    >
+      onDoubleClick={swallowDoubleClick}>
       <ButtonIcon type={isCollapsed ? 'collapsed' : 'expanded'} />
     </div>
   );
@@ -188,13 +184,14 @@ type DisplayNameProps = {|
   id: number,
 |};
 
-function DisplayName({ displayName, id }: DisplayNameProps) {
-  const { searchIndex, searchResults, searchText } = useContext(
-    TreeStateContext
+function DisplayName({displayName, id}: DisplayNameProps) {
+  const {searchIndex, searchResults, searchText} = useContext(TreeStateContext);
+  const isSearchResult = useMemo(
+    () => {
+      return searchResults.includes(id);
+    },
+    [id, searchResults],
   );
-  const isSearchResult = useMemo(() => {
-    return searchResults.includes(id);
-  }, [id, searchResults]);
   const isCurrentResult =
     searchIndex !== null && id === searchResults[searchIndex];
 
@@ -218,10 +215,9 @@ function DisplayName({ displayName, id }: DisplayNameProps) {
   children.push(
     <mark
       key="middle"
-      className={isCurrentResult ? styles.CurrentHighlight : styles.Highlight}
-    >
+      className={isCurrentResult ? styles.CurrentHighlight : styles.Highlight}>
       {displayName.slice(startIndex, stopIndex)}
-    </mark>
+    </mark>,
   );
   if (stopIndex < displayName.length) {
     children.push(<span key="end">{displayName.slice(stopIndex)}</span>);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js
index 61fdca7f33d26..d47357839c105 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js
@@ -19,8 +19,7 @@ export default function ExpandCollapseToggle({
     <Button
       className={styles.ExpandCollapseToggle}
       onClick={() => setIsOpen(prevIsOpen => !prevIsOpen)}
-      title={`${isOpen ? 'Collapse' : 'Expand'} prop value`}
-    >
+      title={`${isOpen ? 'Collapse' : 'Expand'} prop value`}>
       <ButtonIcon type={isOpen ? 'expanded' : 'collapsed'} />
     </Button>
   );
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js b/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js
index e88dbdef07f15..0e57e7977266e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js
@@ -1,17 +1,20 @@
 // @flow
 
 import React from 'react';
-import { ElementTypeForwardRef, ElementTypeMemo } from 'react-devtools-shared/src/types';
+import {
+  ElementTypeForwardRef,
+  ElementTypeMemo,
+} from 'react-devtools-shared/src/types';
 import styles from './HocBadges.css';
 
-import type { Element } from './types';
+import type {Element} from './types';
 
 type Props = {|
   element: Element,
 |};
 
-export default function HocBadges({ element }: Props) {
-  const { hocDisplayNames, type } = ((element: any): Element);
+export default function HocBadges({element}: Props) {
+  const {hocDisplayNames, type} = ((element: any): Element);
 
   let typeBadge = null;
   if (type === ElementTypeMemo) {
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js
index c35d0a743e3d7..2bc07bd4d9915 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js
@@ -1,20 +1,20 @@
 // @flow
 
-import { copy } from 'clipboard-js';
-import React, { useCallback, useContext, useState } from 'react';
-import { BridgeContext, StoreContext } from '../context';
+import {copy} from 'clipboard-js';
+import React, {useCallback, useContext, useState} from 'react';
+import {BridgeContext, StoreContext} from '../context';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import EditableValue from './EditableValue';
 import ExpandCollapseToggle from './ExpandCollapseToggle';
-import { InspectedElementContext } from './InspectedElementContext';
+import {InspectedElementContext} from './InspectedElementContext';
 import KeyValue from './KeyValue';
-import { serializeHooksForCopy } from '../utils';
+import {serializeHooksForCopy} from '../utils';
 import styles from './HooksTree.css';
-import { meta } from '../../../hydration';
+import {meta} from '../../../hydration';
 
-import type { InspectPath } from './SelectedElement';
-import type { HooksNode, HooksTree } from 'react-debug-tools/src/ReactDebugHooks';
+import type {InspectPath} from './SelectedElement';
+import type {HooksNode, HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
 
 type HooksTreeViewProps = {|
   canEditHooks: boolean,
@@ -22,13 +22,13 @@ type HooksTreeViewProps = {|
   id: number,
 |};
 
-export function HooksTreeView({ canEditHooks, hooks, id }: HooksTreeViewProps) {
-  const { getInspectedElementPath } = useContext(InspectedElementContext);
+export function HooksTreeView({canEditHooks, hooks, id}: HooksTreeViewProps) {
+  const {getInspectedElementPath} = useContext(InspectedElementContext);
   const inspectPath = useCallback(
     (path: Array<string | number>) => {
       getInspectedElementPath(id, ['hooks', ...path]);
     },
-    [getInspectedElementPath, id]
+    [getInspectedElementPath, id],
   );
   const handleCopy = useCallback(() => copy(serializeHooksForCopy(hooks)), [
     hooks,
@@ -93,14 +93,8 @@ type HookViewProps = {|
   path: Array<string | number>,
 |};
 
-function HookView({
-  canEditHooks,
-  hook,
-  id,
-  inspectPath,
-  path,
-}: HookViewProps) {
-  const { name, id: hookID, isStateEditable, subHooks, value } = hook;
+function HookView({canEditHooks, hook, id, inspectPath, path}: HookViewProps) {
+  const {name, id: hookID, isStateEditable, subHooks, value} = hook;
 
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
@@ -109,7 +103,7 @@ function HookView({
 
   const toggleIsOpen = useCallback(
     () => setIsOpen(prevIsOpen => !prevIsOpen),
-    []
+    [],
   );
 
   if (hook.hasOwnProperty(meta.inspected)) {
@@ -178,8 +172,7 @@ function HookView({
             <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
             <span
               onClick={toggleIsOpen}
-              className={name !== '' ? styles.Name : styles.NameAnonymous}
-            >
+              className={name !== '' ? styles.Name : styles.NameAnonymous}>
               {name || 'Anonymous'}
             </span>
           </div>
@@ -202,8 +195,7 @@ function HookView({
             <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
             <span
               onClick={toggleIsOpen}
-              className={name !== '' ? styles.Name : styles.NameAnonymous}
-            >
+              className={name !== '' ? styles.Name : styles.NameAnonymous}>
               {name || 'Anonymous'}
             </span>{' '}
             {/* $FlowFixMe */}
@@ -260,8 +252,7 @@ function HookView({
                 typeof overrideValueFn === 'function'
                   ? styles.EditableName
                   : styles.Name
-              }
-            >
+              }>
               {name}
             </span>
             {typeof overrideValueFn === 'function' ? (
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js
index 06fad24c10977..bd2e6eee4036d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js
@@ -1,7 +1,7 @@
 // @flow
 
-import React, { useCallback, useContext, useEffect, useState } from 'react';
-import { BridgeContext } from '../context';
+import React, {useCallback, useContext, useEffect, useState} from 'react';
+import {BridgeContext} from '../context';
 import Toggle from '../Toggle';
 import ButtonIcon from '../ButtonIcon';
 
@@ -19,22 +19,24 @@ export default function InspectHostNodesToggle() {
         bridge.send('stopInspectingNative', false);
       }
     },
-    [bridge]
+    [bridge],
   );
 
-  useEffect(() => {
-    const onStopInspectingNative = () => setIsInspecting(false);
-    bridge.addListener('stopInspectingNative', onStopInspectingNative);
-    return () =>
-      bridge.removeListener('stopInspectingNative', onStopInspectingNative);
-  }, [bridge]);
+  useEffect(
+    () => {
+      const onStopInspectingNative = () => setIsInspecting(false);
+      bridge.addListener('stopInspectingNative', onStopInspectingNative);
+      return () =>
+        bridge.removeListener('stopInspectingNative', onStopInspectingNative);
+    },
+    [bridge],
+  );
 
   return (
     <Toggle
       onChange={handleChange}
       isChecked={isInspecting}
-      title="Select an element in the page to inspect it"
-    >
+      title="Select an element in the page to inspect it">
       <ButtonIcon type="search" />
     </Toggle>
   );
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
index 951a34b34f2fc..a31229ace1c2d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -8,12 +8,12 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
-import { createResource } from '../../cache';
-import { BridgeContext, StoreContext } from '../context';
-import { hydrate, fillInPath } from 'react-devtools-shared/src/hydration';
-import { TreeStateContext } from './TreeContext';
-import { separateDisplayNameAndHOCs } from 'react-devtools-shared/src/utils';
+import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
+import {createResource} from '../../cache';
+import {BridgeContext, StoreContext} from '../context';
+import {hydrate, fillInPath} from 'react-devtools-shared/src/hydration';
+import {TreeStateContext} from './TreeContext';
+import {separateDisplayNameAndHOCs} from 'react-devtools-shared/src/utils';
 
 import type {
   InspectedElement as InspectedElementBackend,
@@ -24,14 +24,14 @@ import type {
   Element,
   InspectedElement as InspectedElementFrontend,
 } from 'react-devtools-shared/src/devtools/views/Components/types';
-import type { Resource, Thenable } from '../../cache';
+import type {Resource, Thenable} from '../../cache';
 
 export type GetInspectedElementPath = (
   id: number,
-  path: Array<string | number>
+  path: Array<string | number>,
 ) => void;
 export type GetInspectedElement = (
-  id: number
+  id: number,
 ) => InspectedElementFrontend | null;
 
 type Context = {|
@@ -52,7 +52,7 @@ const inProgressRequests: WeakMap<Element, InProgressRequest> = new WeakMap();
 const resource: Resource<
   Element,
   Element,
-  InspectedElementFrontend
+  InspectedElementFrontend,
 > = createResource(
   (element: Element) => {
     let request = inProgressRequests.get(element);
@@ -65,19 +65,19 @@ const resource: Resource<
       resolveFn = resolve;
     });
 
-    inProgressRequests.set(element, { promise, resolveFn });
+    inProgressRequests.set(element, {promise, resolveFn});
 
     return promise;
   },
   (element: Element) => element,
-  { useWeakMap: true }
+  {useWeakMap: true},
 );
 
 type Props = {|
   children: React$Node,
 |};
 
-function InspectedElementContextController({ children }: Props) {
+function InspectedElementContextController({children}: Props) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
@@ -86,10 +86,10 @@ function InspectedElementContextController({ children }: Props) {
     (id: number, path: Array<string | number>) => {
       const rendererID = store.getRendererIDForElement(id);
       if (rendererID !== null) {
-        bridge.send('inspectElement', { id, path, rendererID });
+        bridge.send('inspectElement', {id, path, rendererID});
       }
     },
-    [bridge, store]
+    [bridge, store],
   );
 
   const getInspectedElement = useCallback<GetInspectedElement>(
@@ -101,13 +101,13 @@ function InspectedElementContextController({ children }: Props) {
         return null;
       }
     },
-    [store]
+    [store],
   );
 
   // It's very important that this context consumes selectedElementID and not inspectedElementID.
   // Otherwise the effect that sends the "inspect" message across the bridge-
   // would itself be blocked by the same render that suspends (waiting for the data).
-  const { selectedElementID } = useContext(TreeStateContext);
+  const {selectedElementID} = useContext(TreeStateContext);
 
   const [
     currentlyInspectedElement,
@@ -115,166 +115,173 @@ function InspectedElementContextController({ children }: Props) {
   ] = useState<InspectedElementFrontend | null>(null);
 
   // This effect handler invalidates the suspense cache and schedules rendering updates with React.
-  useEffect(() => {
-    const onInspectedElement = (data: InspectedElementPayload) => {
-      const { id } = data;
-
-      let element;
-
-      switch (data.type) {
-        case 'no-change':
-        case 'not-found':
-          // No-op
-          break;
-        case 'hydrated-path':
-          // Merge new data into previous object and invalidate cache
-          element = store.getElementByID(id);
-          if (element !== null) {
-            if (currentlyInspectedElement != null) {
-              const value = hydrateHelper(data.value, data.path);
-              const inspectedElement = { ...currentlyInspectedElement };
-
-              fillInPath(inspectedElement, data.path, value);
-
-              resource.write(element, inspectedElement);
-
-              // Schedule update with React if the curently-selected element has been invalidated.
-              if (id === selectedElementID) {
-                setCurrentlyInspectedElement(inspectedElement);
-              }
-            }
-          }
-          break;
-        case 'full-data':
-          const {
-            canEditFunctionProps,
-            canEditHooks,
-            canToggleSuspense,
-            canViewSource,
-            source,
-            type,
-            owners,
-            context,
-            hooks,
-            props,
-            state,
-          } = ((data.value: any): InspectedElementBackend);
-
-          const inspectedElement: InspectedElementFrontend = {
-            canEditFunctionProps,
-            canEditHooks,
-            canToggleSuspense,
-            canViewSource,
-            id,
-            source,
-            type,
-            owners:
-              owners === null
-                ? null
-                : owners.map(owner => {
-                    const [
-                      displayName,
-                      hocDisplayNames,
-                    ] = separateDisplayNameAndHOCs(
-                      owner.displayName,
-                      owner.type
-                    );
-                    return {
-                      ...owner,
-                      displayName,
-                      hocDisplayNames,
-                    };
-                  }),
-            context: hydrateHelper(context),
-            hooks: hydrateHelper(hooks),
-            props: hydrateHelper(props),
-            state: hydrateHelper(state),
-          };
-
-          element = store.getElementByID(id);
-          if (element !== null) {
-            const request = inProgressRequests.get(element);
-            if (request != null) {
-              inProgressRequests.delete(element);
-              batchedUpdates(() => {
-                request.resolveFn(inspectedElement);
-                setCurrentlyInspectedElement(inspectedElement);
-              });
-            } else {
-              resource.write(element, inspectedElement);
-
-              // Schedule update with React if the curently-selected element has been invalidated.
-              if (id === selectedElementID) {
-                setCurrentlyInspectedElement(inspectedElement);
-              }
-            }
-          }
-          break;
-        default:
-          break;
-      }
-    };
-
-    bridge.addListener('inspectedElement', onInspectedElement);
-    return () => bridge.removeListener('inspectedElement', onInspectedElement);
-  }, [bridge, currentlyInspectedElement, selectedElementID, store]);
-
-  // This effect handler polls for updates on the currently selected element.
-  useEffect(() => {
-    if (selectedElementID === null) {
-      return () => {};
-    }
+  useEffect(
+    () => {
+      const onInspectedElement = (data: InspectedElementPayload) => {
+        const {id} = data;
 
-    const rendererID = store.getRendererIDForElement(selectedElementID);
+        let element;
 
-    let timeoutID: TimeoutID | null = null;
+        switch (data.type) {
+          case 'no-change':
+          case 'not-found':
+            // No-op
+            break;
+          case 'hydrated-path':
+            // Merge new data into previous object and invalidate cache
+            element = store.getElementByID(id);
+            if (element !== null) {
+              if (currentlyInspectedElement != null) {
+                const value = hydrateHelper(data.value, data.path);
+                const inspectedElement = {...currentlyInspectedElement};
 
-    const sendRequest = () => {
-      timeoutID = null;
+                fillInPath(inspectedElement, data.path, value);
 
-      if (rendererID !== null) {
-        bridge.send('inspectElement', { id: selectedElementID, rendererID });
-      }
-    };
-
-    // Send the initial inspection request.
-    // We'll poll for an update in the response handler below.
-    sendRequest();
+                resource.write(element, inspectedElement);
 
-    const onInspectedElement = (data: InspectedElementPayload) => {
-      // If this is the element we requested, wait a little bit and then ask for another update.
-      if (data.id === selectedElementID) {
-        switch (data.type) {
-          case 'no-change':
+                // Schedule update with React if the curently-selected element has been invalidated.
+                if (id === selectedElementID) {
+                  setCurrentlyInspectedElement(inspectedElement);
+                }
+              }
+            }
+            break;
           case 'full-data':
-          case 'hydrated-path':
-            if (timeoutID !== null) {
-              clearTimeout(timeoutID);
+            const {
+              canEditFunctionProps,
+              canEditHooks,
+              canToggleSuspense,
+              canViewSource,
+              source,
+              type,
+              owners,
+              context,
+              hooks,
+              props,
+              state,
+            } = ((data.value: any): InspectedElementBackend);
+
+            const inspectedElement: InspectedElementFrontend = {
+              canEditFunctionProps,
+              canEditHooks,
+              canToggleSuspense,
+              canViewSource,
+              id,
+              source,
+              type,
+              owners:
+                owners === null
+                  ? null
+                  : owners.map(owner => {
+                      const [
+                        displayName,
+                        hocDisplayNames,
+                      ] = separateDisplayNameAndHOCs(
+                        owner.displayName,
+                        owner.type,
+                      );
+                      return {
+                        ...owner,
+                        displayName,
+                        hocDisplayNames,
+                      };
+                    }),
+              context: hydrateHelper(context),
+              hooks: hydrateHelper(hooks),
+              props: hydrateHelper(props),
+              state: hydrateHelper(state),
+            };
+
+            element = store.getElementByID(id);
+            if (element !== null) {
+              const request = inProgressRequests.get(element);
+              if (request != null) {
+                inProgressRequests.delete(element);
+                batchedUpdates(() => {
+                  request.resolveFn(inspectedElement);
+                  setCurrentlyInspectedElement(inspectedElement);
+                });
+              } else {
+                resource.write(element, inspectedElement);
+
+                // Schedule update with React if the curently-selected element has been invalidated.
+                if (id === selectedElementID) {
+                  setCurrentlyInspectedElement(inspectedElement);
+                }
+              }
             }
-            timeoutID = setTimeout(sendRequest, 1000);
             break;
           default:
             break;
         }
+      };
+
+      bridge.addListener('inspectedElement', onInspectedElement);
+      return () =>
+        bridge.removeListener('inspectedElement', onInspectedElement);
+    },
+    [bridge, currentlyInspectedElement, selectedElementID, store],
+  );
+
+  // This effect handler polls for updates on the currently selected element.
+  useEffect(
+    () => {
+      if (selectedElementID === null) {
+        return () => {};
       }
-    };
 
-    bridge.addListener('inspectedElement', onInspectedElement);
+      const rendererID = store.getRendererIDForElement(selectedElementID);
 
-    return () => {
-      bridge.removeListener('inspectedElement', onInspectedElement);
+      let timeoutID: TimeoutID | null = null;
 
-      if (timeoutID !== null) {
-        clearTimeout(timeoutID);
-      }
-    };
-  }, [bridge, selectedElementID, store]);
+      const sendRequest = () => {
+        timeoutID = null;
+
+        if (rendererID !== null) {
+          bridge.send('inspectElement', {id: selectedElementID, rendererID});
+        }
+      };
+
+      // Send the initial inspection request.
+      // We'll poll for an update in the response handler below.
+      sendRequest();
+
+      const onInspectedElement = (data: InspectedElementPayload) => {
+        // If this is the element we requested, wait a little bit and then ask for another update.
+        if (data.id === selectedElementID) {
+          switch (data.type) {
+            case 'no-change':
+            case 'full-data':
+            case 'hydrated-path':
+              if (timeoutID !== null) {
+                clearTimeout(timeoutID);
+              }
+              timeoutID = setTimeout(sendRequest, 1000);
+              break;
+            default:
+              break;
+          }
+        }
+      };
+
+      bridge.addListener('inspectedElement', onInspectedElement);
+
+      return () => {
+        bridge.removeListener('inspectedElement', onInspectedElement);
+
+        if (timeoutID !== null) {
+          clearTimeout(timeoutID);
+        }
+      };
+    },
+    [bridge, selectedElementID, store],
+  );
 
   const value = useMemo(
-    () => ({ getInspectedElement, getInspectedElementPath }),
+    () => ({getInspectedElement, getInspectedElementPath}),
     // InspectedElement is used to invalidate the cache and schedule an update with React.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [currentlyInspectedElement, getInspectedElement, getInspectedElementPath]
+    [currentlyInspectedElement, getInspectedElement, getInspectedElementPath],
   );
 
   return (
@@ -286,13 +293,13 @@ function InspectedElementContextController({ children }: Props) {
 
 function hydrateHelper(
   dehydratedData: any | null,
-  path?: Array<string | number>
+  path?: Array<string | number>,
 ): Object | null {
   if (dehydratedData !== null) {
-    let { cleaned, data } = dehydratedData;
+    let {cleaned, data} = dehydratedData;
 
     if (path) {
-      const { length } = path;
+      const {length} = path;
       if (length > 0) {
         // Hydration helper requires full paths, but inspection dehydrates with relative paths.
         // In that event it's important that we adjust the "cleaned" paths to match.
@@ -306,4 +313,4 @@ function hydrateHelper(
   }
 }
 
-export { InspectedElementContext, InspectedElementContextController };
+export {InspectedElementContext, InspectedElementContextController};
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js
index a296a6306fb36..2accaeb317314 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js
@@ -1,14 +1,14 @@
 // @flow
 
-import { copy } from 'clipboard-js';
-import React, { useCallback } from 'react';
+import {copy} from 'clipboard-js';
+import React, {useCallback} from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import KeyValue from './KeyValue';
-import { serializeDataForCopy } from '../utils';
+import {serializeDataForCopy} from '../utils';
 import styles from './InspectedElementTree.css';
 
-import type { InspectPath } from './SelectedElement';
+import type {InspectPath} from './SelectedElement';
 
 type OverrideValueFn = (path: Array<string | number>, value: any) => void;
 
@@ -29,9 +29,10 @@ export default function InspectedElementTree({
 }: Props) {
   const isEmpty = data === null || Object.keys(data).length === 0;
 
-  const handleCopy = useCallback(() => copy(serializeDataForCopy(((data: any): Object))), [
-    data,
-  ]);
+  const handleCopy = useCallback(
+    () => copy(serializeDataForCopy(((data: any): Object))),
+    [data],
+  );
 
   if (isEmpty && !showWhenEmpty) {
     return null;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
index 7fd333a0a8ff9..d312789c40e50 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
@@ -1,14 +1,14 @@
 // @flow
 
-import React, { useEffect, useRef, useState } from 'react';
-import type { Element } from 'react';
+import React, {useEffect, useRef, useState} from 'react';
+import type {Element} from 'react';
 import EditableValue from './EditableValue';
 import ExpandCollapseToggle from './ExpandCollapseToggle';
-import { getMetaValueLabel } from '../utils';
-import { meta } from '../../../hydration';
+import {getMetaValueLabel} from '../utils';
+import {meta} from '../../../hydration';
 import styles from './KeyValue.css';
 
-import type { InspectPath } from './SelectedElement';
+import type {InspectPath} from './SelectedElement';
 
 type OverrideValueFn = (path: Array<string | number>, value: any) => void;
 
@@ -40,17 +40,20 @@ export default function KeyValue({
     value[meta.inspectable] &&
     value[meta.size] !== 0;
 
-  useEffect(() => {
-    if (
-      isInspectable &&
-      isOpen &&
-      !prevIsOpenRef.current &&
-      typeof inspectPath === 'function'
-    ) {
-      inspectPath(path);
-    }
-    prevIsOpenRef.current = isOpen;
-  }, [inspectPath, isInspectable, isOpen, path]);
+  useEffect(
+    () => {
+      if (
+        isInspectable &&
+        isOpen &&
+        !prevIsOpenRef.current &&
+        typeof inspectPath === 'function'
+      ) {
+        inspectPath(path);
+      }
+      prevIsOpenRef.current = isOpen;
+    },
+    [inspectPath, isInspectable, isOpen, path],
+  );
 
   const toggleIsOpen = () => setIsOpen(prevIsOpen => !prevIsOpen);
 
@@ -107,8 +110,7 @@ export default function KeyValue({
         )}
         <span
           className={styles.Name}
-          onClick={isInspectable ? toggleIsOpen : undefined}
-        >
+          onClick={isInspectable ? toggleIsOpen : undefined}>
           {name}
         </span>
         <span className={styles.Value}>{getMetaValueLabel(value)}</span>
@@ -135,8 +137,7 @@ export default function KeyValue({
           key={`${depth}-root`}
           className={styles.Item}
           hidden={hidden}
-          style={style}
-        >
+          style={style}>
           {hasChildren ? (
             <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
           ) : (
@@ -144,12 +145,11 @@ export default function KeyValue({
           )}
           <span
             className={styles.Name}
-            onClick={hasChildren ? toggleIsOpen : undefined}
-          >
+            onClick={hasChildren ? toggleIsOpen : undefined}>
             {name}
           </span>
           <span>Array</span>
-        </div>
+        </div>,
       );
     } else {
       const hasChildren = Object.entries(value).length > 0;
@@ -171,8 +171,7 @@ export default function KeyValue({
           key={`${depth}-root`}
           className={styles.Item}
           hidden={hidden}
-          style={style}
-        >
+          style={style}>
           {hasChildren ? (
             <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
           ) : (
@@ -180,12 +179,11 @@ export default function KeyValue({
           )}
           <span
             className={styles.Name}
-            onClick={hasChildren ? toggleIsOpen : undefined}
-          >
+            onClick={hasChildren ? toggleIsOpen : undefined}>
             {name}
           </span>
           <span>Object</span>
-        </div>
+        </div>,
       );
     }
   }
diff --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
index b9fc9b6e0b57f..a3552ef588fbc 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Fragment, useLayoutEffect, useRef } from 'react';
+import React, {Fragment, useLayoutEffect, useRef} from 'react';
 import styles from './AutoSizeInput.css';
 
 type Props = {
@@ -58,24 +58,27 @@ export default function AutoSizeInput({
   }, []);
 
   // Resize input any time text changes
-  useLayoutEffect(() => {
-    if (hiddenDivRef.current === null) {
-      return;
-    }
+  useLayoutEffect(
+    () => {
+      if (hiddenDivRef.current === null) {
+        return;
+      }
 
-    const scrollWidth = hiddenDivRef.current.getBoundingClientRect().width;
-    if (!scrollWidth) {
-      return;
-    }
+      const scrollWidth = hiddenDivRef.current.getBoundingClientRect().width;
+      if (!scrollWidth) {
+        return;
+      }
 
-    // Adding an extra pixel avoids a slight horizontal scroll when changing text selection/cursor.
-    // Not sure why this is, but the old DevTools did a similar thing.
-    const targetWidth = Math.ceil(scrollWidth) + 1;
+      // Adding an extra pixel avoids a slight horizontal scroll when changing text selection/cursor.
+      // Not sure why this is, but the old DevTools did a similar thing.
+      const targetWidth = Math.ceil(scrollWidth) + 1;
 
-    if (inputRef.current !== null) {
-      inputRef.current.style.width = `${targetWidth}px`;
-    }
-  }, [value]);
+      if (inputRef.current !== null) {
+        inputRef.current.style.width = `${targetWidth}px`;
+      }
+    },
+    [value],
+  );
 
   const isEmpty = value === '' || value === '""';
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js
index 1a47248011445..f322d425e3c99 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js
@@ -3,15 +3,15 @@
 import React from 'react';
 import styles from './LayoutViewer.css';
 
-import type { Layout } from './types';
+import type {Layout} from './types';
 
 type Props = {|
   id: number,
   layout: Layout,
 |};
 
-export default function LayoutViewer({ id, layout }: Props) {
-  const { height, margin, padding, y, width, x } = layout;
+export default function LayoutViewer({id, layout}: Props) {
+  const {height, margin, padding, y, width, x} = layout;
 
   return (
     <div className={styles.LayoutViewer}>
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js
index d1797e820cc01..85fa52269dd8e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js
@@ -1,16 +1,19 @@
 // @flow
 
-import React, { useContext, useMemo, useRef, useState } from 'react';
-import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
-import { copy } from 'clipboard-js';
-import { BridgeContext, StoreContext } from 'react-devtools-shared/src/devtools/views/context';
+import React, {useContext, useMemo, useRef, useState} from 'react';
+import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
+import {copy} from 'clipboard-js';
+import {
+  BridgeContext,
+  StoreContext,
+} from 'react-devtools-shared/src/devtools/views/context';
 import Button from '../../Button';
 import ButtonIcon from '../../ButtonIcon';
-import { serializeDataForCopy } from '../../utils';
+import {serializeDataForCopy} from '../../utils';
 import AutoSizeInput from './AutoSizeInput';
 import styles from './StyleEditor.css';
 
-import type { Style } from './types';
+import type {Style} from './types';
 
 type Props = {|
   id: number,
@@ -20,7 +23,7 @@ type Props = {|
 type ChangeAttributeFn = (oldName: string, newName: string, value: any) => void;
 type ChangeValueFn = (name: string, value: any) => void;
 
-export default function StyleEditor({ id, style }: Props) {
+export default function StyleEditor({id, style}: Props) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
@@ -90,11 +93,7 @@ type NewRowProps = {|
   validAttributes: $ReadOnlyArray<string> | null,
 |};
 
-function NewRow({
-  changeAttribute,
-  changeValue,
-  validAttributes,
-}: NewRowProps) {
+function NewRow({changeAttribute, changeValue, validAttributes}: NewRowProps) {
   const [key, setKey] = useState<number>(0);
   const reset = () => setKey(key + 1);
 
@@ -103,7 +102,7 @@ function NewRow({
   const changeAttributeWrapper = (
     oldAttribute: string,
     newAttribute: string,
-    value: any
+    value: any,
   ) => {
     // Ignore attribute changes until a value has been specified
     newAttributeRef.current = newAttribute;
diff --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
index 479b56f816682..597ccfdb766d2 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js
@@ -8,15 +8,21 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
-import { createResource } from 'react-devtools-shared/src/devtools/cache';
-import { BridgeContext, StoreContext } from 'react-devtools-shared/src/devtools/views/context';
-import { TreeStateContext } from '../TreeContext';
-
-import type { StyleAndLayout as StyleAndLayoutBackend } from 'react-devtools-shared/src/backend/NativeStyleEditor/types';
-import type { StyleAndLayout as StyleAndLayoutFrontend } from './types';
-import type { Element } from 'react-devtools-shared/src/devtools/views/Components/types';
-import type { Resource, Thenable } from 'react-devtools-shared/src/devtools/cache';
+import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
+import {createResource} from 'react-devtools-shared/src/devtools/cache';
+import {
+  BridgeContext,
+  StoreContext,
+} from 'react-devtools-shared/src/devtools/views/context';
+import {TreeStateContext} from '../TreeContext';
+
+import type {StyleAndLayout as StyleAndLayoutBackend} from 'react-devtools-shared/src/backend/NativeStyleEditor/types';
+import type {StyleAndLayout as StyleAndLayoutFrontend} from './types';
+import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
+import type {
+  Resource,
+  Thenable,
+} from 'react-devtools-shared/src/devtools/cache';
 
 export type GetStyleAndLayout = (id: number) => StyleAndLayoutFrontend | null;
 
@@ -37,7 +43,7 @@ const inProgressRequests: WeakMap<Element, InProgressRequest> = new WeakMap();
 const resource: Resource<
   Element,
   Element,
-  StyleAndLayoutFrontend
+  StyleAndLayoutFrontend,
 > = createResource(
   (element: Element) => {
     let request = inProgressRequests.get(element);
@@ -50,19 +56,19 @@ const resource: Resource<
       resolveFn = resolve;
     });
 
-    inProgressRequests.set(element, { promise, resolveFn });
+    inProgressRequests.set(element, {promise, resolveFn});
 
     return promise;
   },
   (element: Element) => element,
-  { useWeakMap: true }
+  {useWeakMap: true},
 );
 
 type Props = {|
   children: React$Node,
 |};
 
-function NativeStyleContextController({ children }: Props) {
+function NativeStyleContextController({children}: Props) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
@@ -75,13 +81,13 @@ function NativeStyleContextController({ children }: Props) {
         return null;
       }
     },
-    [store]
+    [store],
   );
 
   // It's very important that this context consumes selectedElementID and not NativeStyleID.
   // Otherwise the effect that sends the "inspect" message across the bridge-
   // would itself be blocked by the same render that suspends (waiting for the data).
-  const { selectedElementID } = useContext(TreeStateContext);
+  const {selectedElementID} = useContext(TreeStateContext);
 
   const [
     currentStyleAndLayout,
@@ -89,94 +95,100 @@ function NativeStyleContextController({ children }: Props) {
   ] = useState<StyleAndLayoutFrontend | null>(null);
 
   // This effect handler invalidates the suspense cache and schedules rendering updates with React.
-  useEffect(() => {
-    const onStyleAndLayout = ({ id, layout, style }: StyleAndLayoutBackend) => {
-      let element = store.getElementByID(id);
-      if (element !== null) {
-        const styleAndLayout: StyleAndLayoutFrontend = {
-          layout,
-          style,
-        };
-        const request = inProgressRequests.get(element);
-        if (request != null) {
-          inProgressRequests.delete(element);
-          batchedUpdates(() => {
-            request.resolveFn(styleAndLayout);
-            setCurrentStyleAndLayout(styleAndLayout);
-          });
-        } else {
-          resource.write(element, styleAndLayout);
-
-          // Schedule update with React if the curently-selected element has been invalidated.
-          if (id === selectedElementID) {
-            setCurrentStyleAndLayout(styleAndLayout);
+  useEffect(
+    () => {
+      const onStyleAndLayout = ({id, layout, style}: StyleAndLayoutBackend) => {
+        let element = store.getElementByID(id);
+        if (element !== null) {
+          const styleAndLayout: StyleAndLayoutFrontend = {
+            layout,
+            style,
+          };
+          const request = inProgressRequests.get(element);
+          if (request != null) {
+            inProgressRequests.delete(element);
+            batchedUpdates(() => {
+              request.resolveFn(styleAndLayout);
+              setCurrentStyleAndLayout(styleAndLayout);
+            });
+          } else {
+            resource.write(element, styleAndLayout);
+
+            // Schedule update with React if the curently-selected element has been invalidated.
+            if (id === selectedElementID) {
+              setCurrentStyleAndLayout(styleAndLayout);
+            }
           }
         }
-      }
-    };
-
-    bridge.addListener('NativeStyleEditor_styleAndLayout', onStyleAndLayout);
-    return () =>
-      bridge.removeListener(
-        'NativeStyleEditor_styleAndLayout',
-        onStyleAndLayout
-      );
-  }, [bridge, currentStyleAndLayout, selectedElementID, store]);
+      };
+
+      bridge.addListener('NativeStyleEditor_styleAndLayout', onStyleAndLayout);
+      return () =>
+        bridge.removeListener(
+          'NativeStyleEditor_styleAndLayout',
+          onStyleAndLayout,
+        );
+    },
+    [bridge, currentStyleAndLayout, selectedElementID, store],
+  );
 
   // This effect handler polls for updates on the currently selected element.
-  useEffect(() => {
-    if (selectedElementID === null) {
-      return () => {};
-    }
+  useEffect(
+    () => {
+      if (selectedElementID === null) {
+        return () => {};
+      }
 
-    const rendererID = store.getRendererIDForElement(selectedElementID);
+      const rendererID = store.getRendererIDForElement(selectedElementID);
 
-    let timeoutID: TimeoutID | null = null;
+      let timeoutID: TimeoutID | null = null;
 
-    const sendRequest = () => {
-      timeoutID = null;
+      const sendRequest = () => {
+        timeoutID = null;
 
-      if (rendererID !== null) {
-        bridge.send('NativeStyleEditor_measure', {
-          id: selectedElementID,
-          rendererID,
-        });
-      }
-    };
+        if (rendererID !== null) {
+          bridge.send('NativeStyleEditor_measure', {
+            id: selectedElementID,
+            rendererID,
+          });
+        }
+      };
 
-    // Send the initial measurement request.
-    // We'll poll for an update in the response handler below.
-    sendRequest();
+      // Send the initial measurement request.
+      // We'll poll for an update in the response handler below.
+      sendRequest();
 
-    const onStyleAndLayout = ({ id }: StyleAndLayoutBackend) => {
-      // If this is the element we requested, wait a little bit and then ask for another update.
-      if (id === selectedElementID) {
-        if (timeoutID !== null) {
-          clearTimeout(timeoutID);
+      const onStyleAndLayout = ({id}: StyleAndLayoutBackend) => {
+        // If this is the element we requested, wait a little bit and then ask for another update.
+        if (id === selectedElementID) {
+          if (timeoutID !== null) {
+            clearTimeout(timeoutID);
+          }
+          timeoutID = setTimeout(sendRequest, 1000);
         }
-        timeoutID = setTimeout(sendRequest, 1000);
-      }
-    };
+      };
 
-    bridge.addListener('NativeStyleEditor_styleAndLayout', onStyleAndLayout);
+      bridge.addListener('NativeStyleEditor_styleAndLayout', onStyleAndLayout);
 
-    return () => {
-      bridge.removeListener(
-        'NativeStyleEditor_styleAndLayout',
-        onStyleAndLayout
-      );
+      return () => {
+        bridge.removeListener(
+          'NativeStyleEditor_styleAndLayout',
+          onStyleAndLayout,
+        );
 
-      if (timeoutID !== null) {
-        clearTimeout(timeoutID);
-      }
-    };
-  }, [bridge, selectedElementID, store]);
+        if (timeoutID !== null) {
+          clearTimeout(timeoutID);
+        }
+      };
+    },
+    [bridge, selectedElementID, store],
+  );
 
   const value = useMemo(
-    () => ({ getStyleAndLayout }),
+    () => ({getStyleAndLayout}),
     // NativeStyle is used to invalidate the cache and schedule an update with React.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [currentStyleAndLayout, getStyleAndLayout]
+    [currentStyleAndLayout, getStyleAndLayout],
   );
 
   return (
@@ -186,4 +198,4 @@ function NativeStyleContextController({ children }: Props) {
   );
 }
 
-export { NativeStyleContext, NativeStyleContextController };
+export {NativeStyleContext, NativeStyleContextController};
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js
index 3298e0d9e990e..190355675450b 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js
@@ -1,13 +1,13 @@
 // @flow
 
-import React, { Fragment, useContext, useMemo } from 'react';
+import React, {Fragment, useContext, useMemo} from 'react';
 import Store from 'react-devtools-shared/src/devtools/store';
-import { StoreContext } from 'react-devtools-shared/src/devtools/views/context';
-import { useSubscription } from 'react-devtools-shared/src/devtools/views/hooks';
-import { NativeStyleContext } from './context';
+import {StoreContext} from 'react-devtools-shared/src/devtools/views/context';
+import {useSubscription} from 'react-devtools-shared/src/devtools/views/hooks';
+import {NativeStyleContext} from './context';
 import LayoutViewer from './LayoutViewer';
 import StyleEditor from './StyleEditor';
-import { TreeStateContext } from '../TreeContext';
+import {TreeStateContext} from '../TreeContext';
 
 type Props = {||};
 
@@ -24,11 +24,9 @@ export default function NativeStyleEditorWrapper(_: Props) {
         };
       },
     }),
-    [store]
-  );
-  const supportsNativeStyleEditor = useSubscription<boolean>(
-    subscription
+    [store],
   );
+  const supportsNativeStyleEditor = useSubscription<boolean>(subscription);
 
   if (!supportsNativeStyleEditor) {
     return null;
@@ -38,9 +36,9 @@ export default function NativeStyleEditorWrapper(_: Props) {
 }
 
 function NativeStyleEditor(_: Props) {
-  const { getStyleAndLayout } = useContext(NativeStyleContext);
+  const {getStyleAndLayout} = useContext(NativeStyleContext);
 
-  const { inspectedElementID } = useContext(TreeStateContext);
+  const {inspectedElementID} = useContext(TreeStateContext);
   if (inspectedElementID === null) {
     return null;
   }
@@ -50,7 +48,7 @@ function NativeStyleEditor(_: Props) {
     return null;
   }
 
-  const { layout, style } = maybeStyleAndLayout;
+  const {layout, style} = maybeStyleAndLayout;
 
   return (
     <Fragment>
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js b/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js
index f1d71249b9203..9d9fa75cc58f9 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js
@@ -1,19 +1,17 @@
 // @flow
 
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-} from 'react';
-import { createResource } from '../../cache';
-import { BridgeContext, StoreContext } from '../context';
-import { TreeStateContext } from './TreeContext';
-import { separateDisplayNameAndHOCs } from 'react-devtools-shared/src/utils';
-
-import type { OwnersList } from 'react-devtools-shared/src/backend/types';
-import type { Element, Owner } from 'react-devtools-shared/src/devtools/views/Components/types';
-import type { Resource, Thenable } from '../../cache';
+import React, {createContext, useCallback, useContext, useEffect} from 'react';
+import {createResource} from '../../cache';
+import {BridgeContext, StoreContext} from '../context';
+import {TreeStateContext} from './TreeContext';
+import {separateDisplayNameAndHOCs} from 'react-devtools-shared/src/utils';
+
+import type {OwnersList} from 'react-devtools-shared/src/backend/types';
+import type {
+  Element,
+  Owner,
+} from 'react-devtools-shared/src/devtools/views/Components/types';
+import type {Resource, Thenable} from '../../cache';
 
 type Context = (id: number) => Array<Owner> | null;
 
@@ -39,22 +37,22 @@ const resource: Resource<Element, Element, Array<Owner>> = createResource(
       resolveFn = resolve;
     });
 
-    inProgressRequests.set(element, { promise, resolveFn });
+    inProgressRequests.set(element, {promise, resolveFn});
 
     return promise;
   },
   (element: Element) => element,
-  { useWeakMap: true }
+  {useWeakMap: true},
 );
 
 type Props = {|
   children: React$Node,
 |};
 
-function OwnersListContextController({ children }: Props) {
+function OwnersListContextController({children}: Props) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
-  const { ownerID } = useContext(TreeStateContext);
+  const {ownerID} = useContext(TreeStateContext);
 
   const read = useCallback(
     (id: number) => {
@@ -65,54 +63,63 @@ function OwnersListContextController({ children }: Props) {
         return null;
       }
     },
-    [store]
+    [store],
   );
 
-  useEffect(() => {
-    const onOwnersList = (ownersList: OwnersList) => {
-      const id = ownersList.id;
-
-      const element = store.getElementByID(id);
-      if (element !== null) {
-        const request = inProgressRequests.get(element);
-        if (request != null) {
-          inProgressRequests.delete(element);
-
-          request.resolveFn(
-            ownersList.owners === null
-              ? null
-              : ownersList.owners.map(owner => {
-                  const [
-                    displayNameWithoutHOCs,
-                    hocDisplayNames,
-                  ] = separateDisplayNameAndHOCs(owner.displayName, owner.type);
-
-                  return {
-                    ...owner,
-                    displayName: displayNameWithoutHOCs,
-                    hocDisplayNames,
-                  };
-                })
-          );
+  useEffect(
+    () => {
+      const onOwnersList = (ownersList: OwnersList) => {
+        const id = ownersList.id;
+
+        const element = store.getElementByID(id);
+        if (element !== null) {
+          const request = inProgressRequests.get(element);
+          if (request != null) {
+            inProgressRequests.delete(element);
+
+            request.resolveFn(
+              ownersList.owners === null
+                ? null
+                : ownersList.owners.map(owner => {
+                    const [
+                      displayNameWithoutHOCs,
+                      hocDisplayNames,
+                    ] = separateDisplayNameAndHOCs(
+                      owner.displayName,
+                      owner.type,
+                    );
+
+                    return {
+                      ...owner,
+                      displayName: displayNameWithoutHOCs,
+                      hocDisplayNames,
+                    };
+                  }),
+            );
+          }
         }
-      }
-    };
+      };
 
-    bridge.addListener('ownersList', onOwnersList);
-    return () => bridge.removeListener('ownersList', onOwnersList);
-  }, [bridge, store]);
+      bridge.addListener('ownersList', onOwnersList);
+      return () => bridge.removeListener('ownersList', onOwnersList);
+    },
+    [bridge, store],
+  );
 
   // This effect requests an updated owners list any time the selected owner changes
-  useEffect(() => {
-    if (ownerID !== null) {
-      const rendererID = store.getRendererIDForElement(ownerID);
-      if (rendererID !== null) {
-        bridge.send('getOwnersList', { id: ownerID, rendererID });
+  useEffect(
+    () => {
+      if (ownerID !== null) {
+        const rendererID = store.getRendererIDForElement(ownerID);
+        if (rendererID !== null) {
+          bridge.send('getOwnersList', {id: ownerID, rendererID});
+        }
       }
-    }
 
-    return () => {};
-  }, [bridge, ownerID, store]);
+      return () => {};
+    },
+    [bridge, ownerID, store],
+  );
 
   return (
     <OwnersListContext.Provider value={read}>
@@ -121,4 +128,4 @@ function OwnersListContextController({ children }: Props) {
   );
 }
 
-export { OwnersListContext, OwnersListContextController };
+export {OwnersListContext, OwnersListContextController};
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
index befae507de143..d0a849ff697c8 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
@@ -9,17 +9,17 @@ import React, {
   useState,
 } from 'react';
 import Tooltip from '@reach/tooltip';
-import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
+import {Menu, MenuList, MenuButton, MenuItem} from '@reach/menu-button';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import Toggle from '../Toggle';
 import Badge from './Badge';
-import { OwnersListContext } from './OwnersListContext';
-import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
-import { useIsOverflowing } from '../hooks';
-import { StoreContext } from '../context';
+import {OwnersListContext} from './OwnersListContext';
+import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
+import {useIsOverflowing} from '../hooks';
+import {StoreContext} from '../context';
 
-import type { Owner } from './types';
+import type {Owner} from './types';
 
 import styles from './OwnersStack.css';
 
@@ -47,7 +47,7 @@ function dialogReducer(state, action) {
   switch (action.type) {
     case 'UPDATE_OWNER_ID':
       const selectedIndex = action.owners.findIndex(
-        owner => owner.id === action.ownerID
+        owner => owner.id === action.ownerID,
       );
       return {
         ownerID: action.ownerID,
@@ -66,7 +66,7 @@ function dialogReducer(state, action) {
 
 export default function OwnerStack() {
   const read = useContext(OwnersListContext);
-  const { ownerID } = useContext(TreeStateContext);
+  const {ownerID} = useContext(TreeStateContext);
   const treeDispatch = useContext(TreeDispatcherContext);
 
   const [state, dispatch] = useReducer<State, Action>(dialogReducer, {
@@ -93,7 +93,7 @@ export default function OwnerStack() {
     });
   }
 
-  const { owners, selectedIndex } = state;
+  const {owners, selectedIndex} = state;
 
   const selectOwner = useCallback<SelectOwner>(
     (owner: Owner | null) => {
@@ -103,16 +103,16 @@ export default function OwnerStack() {
           type: 'UPDATE_SELECTED_INDEX',
           selectedIndex: index >= 0 ? index : 0,
         });
-        treeDispatch({ type: 'SELECT_OWNER', payload: owner.id });
+        treeDispatch({type: 'SELECT_OWNER', payload: owner.id});
       } else {
         dispatch({
           type: 'UPDATE_SELECTED_INDEX',
           selectedIndex: 0,
         });
-        treeDispatch({ type: 'RESET_OWNER_STACK' });
+        treeDispatch({type: 'RESET_OWNER_STACK'});
       }
     },
-    [owners, treeDispatch]
+    [owners, treeDispatch],
   );
 
   const [elementsTotalWidth, setElementsTotalWidth] = useState(0);
@@ -121,27 +121,30 @@ export default function OwnerStack() {
 
   const selectedOwner = owners[selectedIndex];
 
-  useLayoutEffect(() => {
-    // If we're already overflowing, then we don't need to re-measure items.
-    // That's because once the owners stack is open, it can only get larger (by driling in).
-    // A totally new stack can only be reached by exiting this mode and re-entering it.
-    if (elementsBarRef.current === null || isOverflowing) {
-      return () => {};
-    }
+  useLayoutEffect(
+    () => {
+      // If we're already overflowing, then we don't need to re-measure items.
+      // That's because once the owners stack is open, it can only get larger (by driling in).
+      // A totally new stack can only be reached by exiting this mode and re-entering it.
+      if (elementsBarRef.current === null || isOverflowing) {
+        return () => {};
+      }
 
-    let elementsTotalWidth = 0;
-    for (let i = 0; i < owners.length; i++) {
-      const element = elementsBarRef.current.children[i];
-      const computedStyle = getComputedStyle(element);
+      let elementsTotalWidth = 0;
+      for (let i = 0; i < owners.length; i++) {
+        const element = elementsBarRef.current.children[i];
+        const computedStyle = getComputedStyle(element);
 
-      elementsTotalWidth +=
-        element.offsetWidth +
-        parseInt(computedStyle.marginLeft, 10) +
-        parseInt(computedStyle.marginRight, 10);
-    }
+        elementsTotalWidth +=
+          element.offsetWidth +
+          parseInt(computedStyle.marginLeft, 10) +
+          parseInt(computedStyle.marginRight, 10);
+      }
 
-    setElementsTotalWidth(elementsTotalWidth);
-  }, [elementsBarRef, isOverflowing, owners.length]);
+      setElementsTotalWidth(elementsTotalWidth);
+    },
+    [elementsBarRef, isOverflowing, owners.length],
+  );
 
   return (
     <div className={styles.OwnerStack}>
@@ -181,8 +184,7 @@ export default function OwnerStack() {
       <Button
         className={styles.IconButton}
         onClick={() => selectOwner(null)}
-        title="Back to tree view"
-      >
+        title="Back to tree view">
         <ButtonIcon type="close" />
       </Button>
     </div>
@@ -209,8 +211,7 @@ function ElementsDropdown({
       <MenuItem
         key={owner.id}
         className={`${styles.Component} ${isInStore ? '' : styles.NotInStore}`}
-        onSelect={() => (isInStore ? selectOwner(owner) : null)}
-      >
+        onSelect={() => (isInStore ? selectOwner(owner) : null)}>
         {owner.displayName}
 
         <Badge
@@ -218,7 +219,7 @@ function ElementsDropdown({
           hocDisplayNames={owner.hocDisplayNames}
           type={owner.type}
         />
-      </MenuItem>
+      </MenuItem>,
     );
   }
 
@@ -241,24 +242,26 @@ type ElementViewProps = {
   owner: Owner,
   selectOwner: SelectOwner,
 };
-function ElementView({ isSelected, owner, selectOwner }: ElementViewProps) {
+function ElementView({isSelected, owner, selectOwner}: ElementViewProps) {
   const store = useContext(StoreContext);
 
-  const { displayName, hocDisplayNames, type } = owner;
+  const {displayName, hocDisplayNames, type} = owner;
   const isInStore = store.containsElement(owner.id);
 
-  const handleChange = useCallback(() => {
-    if (isInStore) {
-      selectOwner(owner);
-    }
-  }, [isInStore, selectOwner, owner]);
+  const handleChange = useCallback(
+    () => {
+      if (isInStore) {
+        selectOwner(owner);
+      }
+    },
+    [isInStore, selectOwner, owner],
+  );
 
   return (
     <Toggle
       className={`${styles.Component} ${isInStore ? '' : styles.NotInStore}`}
       isChecked={isSelected}
-      onChange={handleChange}
-    >
+      onChange={handleChange}>
       {displayName}
 
       <Badge
@@ -296,8 +299,7 @@ function BackToOwnerButton({
     <Button
       className={isInStore ? undefined : styles.NotInStore}
       onClick={() => (isInStore ? selectOwner(owner) : null)}
-      title={`Up to ${owner.displayName || 'owner'}`}
-    >
+      title={`Up to ${owner.displayName || 'owner'}`}>
       <ButtonIcon type="previous" />
     </Button>
   );
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js b/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js
index ecae6beb2ea2b..76964e4cf5f9e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js
@@ -1,7 +1,7 @@
 // @flow
 
-import React, { useCallback, useContext, useEffect, useRef } from 'react';
-import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
+import React, {useCallback, useContext, useEffect, useRef} from 'react';
+import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import Icon from '../Icon';
@@ -11,21 +11,19 @@ import styles from './SearchInput.css';
 type Props = {||};
 
 export default function SearchInput(props: Props) {
-  const { searchIndex, searchResults, searchText } = useContext(
-    TreeStateContext
-  );
+  const {searchIndex, searchResults, searchText} = useContext(TreeStateContext);
   const dispatch = useContext(TreeDispatcherContext);
 
   const inputRef = useRef<HTMLInputElement | null>(null);
 
   const handleTextChange = useCallback(
-    ({ currentTarget }) =>
-      dispatch({ type: 'SET_SEARCH_TEXT', payload: currentTarget.value }),
-    [dispatch]
+    ({currentTarget}) =>
+      dispatch({type: 'SET_SEARCH_TEXT', payload: currentTarget.value}),
+    [dispatch],
   );
   const resetSearch = useCallback(
-    () => dispatch({ type: 'SET_SEARCH_TEXT', payload: '' }),
-    [dispatch]
+    () => dispatch({type: 'SET_SEARCH_TEXT', payload: ''}),
+    [dispatch],
   );
 
   const handleKeyDown = useCallback(
@@ -33,54 +31,58 @@ export default function SearchInput(props: Props) {
       // For convenience, let up/down arrow keys change Tree selection.
       switch (event.key) {
         case 'ArrowDown':
-          dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' });
+          dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'});
           event.preventDefault();
           break;
         case 'ArrowUp':
-          dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' });
+          dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'});
           event.preventDefault();
           break;
         default:
           break;
       }
     },
-    [dispatch]
+    [dispatch],
   );
 
   const handleInputKeyPress = useCallback(
-    ({ key }) => {
+    ({key}) => {
       if (key === 'Enter') {
-        dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' });
+        dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'});
       }
     },
-    [dispatch]
+    [dispatch],
   );
 
   // Auto-focus search input
-  useEffect(() => {
-    if (inputRef.current === null) {
-      return () => {};
-    }
+  useEffect(
+    () => {
+      if (inputRef.current === null) {
+        return () => {};
+      }
 
-    const handleWindowKey = (event: KeyboardEvent) => {
-      const { key, metaKey } = event;
-      if (key === 'f' && metaKey) {
-        if (inputRef.current !== null) {
-          inputRef.current.focus();
-          event.preventDefault();
-          event.stopPropagation();
+      const handleWindowKey = (event: KeyboardEvent) => {
+        const {key, metaKey} = event;
+        if (key === 'f' && metaKey) {
+          if (inputRef.current !== null) {
+            inputRef.current.focus();
+            event.preventDefault();
+            event.stopPropagation();
+          }
         }
-      }
-    };
+      };
 
-    // It's important to listen to the ownerDocument to support the browser extension.
-    // Here we use portals to render individual tabs (e.g. Profiler),
-    // and the root document might belong to a different window.
-    const ownerDocument = inputRef.current.ownerDocument;
-    ownerDocument.addEventListener('keydown', handleWindowKey);
+      // It's important to listen to the ownerDocument to support the browser extension.
+      // Here we use portals to render individual tabs (e.g. Profiler),
+      // and the root document might belong to a different window.
+      const ownerDocument = inputRef.current.ownerDocument;
+      ownerDocument.addEventListener('keydown', handleWindowKey);
 
-    return () => ownerDocument.removeEventListener('keydown', handleWindowKey);
-  }, [inputRef]);
+      return () =>
+        ownerDocument.removeEventListener('keydown', handleWindowKey);
+    },
+    [inputRef],
+  );
 
   return (
     <div className={styles.SearchInput}>
@@ -104,25 +106,22 @@ export default function SearchInput(props: Props) {
       <Button
         className={styles.IconButton}
         disabled={!searchText}
-        onClick={() => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' })}
-        title="Scroll to previous search result"
-      >
+        onClick={() => dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'})}
+        title="Scroll to previous search result">
         <ButtonIcon type="up" />
       </Button>
       <Button
         className={styles.IconButton}
         disabled={!searchText}
-        onClick={() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' })}
-        title="Scroll to next search result"
-      >
+        onClick={() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'})}
+        title="Scroll to next search result">
         <ButtonIcon type="down" />
       </Button>
       <Button
         className={styles.IconButton}
         disabled={!searchText}
         onClick={resetSearch}
-        title="Reset search"
-      >
+        title="Reset search">
         <ButtonIcon type="close" />
       </Button>
     </div>
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
index 260e133c37759..90a114c9bacaf 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
@@ -1,15 +1,15 @@
 // @flow
 
-import React, { useCallback, useContext } from 'react';
-import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
-import { BridgeContext, StoreContext } from '../context';
+import React, {useCallback, useContext} from 'react';
+import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
+import {BridgeContext, StoreContext} from '../context';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import HooksTree from './HooksTree';
-import { ModalDialogContext } from '../ModalDialog';
+import {ModalDialogContext} from '../ModalDialog';
 import HocBadges from './HocBadges';
 import InspectedElementTree from './InspectedElementTree';
-import { InspectedElementContext } from './InspectedElementContext';
+import {InspectedElementContext} from './InspectedElementContext';
 import ViewElementSourceContext from './ViewElementSourceContext';
 import NativeStyleEditor from './NativeStyleEditor';
 import Toggle from '../Toggle';
@@ -25,25 +25,24 @@ import {
 
 import styles from './SelectedElement.css';
 
-import type { GetInspectedElementPath } from './InspectedElementContext';
-import type { Element, InspectedElement } from './types';
-import type { ElementType } from 'react-devtools-shared/src/types';
+import type {GetInspectedElementPath} from './InspectedElementContext';
+import type {Element, InspectedElement} from './types';
+import type {ElementType} from 'react-devtools-shared/src/types';
 
 export type Props = {||};
 
 export default function SelectedElement(_: Props) {
-  const { inspectedElementID } = useContext(TreeStateContext);
+  const {inspectedElementID} = useContext(TreeStateContext);
   const dispatch = useContext(TreeDispatcherContext);
-  const {
-    canViewElementSourceFunction,
-    viewElementSourceFunction,
-  } = useContext(ViewElementSourceContext);
+  const {canViewElementSourceFunction, viewElementSourceFunction} = useContext(
+    ViewElementSourceContext,
+  );
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
-  const { dispatch: modalDialogDispatch } = useContext(ModalDialogContext);
+  const {dispatch: modalDialogDispatch} = useContext(ModalDialogContext);
 
-  const { getInspectedElementPath, getInspectedElement } = useContext(
-    InspectedElementContext
+  const {getInspectedElementPath, getInspectedElement} = useContext(
+    InspectedElementContext,
   );
 
   const element =
@@ -54,42 +53,51 @@ export default function SelectedElement(_: Props) {
   const inspectedElement =
     inspectedElementID != null ? getInspectedElement(inspectedElementID) : null;
 
-  const highlightElement = useCallback(() => {
-    if (element !== null && inspectedElementID !== null) {
-      const rendererID = store.getRendererIDForElement(inspectedElementID);
-      if (rendererID !== null) {
-        bridge.send('highlightNativeElement', {
-          displayName: element.displayName,
-          hideAfterTimeout: true,
-          id: inspectedElementID,
-          openNativeElementsPanel: true,
-          rendererID,
-          scrollIntoView: true,
-        });
+  const highlightElement = useCallback(
+    () => {
+      if (element !== null && inspectedElementID !== null) {
+        const rendererID = store.getRendererIDForElement(inspectedElementID);
+        if (rendererID !== null) {
+          bridge.send('highlightNativeElement', {
+            displayName: element.displayName,
+            hideAfterTimeout: true,
+            id: inspectedElementID,
+            openNativeElementsPanel: true,
+            rendererID,
+            scrollIntoView: true,
+          });
+        }
       }
-    }
-  }, [bridge, element, inspectedElementID, store]);
+    },
+    [bridge, element, inspectedElementID, store],
+  );
 
-  const logElement = useCallback(() => {
-    if (inspectedElementID !== null) {
-      const rendererID = store.getRendererIDForElement(inspectedElementID);
-      if (rendererID !== null) {
-        bridge.send('logElementToConsole', {
-          id: inspectedElementID,
-          rendererID,
-        });
+  const logElement = useCallback(
+    () => {
+      if (inspectedElementID !== null) {
+        const rendererID = store.getRendererIDForElement(inspectedElementID);
+        if (rendererID !== null) {
+          bridge.send('logElementToConsole', {
+            id: inspectedElementID,
+            rendererID,
+          });
+        }
       }
-    }
-  }, [bridge, inspectedElementID, store]);
-
-  const viewSource = useCallback(() => {
-    if (viewElementSourceFunction != null && inspectedElement !== null) {
-      viewElementSourceFunction(
-        inspectedElement.id,
-        ((inspectedElement: any): InspectedElement)
-      );
-    }
-  }, [inspectedElement, viewElementSourceFunction]);
+    },
+    [bridge, inspectedElementID, store],
+  );
+
+  const viewSource = useCallback(
+    () => {
+      if (viewElementSourceFunction != null && inspectedElement !== null) {
+        viewElementSourceFunction(
+          inspectedElement.id,
+          ((inspectedElement: any): InspectedElement),
+        );
+      }
+    },
+    [inspectedElement, viewElementSourceFunction],
+  );
 
   // In some cases (e.g. FB internal usage) the standalone shell might not be able to view the source.
   // To detect this case, we defer to an injected helper function (if present).
@@ -110,53 +118,56 @@ export default function SelectedElement(_: Props) {
     inspectedElement != null && inspectedElement.canToggleSuspense;
 
   // TODO (suspense toggle) Would be nice to eventually use a two setState pattern here as well.
-  const toggleSuspended = useCallback(() => {
-    let nearestSuspenseElement = null;
-    let currentElement = element;
-    while (currentElement !== null) {
-      if (currentElement.type === ElementTypeSuspense) {
-        nearestSuspenseElement = currentElement;
-        break;
-      } else if (currentElement.parentID > 0) {
-        currentElement = store.getElementByID(currentElement.parentID);
-      } else {
-        currentElement = null;
-      }
-    }
-
-    // If we didn't find a Suspense ancestor, we can't suspend.
-    // Instead we can show a warning to the user.
-    if (nearestSuspenseElement === null) {
-      modalDialogDispatch({
-        type: 'SHOW',
-        content: <CannotSuspendWarningMessage />,
-      });
-    } else {
-      const nearestSuspenseElementID = nearestSuspenseElement.id;
-
-      // If we're suspending from an arbitary (non-Suspense) component, select the nearest Suspense element in the Tree.
-      // This way when the fallback UI is shown and the current element is hidden, something meaningful is selected.
-      if (nearestSuspenseElement !== element) {
-        dispatch({
-          type: 'SELECT_ELEMENT_BY_ID',
-          payload: nearestSuspenseElementID,
-        });
+  const toggleSuspended = useCallback(
+    () => {
+      let nearestSuspenseElement = null;
+      let currentElement = element;
+      while (currentElement !== null) {
+        if (currentElement.type === ElementTypeSuspense) {
+          nearestSuspenseElement = currentElement;
+          break;
+        } else if (currentElement.parentID > 0) {
+          currentElement = store.getElementByID(currentElement.parentID);
+        } else {
+          currentElement = null;
+        }
       }
 
-      const rendererID = store.getRendererIDForElement(
-        nearestSuspenseElementID
-      );
-
-      // Toggle suspended
-      if (rendererID !== null) {
-        bridge.send('overrideSuspense', {
-          id: nearestSuspenseElementID,
-          rendererID,
-          forceFallback: !isSuspended,
+      // If we didn't find a Suspense ancestor, we can't suspend.
+      // Instead we can show a warning to the user.
+      if (nearestSuspenseElement === null) {
+        modalDialogDispatch({
+          type: 'SHOW',
+          content: <CannotSuspendWarningMessage />,
         });
+      } else {
+        const nearestSuspenseElementID = nearestSuspenseElement.id;
+
+        // If we're suspending from an arbitary (non-Suspense) component, select the nearest Suspense element in the Tree.
+        // This way when the fallback UI is shown and the current element is hidden, something meaningful is selected.
+        if (nearestSuspenseElement !== element) {
+          dispatch({
+            type: 'SELECT_ELEMENT_BY_ID',
+            payload: nearestSuspenseElementID,
+          });
+        }
+
+        const rendererID = store.getRendererIDForElement(
+          nearestSuspenseElementID,
+        );
+
+        // Toggle suspended
+        if (rendererID !== null) {
+          bridge.send('overrideSuspense', {
+            id: nearestSuspenseElementID,
+            rendererID,
+            forceFallback: !isSuspended,
+          });
+        }
       }
-    }
-  }, [bridge, dispatch, element, isSuspended, modalDialogDispatch, store]);
+    },
+    [bridge, dispatch, element, isSuspended, modalDialogDispatch, store],
+  );
 
   if (element === null) {
     return (
@@ -184,8 +195,7 @@ export default function SelectedElement(_: Props) {
               isSuspended
                 ? 'Unsuspend the selected component'
                 : 'Suspend the selected component'
-            }
-          >
+            }>
             <ButtonIcon type="suspend" />
           </Toggle>
         )}
@@ -193,24 +203,21 @@ export default function SelectedElement(_: Props) {
           <Button
             className={styles.IconButton}
             onClick={highlightElement}
-            title="Inspect the matching DOM element"
-          >
+            title="Inspect the matching DOM element">
             <ButtonIcon type="view-dom" />
           </Button>
         )}
         <Button
           className={styles.IconButton}
           onClick={logElement}
-          title="Log this component data to the console"
-        >
+          title="Log this component data to the console">
           <ButtonIcon type="log-data" />
         </Button>
         <Button
           className={styles.IconButton}
           disabled={!canViewSource}
           onClick={viewSource}
-          title="View source for this element"
-        >
+          title="View source for this element">
           <ButtonIcon type="view-source" />
         </Button>
       </div>
@@ -248,7 +255,7 @@ function InspectedElementView({
   getInspectedElementPath,
   inspectedElement,
 }: InspectedElementViewProps) {
-  const { id, type } = element;
+  const {id, type} = element;
   const {
     canEditFunctionProps,
     canEditHooks,
@@ -260,7 +267,7 @@ function InspectedElementView({
     state,
   } = inspectedElement;
 
-  const { ownerID } = useContext(TreeStateContext);
+  const {ownerID} = useContext(TreeStateContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
@@ -268,19 +275,19 @@ function InspectedElementView({
     (path: Array<string | number>) => {
       getInspectedElementPath(id, ['context', ...path]);
     },
-    [getInspectedElementPath, id]
+    [getInspectedElementPath, id],
   );
   const inspectPropsPath = useCallback(
     (path: Array<string | number>) => {
       getInspectedElementPath(id, ['props', ...path]);
     },
-    [getInspectedElementPath, id]
+    [getInspectedElementPath, id],
   );
   const inspectStatePath = useCallback(
     (path: Array<string | number>) => {
       getInspectedElementPath(id, ['state', ...path]);
     },
-    [getInspectedElementPath, id]
+    [getInspectedElementPath, id],
   );
 
   let overrideContextFn = null;
@@ -291,19 +298,19 @@ function InspectedElementView({
     overrideContextFn = (path: Array<string | number>, value: any) => {
       const rendererID = store.getRendererIDForElement(id);
       if (rendererID !== null) {
-        bridge.send('overrideContext', { id, path, rendererID, value });
+        bridge.send('overrideContext', {id, path, rendererID, value});
       }
     };
     overridePropsFn = (path: Array<string | number>, value: any) => {
       const rendererID = store.getRendererIDForElement(id);
       if (rendererID !== null) {
-        bridge.send('overrideProps', { id, path, rendererID, value });
+        bridge.send('overrideProps', {id, path, rendererID, value});
       }
     };
     overrideStateFn = (path: Array<string | number>, value: any) => {
       const rendererID = store.getRendererIDForElement(id);
       if (rendererID !== null) {
-        bridge.send('overrideState', { id, path, rendererID, value });
+        bridge.send('overrideState', {id, path, rendererID, value});
       }
     };
   } else if (
@@ -315,7 +322,7 @@ function InspectedElementView({
     overridePropsFn = (path: Array<string | number>, value: any) => {
       const rendererID = store.getRendererIDForElement(id);
       if (rendererID !== null) {
-        bridge.send('overrideProps', { id, path, rendererID, value });
+        bridge.send('overrideProps', {id, path, rendererID, value});
       }
     };
   } else if (type === ElementTypeSuspense && canToggleSuspense) {
@@ -370,21 +377,23 @@ function InspectedElementView({
 
       <NativeStyleEditor />
 
-      {ownerID === null && owners !== null && owners.length > 0 && (
-        <div className={styles.Owners}>
-          <div className={styles.OwnersHeader}>rendered by</div>
-          {owners.map(owner => (
-            <OwnerView
-              key={owner.id}
-              displayName={owner.displayName || 'Anonymous'}
-              hocDisplayNames={owner.hocDisplayNames}
-              id={owner.id}
-              isInStore={store.containsElement(owner.id)}
-              type={owner.type}
-            />
-          ))}
-        </div>
-      )}
+      {ownerID === null &&
+        owners !== null &&
+        owners.length > 0 && (
+          <div className={styles.Owners}>
+            <div className={styles.OwnersHeader}>rendered by</div>
+            {owners.map(owner => (
+              <OwnerView
+                key={owner.id}
+                displayName={owner.displayName || 'Anonymous'}
+                hocDisplayNames={owner.hocDisplayNames}
+                id={owner.id}
+                isInStore={store.containsElement(owner.id)}
+                type={owner.type}
+              />
+            ))}
+          </div>
+        )}
     </div>
   );
 }
@@ -412,7 +421,7 @@ function OwnerView({
         type: 'SELECT_ELEMENT_BY_ID',
         payload: id,
       }),
-    [dispatch, id]
+    [dispatch, id],
   );
 
   return (
@@ -420,12 +429,10 @@ function OwnerView({
       key={id}
       className={styles.OwnerButton}
       disabled={!isInStore}
-      onClick={handleClick}
-    >
+      onClick={handleClick}>
       <span
         className={`${styles.Owner} ${isInStore ? '' : styles.NotInStore}`}
-        title={displayName}
-      >
+        title={displayName}>
         {displayName}
       </span>
       <Badge hocDisplayNames={hocDisplayNames} type={type} />
@@ -439,7 +446,7 @@ function CannotSuspendWarningMessage() {
     filter =>
       filter.type === ComponentFilterElementType &&
       filter.value === ElementTypeSuspense &&
-      filter.isEnabled
+      filter.isEnabled,
   );
 
   // Has the user filted out Suspense nodes from the tree?
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js b/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js
index f5bdebdd59933..b90f4400e77d9 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js
@@ -1,11 +1,11 @@
 // @flow
 
-import React, { useContext, useMemo } from 'react';
-import { TreeStateContext } from './TreeContext';
-import { SettingsContext } from '../Settings/SettingsContext';
+import React, {useContext, useMemo} from 'react';
+import {TreeStateContext} from './TreeContext';
+import {SettingsContext} from '../Settings/SettingsContext';
 import TreeFocusedContext from './TreeFocusedContext';
-import { StoreContext } from '../context';
-import { useSubscription } from '../hooks';
+import {StoreContext} from '../context';
+import {useSubscription} from '../hooks';
 import Store from '../../store';
 
 import styles from './SelectedTreeHighlight.css';
@@ -16,10 +16,10 @@ type Data = {|
 |};
 
 export default function SelectedTreeHighlight(_: {||}) {
-  const { lineHeight } = useContext(SettingsContext);
+  const {lineHeight} = useContext(SettingsContext);
   const store = useContext(StoreContext);
   const treeFocused = useContext(TreeFocusedContext);
-  const { ownerID, selectedElementID } = useContext(TreeStateContext);
+  const {ownerID, selectedElementID} = useContext(TreeStateContext);
 
   const subscription = useMemo(
     () => ({
@@ -74,7 +74,7 @@ export default function SelectedTreeHighlight(_: {||}) {
         };
       },
     }),
-    [selectedElementID, store]
+    [selectedElementID, store],
   );
   const data = useSubscription<Data | null>(subscription);
 
@@ -86,7 +86,7 @@ export default function SelectedTreeHighlight(_: {||}) {
     return null;
   }
 
-  const { startIndex, stopIndex } = data;
+  const {startIndex, stopIndex} = data;
 
   return (
     <div
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
index ee64ee9580f8c..60f0b0a06c3e0 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
@@ -11,10 +11,10 @@ import React, {
   useState,
 } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { FixedSizeList } from 'react-window';
-import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
-import { SettingsContext } from '../Settings/SettingsContext';
-import { BridgeContext, StoreContext } from '../context';
+import {FixedSizeList} from 'react-window';
+import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
+import {SettingsContext} from '../Settings/SettingsContext';
+import {BridgeContext, StoreContext} from '../context';
 import ElementView from './Element';
 import InspectHostNodesToggle from './InspectHostNodesToggle';
 import OwnersStack from './OwnersStack';
@@ -31,7 +31,7 @@ const DEFAULT_INDENTATION_SIZE = 12;
 export type ItemData = {|
   numElements: number,
   isNavigatingWithKeyboard: boolean,
-  lastScrolledIDRef: { current: number | null },
+  lastScrolledIDRef: {current: number | null},
   onElementMouseEnter: (id: number) => void,
   treeFocused: boolean,
 |};
@@ -51,14 +51,14 @@ export default function Tree(props: Props) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
   const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = useState(
-    false
+    false,
   );
   const treeRef = useRef<HTMLDivElement | null>(null);
   const focusTargetRef = useRef<HTMLDivElement | null>(null);
 
   const [treeFocused, setTreeFocused] = useState<boolean>(false);
 
-  const { lineHeight } = useContext(SettingsContext);
+  const {lineHeight} = useContext(SettingsContext);
 
   // Make sure a newly selected element is visible in the list.
   // This is helpful for things like the owners list and search.
@@ -77,21 +77,27 @@ export default function Tree(props: Props) {
         list.scrollToItem(selectedElementIndex, 'smart');
       }
     },
-    [selectedElementIndex]
+    [selectedElementIndex],
   );
 
   // Picking an element in the inspector should put focus into the tree.
   // This ensures that keyboard navigation works right after picking a node.
-  useEffect(() => {
-    function handleStopInspectingNative(didSelectNode) {
-      if (didSelectNode && focusTargetRef.current !== null) {
-        focusTargetRef.current.focus();
+  useEffect(
+    () => {
+      function handleStopInspectingNative(didSelectNode) {
+        if (didSelectNode && focusTargetRef.current !== null) {
+          focusTargetRef.current.focus();
+        }
       }
-    }
-    bridge.addListener('stopInspectingNative', handleStopInspectingNative);
-    return () =>
-      bridge.removeListener('stopInspectingNative', handleStopInspectingNative);
-  }, [bridge]);
+      bridge.addListener('stopInspectingNative', handleStopInspectingNative);
+      return () =>
+        bridge.removeListener(
+          'stopInspectingNative',
+          handleStopInspectingNative,
+        );
+    },
+    [bridge],
+  );
 
   // This ref is passed down the context to elements.
   // It lets them avoid autoscrolling to the same item many times
@@ -99,87 +105,93 @@ export default function Tree(props: Props) {
   const lastScrolledIDRef = useRef<number | null>(null);
 
   // Navigate the tree with up/down arrow keys.
-  useEffect(() => {
-    if (treeRef.current === null) {
-      return () => {};
-    }
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if ((event: any).target.tagName === 'INPUT' || event.defaultPrevented) {
-        return;
+  useEffect(
+    () => {
+      if (treeRef.current === null) {
+        return () => {};
       }
 
-      // TODO We should ignore arrow keys if the focus is outside of DevTools.
-      // Otherwise the inline (embedded) DevTools might change selection unexpectedly,
-      // e.g. when a text input or a select has focus.
-
-      let element;
-      switch (event.key) {
-        case 'ArrowDown':
-          event.preventDefault();
-          dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' });
-          break;
-        case 'ArrowLeft':
-          event.preventDefault();
-          element =
-            selectedElementID !== null
-              ? store.getElementByID(selectedElementID)
-              : null;
-          if (element !== null) {
-            if (element.children.length > 0 && !element.isCollapsed) {
-              store.toggleIsCollapsed(element.id, true);
-            } else {
-              dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' });
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if ((event: any).target.tagName === 'INPUT' || event.defaultPrevented) {
+          return;
+        }
+
+        // TODO We should ignore arrow keys if the focus is outside of DevTools.
+        // Otherwise the inline (embedded) DevTools might change selection unexpectedly,
+        // e.g. when a text input or a select has focus.
+
+        let element;
+        switch (event.key) {
+          case 'ArrowDown':
+            event.preventDefault();
+            dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'});
+            break;
+          case 'ArrowLeft':
+            event.preventDefault();
+            element =
+              selectedElementID !== null
+                ? store.getElementByID(selectedElementID)
+                : null;
+            if (element !== null) {
+              if (element.children.length > 0 && !element.isCollapsed) {
+                store.toggleIsCollapsed(element.id, true);
+              } else {
+                dispatch({type: 'SELECT_PARENT_ELEMENT_IN_TREE'});
+              }
             }
-          }
-          break;
-        case 'ArrowRight':
-          event.preventDefault();
-          element =
-            selectedElementID !== null
-              ? store.getElementByID(selectedElementID)
-              : null;
-          if (element !== null) {
-            if (element.children.length > 0 && element.isCollapsed) {
-              store.toggleIsCollapsed(element.id, false);
-            } else {
-              dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' });
+            break;
+          case 'ArrowRight':
+            event.preventDefault();
+            element =
+              selectedElementID !== null
+                ? store.getElementByID(selectedElementID)
+                : null;
+            if (element !== null) {
+              if (element.children.length > 0 && element.isCollapsed) {
+                store.toggleIsCollapsed(element.id, false);
+              } else {
+                dispatch({type: 'SELECT_CHILD_ELEMENT_IN_TREE'});
+              }
             }
-          }
-          break;
-        case 'ArrowUp':
-          event.preventDefault();
-          dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' });
-          break;
-        default:
-          return;
-      }
-      setIsNavigatingWithKeyboard(true);
-    };
-
-    // It's important to listen to the ownerDocument to support the browser extension.
-    // Here we use portals to render individual tabs (e.g. Profiler),
-    // and the root document might belong to a different window.
-    const ownerDocument = treeRef.current.ownerDocument;
-    ownerDocument.addEventListener('keydown', handleKeyDown);
-
-    return () => {
-      ownerDocument.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [dispatch, selectedElementID, store]);
+            break;
+          case 'ArrowUp':
+            event.preventDefault();
+            dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'});
+            break;
+          default:
+            return;
+        }
+        setIsNavigatingWithKeyboard(true);
+      };
+
+      // It's important to listen to the ownerDocument to support the browser extension.
+      // Here we use portals to render individual tabs (e.g. Profiler),
+      // and the root document might belong to a different window.
+      const ownerDocument = treeRef.current.ownerDocument;
+      ownerDocument.addEventListener('keydown', handleKeyDown);
+
+      return () => {
+        ownerDocument.removeEventListener('keydown', handleKeyDown);
+      };
+    },
+    [dispatch, selectedElementID, store],
+  );
 
   // Focus management.
   const handleBlur = useCallback(() => setTreeFocused(false), []);
-  const handleFocus = useCallback(() => {
-    setTreeFocused(true);
-
-    if (selectedElementIndex === null && numElements > 0) {
-      dispatch({
-        type: 'SELECT_ELEMENT_AT_INDEX',
-        payload: 0,
-      });
-    }
-  }, [dispatch, numElements, selectedElementIndex]);
+  const handleFocus = useCallback(
+    () => {
+      setTreeFocused(true);
+
+      if (selectedElementIndex === null && numElements > 0) {
+        dispatch({
+          type: 'SELECT_ELEMENT_AT_INDEX',
+          payload: 0,
+        });
+      }
+    },
+    [dispatch, numElements, selectedElementIndex],
+  );
 
   const handleKeyPress = useCallback(
     event => {
@@ -187,14 +199,14 @@ export default function Tree(props: Props) {
         case 'Enter':
         case ' ':
           if (selectedElementID !== null) {
-            dispatch({ type: 'SELECT_OWNER', payload: selectedElementID });
+            dispatch({type: 'SELECT_OWNER', payload: selectedElementID});
           }
           break;
         default:
           break;
       }
     },
-    [dispatch, selectedElementID]
+    [dispatch, selectedElementID],
   );
 
   const highlightNativeElement = useCallback(
@@ -212,37 +224,40 @@ export default function Tree(props: Props) {
         });
       }
     },
-    [store, bridge]
+    [store, bridge],
   );
 
   // If we switch the selected element while using the keyboard,
   // start highlighting it in the DOM instead of the last hovered node.
-  const searchRef = useRef({ searchIndex, searchResults });
-  useEffect(() => {
-    let didSelectNewSearchResult = false;
-    if (
-      searchRef.current.searchIndex !== searchIndex ||
-      searchRef.current.searchResults !== searchResults
-    ) {
-      searchRef.current.searchIndex = searchIndex;
-      searchRef.current.searchResults = searchResults;
-      didSelectNewSearchResult = true;
-    }
-    if (isNavigatingWithKeyboard || didSelectNewSearchResult) {
-      if (selectedElementID !== null) {
-        highlightNativeElement(selectedElementID);
-      } else {
-        bridge.send('clearNativeElementHighlight');
+  const searchRef = useRef({searchIndex, searchResults});
+  useEffect(
+    () => {
+      let didSelectNewSearchResult = false;
+      if (
+        searchRef.current.searchIndex !== searchIndex ||
+        searchRef.current.searchResults !== searchResults
+      ) {
+        searchRef.current.searchIndex = searchIndex;
+        searchRef.current.searchResults = searchResults;
+        didSelectNewSearchResult = true;
       }
-    }
-  }, [
-    bridge,
-    isNavigatingWithKeyboard,
-    highlightNativeElement,
-    searchIndex,
-    searchResults,
-    selectedElementID,
-  ]);
+      if (isNavigatingWithKeyboard || didSelectNewSearchResult) {
+        if (selectedElementID !== null) {
+          highlightNativeElement(selectedElementID);
+        } else {
+          bridge.send('clearNativeElementHighlight');
+        }
+      }
+    },
+    [
+      bridge,
+      isNavigatingWithKeyboard,
+      highlightNativeElement,
+      searchIndex,
+      searchResults,
+      selectedElementID,
+    ],
+  );
 
   // Highlight last hovered element.
   const handleElementMouseEnter = useCallback(
@@ -253,7 +268,7 @@ export default function Tree(props: Props) {
         highlightNativeElement(id);
       }
     },
-    [isNavigatingWithKeyboard, highlightNativeElement]
+    [isNavigatingWithKeyboard, highlightNativeElement],
   );
 
   const handleMouseMove = useCallback(() => {
@@ -262,9 +277,12 @@ export default function Tree(props: Props) {
     setIsNavigatingWithKeyboard(false);
   }, []);
 
-  const handleMouseLeave = useCallback(() => {
-    bridge.send('clearNativeElementHighlight');
-  }, [bridge]);
+  const handleMouseLeave = useCallback(
+    () => {
+      bridge.send('clearNativeElementHighlight');
+    },
+    [bridge],
+  );
 
   // Let react-window know to re-render any time the underlying tree data changes.
   // This includes the owner context, since it controls a filtered view of the tree.
@@ -282,12 +300,12 @@ export default function Tree(props: Props) {
       handleElementMouseEnter,
       lastScrolledIDRef,
       treeFocused,
-    ]
+    ],
   );
 
   const itemKey = useCallback(
     (index: number) => store.getElementIDAtIndex(index),
-    [store]
+    [store],
   );
 
   return (
@@ -314,10 +332,9 @@ export default function Tree(props: Props) {
           onMouseMove={handleMouseMove}
           onMouseLeave={handleMouseLeave}
           ref={focusTargetRef}
-          tabIndex={0}
-        >
+          tabIndex={0}>
           <AutoSizer>
-            {({ height, width }) => (
+            {({height, width}) => (
               // $FlowFixMe https://github.com/facebook/flow/issues/7341
               <FixedSizeList
                 className={styles.List}
@@ -328,8 +345,7 @@ export default function Tree(props: Props) {
                 itemKey={itemKey}
                 itemSize={lineHeight}
                 ref={listCallbackRef}
-                width={width}
-              >
+                width={width}>
                 {ElementView}
               </FixedSizeList>
             )}
@@ -383,8 +399,8 @@ export default function Tree(props: Props) {
 function updateIndentationSizeVar(
   innerDiv: HTMLDivElement,
   cachedChildWidths: WeakMap<HTMLElement, number>,
-  indentationSizeRef: {| current: number |},
-  prevListWidthRef: {| current: number |}
+  indentationSizeRef: {|current: number|},
+  prevListWidthRef: {|current: number|},
 ): void {
   const list = ((innerDiv.parentElement: any): HTMLDivElement);
   const listWidth = list.clientWidth;
@@ -411,7 +427,7 @@ function updateIndentationSizeVar(
     if (cachedChildWidth != null) {
       childWidth = cachedChildWidth;
     } else {
-      const { firstElementChild } = child;
+      const {firstElementChild} = child;
 
       // Skip over e.g. the guideline element
       if (firstElementChild != null) {
@@ -430,12 +446,12 @@ function updateIndentationSizeVar(
   list.style.setProperty('--indentation-size', `${maxIndentationSize}px`);
 }
 
-function InnerElementType({ children, style, ...rest }) {
-  const { ownerID } = useContext(TreeStateContext);
+function InnerElementType({children, style, ...rest}) {
+  const {ownerID} = useContext(TreeStateContext);
 
   const cachedChildWidths = useMemo<WeakMap<HTMLElement, number>>(
     () => new WeakMap(),
-    []
+    [],
   );
 
   // This ref tracks the current indentation size.
@@ -468,7 +484,7 @@ function InnerElementType({ children, style, ...rest }) {
         divRef.current,
         cachedChildWidths,
         indentationSizeRef,
-        prevListWidthRef
+        prevListWidthRef,
       );
     }
   });
@@ -482,8 +498,7 @@ function InnerElementType({ children, style, ...rest }) {
       className={styles.InnerElementType}
       ref={divRef}
       style={style}
-      {...rest}
-    >
+      {...rest}>
       <SelectedTreeHighlight />
       {children}
     </div>
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
index 9ae209da69b79..a6da4dea7a40b 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
@@ -32,11 +32,11 @@ import {
   unstable_runWithPriority as runWithPriority,
   unstable_UserBlockingPriority as UserBlockingPriority,
 } from 'scheduler';
-import { createRegExp } from '../utils';
-import { BridgeContext, StoreContext } from '../context';
+import {createRegExp} from '../utils';
+import {BridgeContext, StoreContext} from '../context';
 import Store from '../../store';
 
-import type { Element } from './types';
+import type {Element} from './types';
 
 export type StateContext = {|
   // Tree
@@ -120,12 +120,12 @@ type Action =
 export type DispatcherContext = (action: Action) => void;
 
 const TreeStateContext = createContext<StateContext>(
-  ((null: any): StateContext)
+  ((null: any): StateContext),
 );
 TreeStateContext.displayName = 'TreeStateContext';
 
 const TreeDispatcherContext = createContext<DispatcherContext>(
-  ((null: any): DispatcherContext)
+  ((null: any): DispatcherContext),
 );
 TreeDispatcherContext.displayName = 'TreeDispatcherContext';
 
@@ -149,7 +149,7 @@ type State = {|
 |};
 
 function reduceTreeState(store: Store, state: State, action: Action): State {
-  let { numElements, ownerID, selectedElementIndex, selectedElementID } = state;
+  let {numElements, ownerID, selectedElementIndex, selectedElementID} = state;
 
   let lookupIDForIndex = true;
 
@@ -169,7 +169,7 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
           removedIDs.has(selectedElementID)
         ) {
           selectedElementID = ((removedIDs.get(
-            selectedElementID
+            selectedElementID,
           ): any): number);
         }
         if (selectedElementID === 0) {
@@ -180,7 +180,7 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
       case 'SELECT_CHILD_ELEMENT_IN_TREE':
         if (selectedElementIndex !== null) {
           const selectedElement = store.getElementAtIndex(
-            ((selectedElementIndex: any): number)
+            ((selectedElementIndex: any): number),
           );
           if (
             selectedElement !== null &&
@@ -222,11 +222,11 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
       case 'SELECT_PARENT_ELEMENT_IN_TREE':
         if (selectedElementIndex !== null) {
           const selectedElement = store.getElementAtIndex(
-            ((selectedElementIndex: any): number)
+            ((selectedElementIndex: any): number),
           );
           if (selectedElement !== null && selectedElement.parentID !== null) {
             const parentIndex = store.getIndexOfElementID(
-              selectedElement.parentID
+              selectedElement.parentID,
             );
             if (parentIndex !== null) {
               selectedElementIndex = parentIndex;
@@ -253,7 +253,7 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
       selectedElementID = null;
     } else {
       selectedElementID = store.getElementIDAtIndex(
-        ((selectedElementIndex: any): number)
+        ((selectedElementIndex: any): number),
       );
     }
   }
@@ -336,13 +336,13 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
             // It's possible that multiple tree operations will fire before this action has run.
             // So it's important to check for elements that may have been added and then removed.
             if (element !== null) {
-              const { displayName } = element;
+              const {displayName} = element;
 
               // Add this item to the search results if it matches.
               const regExp = createRegExp(searchText);
               if (displayName !== null && regExp.test(displayName)) {
                 const newElementIndex = ((store.getIndexOfElementID(
-                  id
+                  id,
                 ): any): number);
 
                 let foundMatch = false;
@@ -386,7 +386,7 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
                 searchIndex = getNearestResultIndex(
                   store,
                   searchResults,
-                  selectedElementIndex
+                  selectedElementIndex,
                 );
               } else {
                 searchIndex = 0;
@@ -394,7 +394,7 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
             } else {
               searchIndex = Math.min(
                 ((prevSearchIndex: any): number),
-                searchResults.length - 1
+                searchResults.length - 1,
               );
             }
           }
@@ -421,7 +421,7 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
   if (didRequestSearch && searchIndex !== null) {
     selectedElementID = ((searchResults[searchIndex]: any): number);
     selectedElementIndex = store.getIndexOfElementID(
-      ((selectedElementID: any): number)
+      ((selectedElementID: any): number),
     );
   }
 
@@ -463,7 +463,7 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
           if (selectedElementID !== null) {
             // Mutation might have caused the index of this ID to shift.
             selectedElementIndex = ownerFlatTree.findIndex(
-              element => element.id === selectedElementID
+              element => element.id === selectedElementID,
             );
           }
         }
@@ -499,7 +499,7 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
           selectedElementIndex = null;
         } else {
           selectedElementIndex = ownerFlatTree.findIndex(
-            element => element.id === payload
+            element => element.id === payload,
           );
 
           // If the selected element is outside of the current owners list,
@@ -588,9 +588,9 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
 function reduceSuspenseState(
   store: Store,
   state: State,
-  action: Action
+  action: Action,
 ): State {
-  const { type } = action;
+  const {type} = action;
   switch (type) {
     case 'UPDATE_INSPECTED_ELEMENT_ID':
       if (state.inspectedElementID !== state.selectedElementID) {
@@ -634,7 +634,7 @@ function TreeContextController({
   // so it's okay for the reducer to have an empty dependencies array.
   const reducer = useMemo(
     () => (state: State, action: Action): State => {
-      const { type } = action;
+      const {type} = action;
       switch (type) {
         case 'GO_TO_NEXT_SEARCH_RESULT':
         case 'GO_TO_PREVIOUS_SEARCH_RESULT':
@@ -672,7 +672,7 @@ function TreeContextController({
           throw new Error(`Unrecognized action "${type}"`);
       }
     },
-    [store]
+    [store],
   );
 
   const [state, dispatch] = useReducer(reducer, {
@@ -702,62 +702,71 @@ function TreeContextController({
       // In this case, the current (and "next") priorities would both be "normal",
       // and suspense would potentially block both updates.
       runWithPriority(UserBlockingPriority, () => dispatch(action));
-      next(() => dispatch({ type: 'UPDATE_INSPECTED_ELEMENT_ID' }));
+      next(() => dispatch({type: 'UPDATE_INSPECTED_ELEMENT_ID'}));
     },
-    [dispatch]
+    [dispatch],
   );
 
   // Listen for host element selections.
-  useEffect(() => {
-    const handleSelectFiber = (id: number) =>
-      dispatchWrapper({ type: 'SELECT_ELEMENT_BY_ID', payload: id });
-    bridge.addListener('selectFiber', handleSelectFiber);
-    return () => bridge.removeListener('selectFiber', handleSelectFiber);
-  }, [bridge, dispatchWrapper]);
+  useEffect(
+    () => {
+      const handleSelectFiber = (id: number) =>
+        dispatchWrapper({type: 'SELECT_ELEMENT_BY_ID', payload: id});
+      bridge.addListener('selectFiber', handleSelectFiber);
+      return () => bridge.removeListener('selectFiber', handleSelectFiber);
+    },
+    [bridge, dispatchWrapper],
+  );
 
   // If a newly-selected search result or inspection selection is inside of a collapsed subtree, auto expand it.
   // This needs to be a layout effect to avoid temporarily flashing an incorrect selection.
   const prevSelectedElementID = useRef<number | null>(null);
-  useLayoutEffect(() => {
-    if (state.selectedElementID !== prevSelectedElementID.current) {
-      prevSelectedElementID.current = state.selectedElementID;
-
-      if (state.selectedElementID !== null) {
-        let element = store.getElementByID(state.selectedElementID);
-        if (element !== null && element.parentID > 0) {
-          store.toggleIsCollapsed(element.parentID, false);
+  useLayoutEffect(
+    () => {
+      if (state.selectedElementID !== prevSelectedElementID.current) {
+        prevSelectedElementID.current = state.selectedElementID;
+
+        if (state.selectedElementID !== null) {
+          let element = store.getElementByID(state.selectedElementID);
+          if (element !== null && element.parentID > 0) {
+            store.toggleIsCollapsed(element.parentID, false);
+          }
         }
       }
-    }
-  }, [state.selectedElementID, store]);
+    },
+    [state.selectedElementID, store],
+  );
 
   // Mutations to the underlying tree may impact this context (e.g. search results, selection state).
-  useEffect(() => {
-    const handleStoreMutated = ([addedElementIDs, removedElementIDs]: [
-      Array<number>,
-      Map<number, number>,
-    ]) => {
-      dispatchWrapper({
-        type: 'HANDLE_STORE_MUTATION',
-        payload: [addedElementIDs, removedElementIDs],
-      });
-    };
-
-    // Since this is a passive effect, the tree may have been mutated before our initial subscription.
-    if (store.revision !== initialRevision) {
-      // At the moment, we can treat this as a mutation.
-      // We don't know which Elements were newly added/removed, but that should be okay in this case.
-      // It would only impact the search state, which is unlikely to exist yet at this point.
-      dispatchWrapper({
-        type: 'HANDLE_STORE_MUTATION',
-        payload: [[], new Map()],
-      });
-    }
+  useEffect(
+    () => {
+      const handleStoreMutated = ([addedElementIDs, removedElementIDs]: [
+        Array<number>,
+        Map<number, number>,
+      ]) => {
+        dispatchWrapper({
+          type: 'HANDLE_STORE_MUTATION',
+          payload: [addedElementIDs, removedElementIDs],
+        });
+      };
+
+      // Since this is a passive effect, the tree may have been mutated before our initial subscription.
+      if (store.revision !== initialRevision) {
+        // At the moment, we can treat this as a mutation.
+        // We don't know which Elements were newly added/removed, but that should be okay in this case.
+        // It would only impact the search state, which is unlikely to exist yet at this point.
+        dispatchWrapper({
+          type: 'HANDLE_STORE_MUTATION',
+          payload: [[], new Map()],
+        });
+      }
 
-    store.addListener('mutated', handleStoreMutated);
+      store.addListener('mutated', handleStoreMutated);
 
-    return () => store.removeListener('mutated', handleStoreMutated);
-  }, [dispatchWrapper, initialRevision, store]);
+      return () => store.removeListener('mutated', handleStoreMutated);
+    },
+    [dispatchWrapper, initialRevision, store],
+  );
 
   return (
     <TreeStateContext.Provider value={state}>
@@ -771,10 +780,10 @@ function recursivelySearchTree(
   store: Store,
   elementID: number,
   regExp: RegExp,
-  searchResults: Array<number>
+  searchResults: Array<number>,
 ): void {
-  const { children, displayName, hocDisplayNames } = ((store.getElementByID(
-    elementID
+  const {children, displayName, hocDisplayNames} = ((store.getElementByID(
+    elementID,
   ): any): Element);
 
   if (displayName != null && regExp.test(displayName) === true) {
@@ -788,14 +797,14 @@ function recursivelySearchTree(
   }
 
   children.forEach(childID =>
-    recursivelySearchTree(store, childID, regExp, searchResults)
+    recursivelySearchTree(store, childID, regExp, searchResults),
   );
 }
 
 function getNearestResultIndex(
   store: Store,
   searchResults: Array<number>,
-  selectedElementIndex: number
+  selectedElementIndex: number,
 ): number {
   const index = searchResults.findIndex(id => {
     const index = store.getIndexOfElementID(id);
@@ -805,4 +814,4 @@ function getNearestResultIndex(
   return index === -1 ? 0 : index;
 }
 
-export { TreeDispatcherContext, TreeStateContext, TreeContextController };
+export {TreeDispatcherContext, TreeStateContext, TreeContextController};
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/TreeFocusedContext.js b/packages/react-devtools-shared/src/devtools/views/Components/TreeFocusedContext.js
index 7851db131633c..f5a266ae63989 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/TreeFocusedContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/TreeFocusedContext.js
@@ -1,6 +1,6 @@
 // @flow
 
-import { createContext } from 'react';
+import {createContext} from 'react';
 
 const TreeFocusedContext = createContext<boolean>(false);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js b/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js
index 643596b670001..ffb03c584f015 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js
@@ -1,6 +1,6 @@
 // @flow
 
-import { createContext } from 'react';
+import {createContext} from 'react';
 
 import type {
   CanViewElementSource,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/types.js b/packages/react-devtools-shared/src/devtools/views/Components/types.js
index 57cc31041629e..eda510320f345 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/types.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/types.js
@@ -1,7 +1,7 @@
 // @flow
 
-import type { Dehydrated } from 'react-devtools-shared/src/hydration';
-import type { ElementType } from 'react-devtools-shared/src/types';
+import type {Dehydrated} from 'react-devtools-shared/src/hydration';
+import type {ElementType} from 'react-devtools-shared/src/types';
 
 // Each element on the frontend corresponds to a Fiber on the backend.
 // Some of its information (e.g. id, type, displayName) come from the backend.
@@ -84,5 +84,9 @@ export type InspectedElement = {|
 
 export type DehydratedData = {|
   cleaned: Array<Array<string | number>>,
-  data: string | Dehydrated | Array<Dehydrated> | { [key: string]: string | Dehydrated },
+  data:
+    | string
+    | Dehydrated
+    | Array<Dehydrated>
+    | {[key: string]: string | Dehydrated},
 |};
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index a7e2016ccd39a..2ba7b4f66d1ff 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -5,17 +5,17 @@
 import '@reach/menu-button/styles.css';
 import '@reach/tooltip/styles.css';
 
-import React, { useMemo, useState } from 'react';
+import React, {useMemo, useState} from 'react';
 import Store from '../store';
-import { BridgeContext, StoreContext } from './context';
+import {BridgeContext, StoreContext} from './context';
 import Components from './Components/Components';
 import Profiler from './Profiler/Profiler';
 import TabBar from './TabBar';
-import { SettingsContextController } from './Settings/SettingsContext';
-import { TreeContextController } from './Components/TreeContext';
+import {SettingsContextController} from './Settings/SettingsContext';
+import {TreeContextController} from './Components/TreeContext';
 import ViewElementSourceContext from './Components/ViewElementSourceContext';
-import { ProfilerContextController } from './Profiler/ProfilerContext';
-import { ModalDialogContextController } from './ModalDialog';
+import {ProfilerContextController} from './Profiler/ProfilerContext';
+import {ModalDialogContextController} from './ModalDialog';
 import ReactLogo from './ReactLogo';
 import WarnIfLegacyBackendDetected from './WarnIfLegacyBackendDetected';
 import ShowWelcomeToTheNewDevToolsDialog from './ShowWelcomeToTheNewDevToolsDialog';
@@ -24,17 +24,17 @@ import styles from './DevTools.css';
 
 import './root.css';
 
-import type { InspectedElement } from 'react-devtools-shared/src/devtools/views/Components/types';
-import type { FrontendBridge } from 'react-devtools-shared/src/bridge';
+import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Components/types';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 
 export type BrowserTheme = 'dark' | 'light';
 export type TabID = 'components' | 'profiler';
 export type ViewElementSource = (
   id: number,
-  inspectedElement: InspectedElement
+  inspectedElement: InspectedElement,
 ) => void;
 export type CanViewElementSource = (
-  inspectedElement: InspectedElement
+  inspectedElement: InspectedElement,
 ) => boolean;
 
 export type Props = {|
@@ -100,7 +100,7 @@ export default function DevTools({
       canViewElementSourceFunction,
       viewElementSourceFunction,
     }),
-    [canViewElementSourceFunction, viewElementSourceFunction]
+    [canViewElementSourceFunction, viewElementSourceFunction],
   );
 
   return (
@@ -110,8 +110,7 @@ export default function DevTools({
           <SettingsContextController
             browserTheme={browserTheme}
             componentsPortalContainer={componentsPortalContainer}
-            profilerPortalContainer={profilerPortalContainer}
-          >
+            profilerPortalContainer={profilerPortalContainer}>
             <ViewElementSourceContext.Provider value={viewElementSource}>
               <TreeContextController>
                 <ProfilerContextController>
@@ -134,14 +133,12 @@ export default function DevTools({
                     )}
                     <div
                       className={styles.TabContent}
-                      hidden={tab !== 'components'}
-                    >
+                      hidden={tab !== 'components'}>
                       <Components portalContainer={componentsPortalContainer} />
                     </div>
                     <div
                       className={styles.TabContent}
-                      hidden={tab !== 'profiler'}
-                    >
+                      hidden={tab !== 'profiler'}>
                       <Profiler portalContainer={profilerPortalContainer} />
                     </div>
                   </div>
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary.js
index c6cd9b16c1ff8..df392a6a720bd 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import styles from './ErrorBoundary.css';
 
 type Props = {|
@@ -22,7 +22,7 @@ export default class ErrorBoundary extends Component<Props, State> {
     hasError: false,
   };
 
-  componentDidCatch(error: any, { componentStack }: any) {
+  componentDidCatch(error: any, {componentStack}: any) {
     const errorMessage =
       typeof error === 'object' && error.hasOwnProperty('message')
         ? error.message
@@ -45,8 +45,8 @@ export default class ErrorBoundary extends Component<Props, State> {
   }
 
   render() {
-    const { children } = this.props;
-    const { callStack, componentStack, errorMessage, hasError } = this.state;
+    const {children} = this.props;
+    const {callStack, componentStack, errorMessage, hasError} = this.state;
 
     let bugURL = process.env.GITHUB_URL;
     if (bugURL) {
@@ -66,7 +66,7 @@ export default class ErrorBoundary extends Component<Props, State> {
       }
 
       bugURL += `/issues/new?labels=${encodeURI(label)}&title=${encodeURI(
-        title
+        title,
       )}&body=${encodeURI(body)}`;
     }
 
@@ -81,8 +81,7 @@ export default class ErrorBoundary extends Component<Props, State> {
               href={bugURL}
               rel="noopener noreferrer"
               target="_blank"
-              title="Report bug"
-            >
+              title="Report bug">
               Report this issue
             </a>
           )}
diff --git a/packages/react-devtools-shared/src/devtools/views/Icon.js b/packages/react-devtools-shared/src/devtools/views/Icon.js
index b3b1c2c45cb07..69813c9ee6181 100644
--- a/packages/react-devtools-shared/src/devtools/views/Icon.js
+++ b/packages/react-devtools-shared/src/devtools/views/Icon.js
@@ -18,7 +18,7 @@ type Props = {|
   type: IconType,
 |};
 
-export default function Icon({ className = '', type }: Props) {
+export default function Icon({className = '', type}: Props) {
   let pathData = null;
   switch (type) {
     case 'arrow':
@@ -56,8 +56,7 @@ export default function Icon({ className = '', type }: Props) {
       className={`${styles.Icon} ${className}`}
       width="24"
       height="24"
-      viewBox="0 0 24 24"
-    >
+      viewBox="0 0 24 24">
       <path d="M0 0h24v24H0z" fill="none" />
       <path fill="currentColor" d={pathData} />
     </svg>
diff --git a/packages/react-devtools-shared/src/devtools/views/ModalDialog.js b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js
index e8fd44c93a8e5..5ec742b18874b 100644
--- a/packages/react-devtools-shared/src/devtools/views/ModalDialog.js
+++ b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js
@@ -9,7 +9,7 @@ import React, {
   useRef,
 } from 'react';
 import Button from './Button';
-import { useModalDismissSignal } from './hooks';
+import {useModalDismissSignal} from './hooks';
 
 import styles from './ModalDialog.css';
 
@@ -40,7 +40,7 @@ type ModalDialogContextType = {|
 |};
 
 const ModalDialogContext = createContext<ModalDialogContextType>(
-  ((null: any): ModalDialogContextType)
+  ((null: any): ModalDialogContextType),
 );
 ModalDialogContext.displayName = 'ModalDialogContext';
 
@@ -69,7 +69,7 @@ type Props = {|
   children: React$Node,
 |};
 
-function ModalDialogContextController({ children }: Props) {
+function ModalDialogContextController({children}: Props) {
   const [state, dispatch] = useReducer<State, Action>(dialogReducer, {
     canBeDismissed: true,
     content: null,
@@ -85,7 +85,7 @@ function ModalDialogContextController({ children }: Props) {
       title: state.title,
       dispatch,
     }),
-    [state, dispatch]
+    [state, dispatch],
   );
 
   return (
@@ -96,19 +96,22 @@ function ModalDialogContextController({ children }: Props) {
 }
 
 function ModalDialog(_: {||}) {
-  const { isVisible } = useContext(ModalDialogContext);
+  const {isVisible} = useContext(ModalDialogContext);
   return isVisible ? <ModalDialogImpl /> : null;
 }
 
 function ModalDialogImpl(_: {||}) {
-  const { canBeDismissed, content, dispatch, title } = useContext(
-    ModalDialogContext
+  const {canBeDismissed, content, dispatch, title} = useContext(
+    ModalDialogContext,
+  );
+  const dismissModal = useCallback(
+    () => {
+      if (canBeDismissed) {
+        dispatch({type: 'HIDE'});
+      }
+    },
+    [canBeDismissed, dispatch],
   );
-  const dismissModal = useCallback(() => {
-    if (canBeDismissed) {
-      dispatch({ type: 'HIDE' });
-    }
-  }, [canBeDismissed, dispatch]);
   const dialogRef = useRef<HTMLDivElement | null>(null);
 
   // It's important to trap click events within the dialog,
@@ -131,8 +134,7 @@ function ModalDialogImpl(_: {||}) {
       <div
         ref={dialogRef}
         className={styles.Dialog}
-        onClick={handleDialogClick}
-      >
+        onClick={handleDialogClick}>
         {title !== null && <div className={styles.Title}>{title}</div>}
         {content}
         {canBeDismissed && (
@@ -147,4 +149,4 @@ function ModalDialogImpl(_: {||}) {
   );
 }
 
-export { ModalDialog, ModalDialogContext, ModalDialogContextController };
+export {ModalDialog, ModalDialogContext, ModalDialogContextController};
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js
index a85f7702a3158..08021eb5483c5 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js
@@ -56,8 +56,7 @@ export default function ChartNode({
             opacity: isDimmed ? 0.75 : 1,
             display: width < minWidthToDisplay ? 'none' : 'block',
           }}
-          y={0}
-        >
+          y={0}>
           <div className={styles.Div} style={textStyle}>
             {label}
           </div>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
index d3223eb8defcb..6d223fb5d89a4 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
@@ -1,15 +1,15 @@
 // @flow
 
-import React, { useCallback, useContext } from 'react';
-import { ProfilerContext } from './ProfilerContext';
+import React, {useCallback, useContext} from 'react';
+import {ProfilerContext} from './ProfilerContext';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
-import { StoreContext } from '../context';
+import {StoreContext} from '../context';
 
 export default function ClearProfilingDataButton() {
   const store = useContext(StoreContext);
-  const { didRecordCommits, isProfiling } = useContext(ProfilerContext);
-  const { profilerStore } = store;
+  const {didRecordCommits, isProfiling} = useContext(ProfilerContext);
+  const {profilerStore} = store;
 
   const clear = useCallback(() => profilerStore.clear(), [profilerStore]);
 
@@ -17,8 +17,7 @@ export default function ClearProfilingDataButton() {
     <Button
       disabled={isProfiling || !didRecordCommits}
       onClick={clear}
-      title="Clear profiling data"
-    >
+      title="Clear profiling data">
       <ButtonIcon type="clear" />
     </Button>
   );
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
index 676a2f1334c7b..5574dd4046415 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
@@ -1,19 +1,19 @@
 // @flow
 
-import React, { forwardRef, useCallback, useContext, useMemo } from 'react';
+import React, {forwardRef, useCallback, useContext, useMemo} from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { FixedSizeList } from 'react-window';
-import { ProfilerContext } from './ProfilerContext';
+import {FixedSizeList} from 'react-window';
+import {ProfilerContext} from './ProfilerContext';
 import NoCommitData from './NoCommitData';
 import CommitFlamegraphListItem from './CommitFlamegraphListItem';
-import { scale } from './utils';
-import { StoreContext } from '../context';
-import { SettingsContext } from '../Settings/SettingsContext';
+import {scale} from './utils';
+import {StoreContext} from '../context';
+import {SettingsContext} from '../Settings/SettingsContext';
 
 import styles from './CommitFlamegraph.css';
 
-import type { ChartData, ChartNode } from './FlamegraphChartBuilder';
-import type { CommitTree } from './types';
+import type {ChartData, ChartNode} from './FlamegraphChartBuilder';
+import type {CommitTree} from './types';
 
 export type ItemData = {|
   chartData: ChartData,
@@ -25,18 +25,18 @@ export type ItemData = {|
 |};
 
 export default function CommitFlamegraphAutoSizer(_: {||}) {
-  const { profilerStore } = useContext(StoreContext);
-  const { rootID, selectedCommitIndex, selectFiber } = useContext(
-    ProfilerContext
+  const {profilerStore} = useContext(StoreContext);
+  const {rootID, selectedCommitIndex, selectFiber} = useContext(
+    ProfilerContext,
   );
-  const { profilingCache } = profilerStore;
+  const {profilingCache} = profilerStore;
 
   const deselectCurrentFiber = useCallback(
     event => {
       event.stopPropagation();
       selectFiber(null, null);
     },
-    [selectFiber]
+    [selectFiber],
   );
 
   let commitTree: CommitTree | null = null;
@@ -58,7 +58,7 @@ export default function CommitFlamegraphAutoSizer(_: {||}) {
     return (
       <div className={styles.Container} onClick={deselectCurrentFiber}>
         <AutoSizer>
-          {({ height, width }) => (
+          {({height, width}) => (
             // Force Flow types to avoid checking for `null` here because there's no static proof that
             // by the time this render prop function is called, the values of the `let` variables have not changed.
             <CommitFlamegraph
@@ -83,33 +83,39 @@ type Props = {|
   width: number,
 |};
 
-function CommitFlamegraph({ chartData, commitTree, height, width }: Props) {
-  const { lineHeight } = useContext(SettingsContext);
-  const { selectFiber, selectedFiberID } = useContext(ProfilerContext);
-
-  const selectedChartNodeIndex = useMemo<number>(() => {
-    if (selectedFiberID === null) {
-      return 0;
-    }
-    // The selected node might not be in the tree for this commit,
-    // so it's important that we have a fallback plan.
-    const depth = chartData.idToDepthMap.get(selectedFiberID);
-    return depth !== undefined ? depth - 1 : 0;
-  }, [chartData, selectedFiberID]);
-
-  const selectedChartNode = useMemo(() => {
-    let chartNode = null;
-    if (selectedFiberID !== null) {
-      const foundChartNode = chartData.rows[selectedChartNodeIndex].find(
-        chartNode => chartNode.id === selectedFiberID
-      );
-
-      if (foundChartNode !== undefined) {
-        chartNode = foundChartNode;
+function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
+  const {lineHeight} = useContext(SettingsContext);
+  const {selectFiber, selectedFiberID} = useContext(ProfilerContext);
+
+  const selectedChartNodeIndex = useMemo<number>(
+    () => {
+      if (selectedFiberID === null) {
+        return 0;
       }
-    }
-    return chartNode;
-  }, [chartData, selectedFiberID, selectedChartNodeIndex]);
+      // The selected node might not be in the tree for this commit,
+      // so it's important that we have a fallback plan.
+      const depth = chartData.idToDepthMap.get(selectedFiberID);
+      return depth !== undefined ? depth - 1 : 0;
+    },
+    [chartData, selectedFiberID],
+  );
+
+  const selectedChartNode = useMemo(
+    () => {
+      let chartNode = null;
+      if (selectedFiberID !== null) {
+        const foundChartNode = chartData.rows[selectedChartNodeIndex].find(
+          chartNode => chartNode.id === selectedFiberID,
+        );
+
+        if (foundChartNode !== undefined) {
+          chartNode = foundChartNode;
+        }
+      }
+      return chartNode;
+    },
+    [chartData, selectedFiberID, selectedChartNodeIndex],
+  );
 
   const itemData = useMemo<ItemData>(
     () => ({
@@ -120,14 +126,14 @@ function CommitFlamegraph({ chartData, commitTree, height, width }: Props) {
           ? selectedChartNode.treeBaseDuration
           : chartData.baseDuration,
         0,
-        width
+        width,
       ),
       selectedChartNode,
       selectedChartNodeIndex,
       selectFiber,
       width,
     }),
-    [chartData, selectedChartNode, selectedChartNodeIndex, selectFiber, width]
+    [chartData, selectedChartNode, selectedChartNodeIndex, selectFiber, width],
   );
 
   return (
@@ -137,22 +143,20 @@ function CommitFlamegraph({ chartData, commitTree, height, width }: Props) {
       itemCount={chartData.depth}
       itemData={itemData}
       itemSize={lineHeight}
-      width={width}
-    >
+      width={width}>
       {CommitFlamegraphListItem}
     </FixedSizeList>
   );
 }
 
-const InnerElementType = forwardRef(({ children, ...rest }, ref) => (
+const InnerElementType = forwardRef(({children, ...rest}, ref) => (
   <svg ref={ref} {...rest}>
     <defs>
       <pattern
         id="didNotRenderPattern"
         patternUnits="userSpaceOnUse"
         width="4"
-        height="4"
-      >
+        height="4">
         <path
           d="M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2"
           className={styles.PatternPath}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js
index 00566d272be14..be16491a63f60 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js
@@ -1,13 +1,13 @@
 // @flow
 
-import React, { Fragment, memo, useCallback, useContext } from 'react';
-import { areEqual } from 'react-window';
-import { barWidthThreshold } from './constants';
-import { getGradientColor } from './utils';
+import React, {Fragment, memo, useCallback, useContext} from 'react';
+import {areEqual} from 'react-window';
+import {barWidthThreshold} from './constants';
+import {getGradientColor} from './utils';
 import ChartNode from './ChartNode';
-import { SettingsContext } from '../Settings/SettingsContext';
+import {SettingsContext} from '../Settings/SettingsContext';
 
-import type { ItemData } from './CommitFlamegraph';
+import type {ItemData} from './CommitFlamegraph';
 
 type Props = {
   data: ItemData,
@@ -15,7 +15,7 @@ type Props = {
   style: Object,
 };
 
-function CommitFlamegraphListItem({ data, index, style }: Props) {
+function CommitFlamegraphListItem({data, index, style}: Props) {
   const {
     chartData,
     scaleX,
@@ -24,15 +24,15 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
     selectFiber,
     width,
   } = data;
-  const { renderPathNodes, maxSelfDuration, rows } = chartData;
+  const {renderPathNodes, maxSelfDuration, rows} = chartData;
 
-  const { lineHeight } = useContext(SettingsContext);
+  const {lineHeight} = useContext(SettingsContext);
   const handleClick = useCallback(
     (event: SyntheticMouseEvent<*>, id: number, name: string) => {
       event.stopPropagation();
       selectFiber(id, name);
     },
-    [selectFiber]
+    [selectFiber],
   );
 
   // List items are absolutely positioned using the CSS "top" attribute.
@@ -45,7 +45,7 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
 
   let selectedNodeOffset = scaleX(
     selectedChartNode !== null ? selectedChartNode.offset : 0,
-    width
+    width,
   );
 
   return (
@@ -96,7 +96,7 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
             key={id}
             label={label}
             onClick={event => handleClick(event, id, name)}
-            textStyle={{ color: textColor }}
+            textStyle={{color: textColor}}
             width={nodeWidth}
             x={nodeOffset - selectedNodeOffset}
             y={top}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
index 379dab481d0ff..d001cf8c135b0 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
@@ -1,19 +1,19 @@
 // @flow
 
-import React, { useCallback, useContext, useMemo } from 'react';
+import React, {useCallback, useContext, useMemo} from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { FixedSizeList } from 'react-window';
-import { ProfilerContext } from './ProfilerContext';
+import {FixedSizeList} from 'react-window';
+import {ProfilerContext} from './ProfilerContext';
 import NoCommitData from './NoCommitData';
 import CommitRankedListItem from './CommitRankedListItem';
-import { scale } from './utils';
-import { StoreContext } from '../context';
-import { SettingsContext } from '../Settings/SettingsContext';
+import {scale} from './utils';
+import {StoreContext} from '../context';
+import {SettingsContext} from '../Settings/SettingsContext';
 
 import styles from './CommitRanked.css';
 
-import type { ChartData } from './RankedChartBuilder';
-import type { CommitTree } from './types';
+import type {ChartData} from './RankedChartBuilder';
+import type {CommitTree} from './types';
 
 export type ItemData = {|
   chartData: ChartData,
@@ -25,18 +25,18 @@ export type ItemData = {|
 |};
 
 export default function CommitRankedAutoSizer(_: {||}) {
-  const { profilerStore } = useContext(StoreContext);
-  const { rootID, selectedCommitIndex, selectFiber } = useContext(
-    ProfilerContext
+  const {profilerStore} = useContext(StoreContext);
+  const {rootID, selectedCommitIndex, selectFiber} = useContext(
+    ProfilerContext,
   );
-  const { profilingCache } = profilerStore;
+  const {profilingCache} = profilerStore;
 
   const deselectCurrentFiber = useCallback(
     event => {
       event.stopPropagation();
       selectFiber(null, null);
     },
-    [selectFiber]
+    [selectFiber],
   );
 
   let commitTree: CommitTree | null = null;
@@ -58,7 +58,7 @@ export default function CommitRankedAutoSizer(_: {||}) {
     return (
       <div className={styles.Container} onClick={deselectCurrentFiber}>
         <AutoSizer>
-          {({ height, width }) => (
+          {({height, width}) => (
             <CommitRanked
               chartData={((chartData: any): ChartData)}
               commitTree={((commitTree: any): CommitTree)}
@@ -81,13 +81,13 @@ type Props = {|
   width: number,
 |};
 
-function CommitRanked({ chartData, commitTree, height, width }: Props) {
-  const { lineHeight } = useContext(SettingsContext);
-  const { selectedFiberID, selectFiber } = useContext(ProfilerContext);
+function CommitRanked({chartData, commitTree, height, width}: Props) {
+  const {lineHeight} = useContext(SettingsContext);
+  const {selectedFiberID, selectFiber} = useContext(ProfilerContext);
 
   const selectedFiberIndex = useMemo(
     () => getNodeIndex(chartData, selectedFiberID),
-    [chartData, selectedFiberID]
+    [chartData, selectedFiberID],
   );
 
   const itemData = useMemo<ItemData>(
@@ -99,7 +99,7 @@ function CommitRanked({ chartData, commitTree, height, width }: Props) {
       selectFiber,
       width,
     }),
-    [chartData, selectedFiberID, selectedFiberIndex, selectFiber, width]
+    [chartData, selectedFiberID, selectedFiberIndex, selectFiber, width],
   );
 
   return (
@@ -109,8 +109,7 @@ function CommitRanked({ chartData, commitTree, height, width }: Props) {
       itemCount={chartData.nodes.length}
       itemData={itemData}
       itemSize={lineHeight}
-      width={width}
-    >
+      width={width}>
       {CommitRankedListItem}
     </FixedSizeList>
   );
@@ -120,7 +119,7 @@ const getNodeIndex = (chartData: ChartData, id: number | null): number => {
   if (id === null) {
     return 0;
   }
-  const { nodes } = chartData;
+  const {nodes} = chartData;
   for (let index = 0; index < nodes.length; index++) {
     if (nodes[index].id === id) {
       return index;
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js
index 5a25b3c49ddc4..c2854d84cdc11 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js
@@ -1,13 +1,13 @@
 // @flow
 
-import React, { memo, useCallback, useContext } from 'react';
-import { areEqual } from 'react-window';
-import { minBarWidth } from './constants';
-import { getGradientColor } from './utils';
+import React, {memo, useCallback, useContext} from 'react';
+import {areEqual} from 'react-window';
+import {minBarWidth} from './constants';
+import {getGradientColor} from './utils';
 import ChartNode from './ChartNode';
-import { SettingsContext } from '../Settings/SettingsContext';
+import {SettingsContext} from '../Settings/SettingsContext';
 
-import type { ItemData } from './CommitRanked';
+import type {ItemData} from './CommitRanked';
 
 type Props = {
   data: ItemData,
@@ -15,19 +15,19 @@ type Props = {
   style: Object,
 };
 
-function CommitRankedListItem({ data, index, style }: Props) {
-  const { chartData, scaleX, selectedFiberIndex, selectFiber, width } = data;
+function CommitRankedListItem({data, index, style}: Props) {
+  const {chartData, scaleX, selectedFiberIndex, selectFiber, width} = data;
 
   const node = chartData.nodes[index];
 
-  const { lineHeight } = useContext(SettingsContext);
+  const {lineHeight} = useContext(SettingsContext);
 
   const handleClick = useCallback(
     event => {
       event.stopPropagation();
       selectFiber(node.id, node.name);
     },
-    [node, selectFiber]
+    [node, selectFiber],
   );
 
   // List items are absolutely positioned using the CSS "top" attribute.
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
index a1564524558c9..5d148b462b13a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -7,11 +7,11 @@ import {
   TREE_OPERATION_REORDER_CHILDREN,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from 'react-devtools-shared/src/constants';
-import { utfDecodeString } from 'react-devtools-shared/src/utils';
-import { ElementTypeRoot } from 'react-devtools-shared/src/types';
+import {utfDecodeString} from 'react-devtools-shared/src/utils';
+import {ElementTypeRoot} from 'react-devtools-shared/src/types';
 import ProfilerStore from 'react-devtools-shared/src/devtools/ProfilerStore';
 
-import type { ElementType } from 'react-devtools-shared/src/types';
+import type {ElementType} from 'react-devtools-shared/src/types';
 import type {
   CommitTree,
   CommitTreeNode,
@@ -24,7 +24,7 @@ const debug = (methodName, ...args) => {
       `%cCommitTreeBuilder %c${methodName}`,
       'color: pink; font-weight: bold;',
       'font-weight: bold;',
-      ...args
+      ...args,
     );
   }
 };
@@ -44,15 +44,15 @@ export function getCommitTree({
     rootToCommitTreeMap.set(rootID, []);
   }
 
-  const commitTrees = ((rootToCommitTreeMap.get(
-    rootID
-  ): any): Array<CommitTree>);
+  const commitTrees = ((rootToCommitTreeMap.get(rootID): any): Array<
+    CommitTree,
+  >);
 
   if (commitIndex < commitTrees.length) {
     return commitTrees[commitIndex];
   }
 
-  const { profilingData } = profilerStore;
+  const {profilingData} = profilerStore;
   if (profilingData === null) {
     throw Error(`No profiling data available`);
   }
@@ -62,7 +62,7 @@ export function getCommitTree({
     throw Error(`Could not find profiling data for root "${rootID}"`);
   }
 
-  const { operations } = dataForRoot;
+  const {operations} = dataForRoot;
 
   // Commits are generated sequentially and cached.
   // If this is the very first commit, start with the cached snapshot and apply the first mutation.
@@ -75,7 +75,7 @@ export function getCommitTree({
 
     // Mutate the tree
     if (operations != null && commitIndex < operations.length) {
-      const commitTree = updateTree({ nodes, rootID }, operations[commitIndex]);
+      const commitTree = updateTree({nodes, rootID}, operations[commitIndex]);
 
       if (__DEBUG__) {
         __printTree(commitTree);
@@ -94,7 +94,7 @@ export function getCommitTree({
     if (operations != null && commitIndex < operations.length) {
       const commitTree = updateTree(
         previousCommitTree,
-        operations[commitIndex]
+        operations[commitIndex],
       );
 
       if (__DEBUG__) {
@@ -107,7 +107,7 @@ export function getCommitTree({
   }
 
   throw Error(
-    `getCommitTree(): Unable to reconstruct tree for root "${rootID}" and commit ${commitIndex}`
+    `getCommitTree(): Unable to reconstruct tree for root "${rootID}" and commit ${commitIndex}`,
   );
 }
 
@@ -115,7 +115,7 @@ function recursivelyInitializeTree(
   id: number,
   parentID: number,
   nodes: Map<number, CommitTreeNode>,
-  dataForRoot: ProfilingDataForRootFrontend
+  dataForRoot: ProfilingDataForRootFrontend,
 ): void {
   const node = dataForRoot.snapshots.get(id);
   if (node != null) {
@@ -126,20 +126,20 @@ function recursivelyInitializeTree(
       key: node.key,
       parentID,
       treeBaseDuration: ((dataForRoot.initialTreeBaseDurations.get(
-        id
+        id,
       ): any): number),
       type: node.type,
     });
 
     node.children.forEach(childID =>
-      recursivelyInitializeTree(childID, id, nodes, dataForRoot)
+      recursivelyInitializeTree(childID, id, nodes, dataForRoot),
     );
   }
 }
 
 function updateTree(
   commitTree: CommitTree,
-  operations: Array<number>
+  operations: Array<number>,
 ): CommitTree {
   // Clone the original tree so edits don't affect it.
   const nodes = new Map(commitTree.nodes);
@@ -148,7 +148,7 @@ function updateTree(
   const getClonedNode = (id: number): CommitTreeNode => {
     const clonedNode = ((Object.assign(
       {},
-      nodes.get(id)
+      nodes.get(id),
     ): any): CommitTreeNode);
     nodes.set(id, clonedNode);
     return clonedNode;
@@ -165,7 +165,7 @@ function updateTree(
   while (i < stringTableEnd) {
     const nextLength = operations[i++];
     const nextString = utfDecodeString(
-      (operations.slice(i, i + nextLength): any)
+      (operations.slice(i, i + nextLength): any),
     );
     stringTable.push(nextString);
     i += nextLength;
@@ -185,7 +185,7 @@ function updateTree(
           throw new Error(
             'Commit tree already contains fiber ' +
               id +
-              '. This is a bug in React DevTools.'
+              '. This is a bug in React DevTools.',
           );
         }
 
@@ -225,7 +225,7 @@ function updateTree(
           if (__DEBUG__) {
             debug(
               'Add',
-              `fiber ${id} (${displayName || 'null'}) as child of ${parentID}`
+              `fiber ${id} (${displayName || 'null'}) as child of ${parentID}`,
             );
           }
 
@@ -258,7 +258,7 @@ function updateTree(
             throw new Error(
               'Commit tree does not contain fiber ' +
                 id +
-                '. This is a bug in React DevTools.'
+                '. This is a bug in React DevTools.',
             );
           }
 
@@ -277,7 +277,7 @@ function updateTree(
             }
 
             parentNode.children = parentNode.children.filter(
-              childID => childID !== id
+              childID => childID !== id,
             );
           }
         }
@@ -288,7 +288,7 @@ function updateTree(
         const numChildren = ((operations[i + 2]: any): number);
         const children = ((operations.slice(
           i + 3,
-          i + 3 + numChildren
+          i + 3 + numChildren,
         ): any): Array<number>);
 
         i = i + 3 + numChildren;
@@ -311,7 +311,7 @@ function updateTree(
         if (__DEBUG__) {
           debug(
             'Update',
-            `fiber ${id} treeBaseDuration to ${node.treeBaseDuration}`
+            `fiber ${id} treeBaseDuration to ${node.treeBaseDuration}`,
           );
         }
 
@@ -336,7 +336,7 @@ export function invalidateCommitTrees(): void {
 // DEBUG
 const __printTree = (commitTree: CommitTree) => {
   if (__DEBUG__) {
-    const { nodes, rootID } = commitTree;
+    const {nodes, rootID} = commitTree;
     console.group('__printTree()');
     const queue = [rootID, 0];
     while (queue.length > 0) {
@@ -351,7 +351,7 @@ const __printTree = (commitTree: CommitTree) => {
       console.log(
         `${'•'.repeat(depth)}${node.id}:${node.displayName || ''} ${
           node.key ? `key:"${node.key}"` : ''
-        } (${node.treeBaseDuration})`
+        } (${node.treeBaseDuration})`,
       );
 
       node.children.forEach(childID => {
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js
index ef934c2ec264c..5f58e17be809d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js
@@ -1,10 +1,13 @@
 // @flow
 
-import { ElementTypeForwardRef, ElementTypeMemo } from 'react-devtools-shared/src/types';
-import { formatDuration } from './utils';
+import {
+  ElementTypeForwardRef,
+  ElementTypeMemo,
+} from 'react-devtools-shared/src/types';
+import {formatDuration} from './utils';
 import ProfilerStore from 'react-devtools-shared/src/devtools/ProfilerStore';
 
-import type { CommitTree } from './types';
+import type {CommitTree} from './types';
 
 export type ChartNode = {|
   actualDuration: number,
@@ -41,8 +44,8 @@ export function getChartData({
 |}): ChartData {
   const commitDatum = profilerStore.getCommitData(rootID, commitIndex);
 
-  const { fiberActualDurations, fiberSelfDurations } = commitDatum;
-  const { nodes } = commitTree;
+  const {fiberActualDurations, fiberSelfDurations} = commitDatum;
+  const {nodes} = commitTree;
 
   const key = `${rootID}-${commitIndex}`;
   if (cachedChartData.has(key)) {
@@ -65,7 +68,7 @@ export function getChartData({
       throw Error(`Could not find node with id "${id}" in commit tree`);
     }
 
-    const { children, displayName, key, treeBaseDuration, type } = node;
+    const {children, displayName, key, treeBaseDuration, type} = node;
 
     const actualDuration = fiberActualDurations.get(id) || 0;
     const selfDuration = fiberSelfDurations.get(id) || 0;
@@ -84,7 +87,7 @@ export function getChartData({
     let label = `${name}${maybeBadge}${maybeKey}`;
     if (didRender) {
       label += ` (${formatDuration(selfDuration)}ms of ${formatDuration(
-        actualDuration
+        actualDuration,
       )}ms)`;
     }
 
@@ -125,7 +128,7 @@ export function getChartData({
     const root = nodes.get(rootID);
     if (root == null) {
       throw Error(
-        `Could not find root node with id "${rootID}" in commit tree`
+        `Could not find root node with id "${rootID}" in commit tree`,
       );
     }
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionListItem.js b/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionListItem.js
index 4e6d8c746b405..6f0f81f6523f2 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionListItem.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionListItem.js
@@ -1,12 +1,12 @@
 // @flow
 
-import React, { memo, useCallback } from 'react';
-import { areEqual } from 'react-window';
-import { getGradientColor } from './utils';
+import React, {memo, useCallback} from 'react';
+import {areEqual} from 'react-window';
+import {getGradientColor} from './utils';
 
 import styles from './InteractionListItem.css';
 
-import type { ItemData } from './Interactions';
+import type {ItemData} from './Interactions';
 
 type Props = {
   data: ItemData,
@@ -14,7 +14,7 @@ type Props = {
   style: Object,
 };
 
-function InteractionListItem({ data: itemData, index, style }: Props) {
+function InteractionListItem({data: itemData, index, style}: Props) {
   const {
     chartData,
     dataForRoot,
@@ -26,17 +26,20 @@ function InteractionListItem({ data: itemData, index, style }: Props) {
     selectTab,
   } = itemData;
 
-  const { commitData, interactionCommits } = dataForRoot;
-  const { interactions, lastInteractionTime, maxCommitDuration } = chartData;
+  const {commitData, interactionCommits} = dataForRoot;
+  const {interactions, lastInteractionTime, maxCommitDuration} = chartData;
 
   const interaction = interactions[index];
   if (interaction == null) {
     throw Error(`Could not find interaction #${index}`);
   }
 
-  const handleClick = useCallback(() => {
-    selectInteraction(interaction.id);
-  }, [interaction, selectInteraction]);
+  const handleClick = useCallback(
+    () => {
+      selectInteraction(interaction.id);
+    },
+    [interaction, selectInteraction],
+  );
 
   const commits = interactionCommits.get(interaction.id) || [];
 
@@ -56,13 +59,11 @@ function InteractionListItem({ data: itemData, index, style }: Props) {
           : styles.Interaction
       }
       onClick={handleClick}
-      style={style}
-    >
+      style={style}>
       <div
         className={styles.Name}
-        style={{ maxWidth: labelWidth }}
-        title={interaction.name}
-      >
+        style={{maxWidth: labelWidth}}
+        title={interaction.name}>
         {interaction.name}
       </div>
       <div
@@ -83,9 +84,9 @@ function InteractionListItem({ data: itemData, index, style }: Props) {
                 1,
                 Math.max(
                   0,
-                  commitData[commitIndex].duration / maxCommitDuration
-                )
-              ) || 0
+                  commitData[commitIndex].duration / maxCommitDuration,
+                ),
+              ) || 0,
             ),
             left: labelWidth + scaleX(commitData[commitIndex].timestamp, 0),
           }}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Interactions.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Interactions.js
index 1ec5597603fd6..60cf04acf79fb 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Interactions.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Interactions.js
@@ -1,19 +1,19 @@
 // @flow
 
-import React, { useCallback, useContext, useMemo } from 'react';
+import React, {useCallback, useContext, useMemo} from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { FixedSizeList } from 'react-window';
-import { ProfilerContext } from './ProfilerContext';
+import {FixedSizeList} from 'react-window';
+import {ProfilerContext} from './ProfilerContext';
 import InteractionListItem from './InteractionListItem';
 import NoInteractions from './NoInteractions';
-import { StoreContext } from '../context';
-import { scale } from './utils';
+import {StoreContext} from '../context';
+import {scale} from './utils';
 
 import styles from './Interactions.css';
 
-import type { ProfilingDataForRootFrontend } from './types';
-import type { ChartData } from './InteractionsChartBuilder';
-import type { TabID } from './ProfilerContext';
+import type {ProfilingDataForRootFrontend} from './types';
+import type {ChartData} from './InteractionsChartBuilder';
+import type {TabID} from './ProfilerContext';
 
 export type ItemData = {|
   chartData: ChartData,
@@ -30,13 +30,13 @@ export default function InteractionsAutoSizer(_: {||}) {
   return (
     <div className={styles.Container}>
       <AutoSizer>
-        {({ height, width }) => <Interactions height={height} width={width} />}
+        {({height, width}) => <Interactions height={height} width={width} />}
       </AutoSizer>
     </div>
   );
 }
 
-function Interactions({ height, width }: {| height: number, width: number |}) {
+function Interactions({height, width}: {|height: number, width: number|}) {
   const {
     rootID,
     selectedInteractionID,
@@ -44,8 +44,8 @@ function Interactions({ height, width }: {| height: number, width: number |}) {
     selectCommitIndex,
     selectTab,
   } = useContext(ProfilerContext);
-  const { profilerStore } = useContext(StoreContext);
-  const { profilingCache } = profilerStore;
+  const {profilerStore} = useContext(StoreContext);
+  const {profilingCache} = profilerStore;
 
   const dataForRoot = profilerStore.getDataForRoot(((rootID: any): number));
 
@@ -53,7 +53,7 @@ function Interactions({ height, width }: {| height: number, width: number |}) {
     rootID: ((rootID: any): number),
   });
 
-  const { interactions } = chartData;
+  const {interactions} = chartData;
 
   const handleKeyDown = useCallback(
     event => {
@@ -61,14 +61,14 @@ function Interactions({ height, width }: {| height: number, width: number |}) {
       switch (event.key) {
         case 'ArrowDown':
           index = interactions.findIndex(
-            interaction => interaction.id === selectedInteractionID
+            interaction => interaction.id === selectedInteractionID,
           );
           selectInteraction(Math.min(interactions.length - 1, index + 1));
           event.stopPropagation();
           break;
         case 'ArrowUp':
           index = interactions.findIndex(
-            interaction => interaction.id === selectedInteractionID
+            interaction => interaction.id === selectedInteractionID,
           );
           selectInteraction(Math.max(0, index - 1));
           event.stopPropagation();
@@ -77,45 +77,48 @@ function Interactions({ height, width }: {| height: number, width: number |}) {
           break;
       }
     },
-    [interactions, selectedInteractionID, selectInteraction]
+    [interactions, selectedInteractionID, selectInteraction],
   );
 
-  const itemData = useMemo<ItemData>(() => {
-    const interactionCommitSize = parseInt(
-      getComputedStyle((document.body: any)).getPropertyValue(
-        '--interaction-commit-size'
-      ),
-      10
-    );
-    const interactionLabelWidth = parseInt(
-      getComputedStyle((document.body: any)).getPropertyValue(
-        '--interaction-label-width'
-      ),
-      10
-    );
+  const itemData = useMemo<ItemData>(
+    () => {
+      const interactionCommitSize = parseInt(
+        getComputedStyle((document.body: any)).getPropertyValue(
+          '--interaction-commit-size',
+        ),
+        10,
+      );
+      const interactionLabelWidth = parseInt(
+        getComputedStyle((document.body: any)).getPropertyValue(
+          '--interaction-label-width',
+        ),
+        10,
+      );
 
-    const labelWidth = Math.min(interactionLabelWidth, width / 5);
-    const timelineWidth = width - labelWidth - interactionCommitSize;
+      const labelWidth = Math.min(interactionLabelWidth, width / 5);
+      const timelineWidth = width - labelWidth - interactionCommitSize;
 
-    return {
+      return {
+        chartData,
+        dataForRoot,
+        labelWidth,
+        scaleX: scale(0, chartData.lastInteractionTime, 0, timelineWidth),
+        selectedInteractionID,
+        selectCommitIndex,
+        selectInteraction,
+        selectTab,
+      };
+    },
+    [
       chartData,
       dataForRoot,
-      labelWidth,
-      scaleX: scale(0, chartData.lastInteractionTime, 0, timelineWidth),
       selectedInteractionID,
       selectCommitIndex,
       selectInteraction,
       selectTab,
-    };
-  }, [
-    chartData,
-    dataForRoot,
-    selectedInteractionID,
-    selectCommitIndex,
-    selectInteraction,
-    selectTab,
-    width,
-  ]);
+      width,
+    ],
+  );
 
   // If a commit contains no fibers with an actualDuration > 0,
   // Display a fallback message.
@@ -130,8 +133,7 @@ function Interactions({ height, width }: {| height: number, width: number |}) {
         itemCount={interactions.length}
         itemData={itemData}
         itemSize={30}
-        width={width}
-      >
+        width={width}>
         {InteractionListItem}
       </FixedSizeList>
     </div>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionsChartBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionsChartBuilder.js
index 48b1bb79c8ace..a336e9c1edf26 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionsChartBuilder.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionsChartBuilder.js
@@ -2,7 +2,7 @@
 
 import ProfilerStore from 'react-devtools-shared/src/devtools/ProfilerStore';
 
-import type { Interaction } from './types';
+import type {Interaction} from './types';
 
 export type ChartData = {|
   interactions: Array<Interaction>,
@@ -28,7 +28,7 @@ export function getChartData({
     throw Error(`Could not find profiling data for root "${rootID}"`);
   }
 
-  const { commitData, interactions } = dataForRoot;
+  const {commitData, interactions} = dataForRoot;
 
   const lastInteractionTime =
     commitData.length > 0 ? commitData[commitData.length - 1].timestamp : 0;
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/NoInteractions.js b/packages/react-devtools-shared/src/devtools/views/Profiler/NoInteractions.js
index f317aa2b6248c..6254a447efebb 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/NoInteractions.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/NoInteractions.js
@@ -12,15 +12,14 @@ export default function NoInteractions({
   width: number,
 |}) {
   return (
-    <div className={styles.NoInteractions} style={{ height, width }}>
+    <div className={styles.NoInteractions} style={{height, width}}>
       <p className={styles.Header}>No interactions were recorded.</p>
       <p>
         <a
           className={styles.Link}
           href="http://fb.me/react-interaction-tracing"
           rel="noopener noreferrer"
-          target="_blank"
-        >
+          target="_blank">
           Learn more about the interaction tracing API here.
         </a>
       </p>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
index b99630bcc9852..a18537976778c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
@@ -1,8 +1,8 @@
 // @flow
 
-import React, { Fragment, useContext } from 'react';
-import { ModalDialog } from '../ModalDialog';
-import { ProfilerContext } from './ProfilerContext';
+import React, {Fragment, useContext} from 'react';
+import {ModalDialog} from '../ModalDialog';
+import {ProfilerContext} from './ProfilerContext';
 import TabBar from '../TabBar';
 import ClearProfilingDataButton from './ClearProfilingDataButton';
 import CommitFlamegraph from './CommitFlamegraph';
@@ -18,7 +18,7 @@ import SidebarInteractions from './SidebarInteractions';
 import SidebarSelectedFiberInfo from './SidebarSelectedFiberInfo';
 import SettingsModal from 'react-devtools-shared/src/devtools/views/Settings/SettingsModal';
 import SettingsModalContextToggle from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle';
-import { SettingsModalContextController } from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContext';
+import {SettingsModalContextController} from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContext';
 import portaledContent from '../portaledContent';
 
 import styles from './Profiler.css';
@@ -160,8 +160,7 @@ const ProfilingNotSupported = () => (
         className={styles.Link}
         href="https://fb.me/react-profiling"
         rel="noopener noreferrer"
-        target="_blank"
-      >
+        target="_blank">
         fb.me/react-profiling
       </a>
       .
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
index 48d8af33aaf31..a481f2a134e2b 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
@@ -7,16 +7,16 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
-import { useLocalStorage, useSubscription } from '../hooks';
+import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
+import {useLocalStorage, useSubscription} from '../hooks';
 import {
   TreeDispatcherContext,
   TreeStateContext,
 } from '../Components/TreeContext';
-import { StoreContext } from '../context';
+import {StoreContext} from '../context';
 import Store from '../../store';
 
-import type { ProfilingDataFrontend } from './types';
+import type {ProfilingDataFrontend} from './types';
 
 export type TabID = 'flame-chart' | 'ranked-chart' | 'interactions';
 
@@ -84,12 +84,12 @@ type Props = {|
   children: React$Node,
 |};
 
-function ProfilerContextController({ children }: Props) {
+function ProfilerContextController({children}: Props) {
   const store = useContext(StoreContext);
-  const { selectedElementID } = useContext(TreeStateContext);
+  const {selectedElementID} = useContext(TreeStateContext);
   const dispatch = useContext(TreeDispatcherContext);
 
-  const { profilerStore } = store;
+  const {profilerStore} = store;
 
   const subscription = useMemo(
     () => ({
@@ -113,7 +113,7 @@ function ProfilerContextController({ children }: Props) {
         };
       },
     }),
-    [profilerStore, store]
+    [profilerStore, store],
   );
   const {
     didRecordCommits,
@@ -153,29 +153,28 @@ function ProfilerContextController({ children }: Props) {
 
   const startProfiling = useCallback(
     () => store.profilerStore.startProfiling(),
-    [store]
+    [store],
   );
   const stopProfiling = useCallback(() => store.profilerStore.stopProfiling(), [
     store,
   ]);
 
-  const [
-    isCommitFilterEnabled,
-    setIsCommitFilterEnabled,
-  ] = useLocalStorage<boolean>('React::DevTools::isCommitFilterEnabled', false);
+  const [isCommitFilterEnabled, setIsCommitFilterEnabled] = useLocalStorage<
+    boolean,
+  >('React::DevTools::isCommitFilterEnabled', false);
   const [minCommitDuration, setMinCommitDuration] = useLocalStorage<number>(
     'minCommitDuration',
-    0
+    0,
   );
 
   const [selectedCommitIndex, selectCommitIndex] = useState<number | null>(
-    null
+    null,
   );
   const [selectedTabID, selectTab] = useState<TabID>('flame-chart');
   const [selectedFiberID, selectFiberID] = useState<number | null>(null);
   const [selectedFiberName, selectFiberName] = useState<string | null>(null);
   const [selectedInteractionID, selectInteraction] = useState<number | null>(
-    null
+    null,
   );
 
   const selectFiber = useCallback(
@@ -197,7 +196,7 @@ function ProfilerContextController({ children }: Props) {
         }
       }
     },
-    [dispatch, selectFiberID, selectFiberName, store]
+    [dispatch, selectFiberID, selectFiberName, store],
   );
 
   if (isProfiling) {
@@ -275,7 +274,7 @@ function ProfilerContextController({ children }: Props) {
 
       selectedInteractionID,
       selectInteraction,
-    ]
+    ],
   );
 
   return (
@@ -285,4 +284,4 @@ function ProfilerContextController({ children }: Props) {
   );
 }
 
-export { ProfilerContext, ProfilerContextController };
+export {ProfilerContext, ProfilerContextController};
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index 50a31fe897777..87187b68b9355 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -1,56 +1,59 @@
 // @flow
 
-import React, { Fragment, useContext, useCallback, useRef } from 'react';
-import { ProfilerContext } from './ProfilerContext';
-import { ModalDialogContext } from '../ModalDialog';
+import React, {Fragment, useContext, useCallback, useRef} from 'react';
+import {ProfilerContext} from './ProfilerContext';
+import {ModalDialogContext} from '../ModalDialog';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
-import { StoreContext } from '../context';
+import {StoreContext} from '../context';
 import {
   prepareProfilingDataExport,
   prepareProfilingDataFrontendFromExport,
 } from './utils';
-import { downloadFile } from '../utils';
+import {downloadFile} from '../utils';
 
 import styles from './ProfilingImportExportButtons.css';
 
-import type { ProfilingDataExport } from './types';
+import type {ProfilingDataExport} from './types';
 
 export default function ProfilingImportExportButtons() {
-  const { isProfiling, profilingData, rootID } = useContext(ProfilerContext);
+  const {isProfiling, profilingData, rootID} = useContext(ProfilerContext);
   const store = useContext(StoreContext);
-  const { profilerStore } = store;
+  const {profilerStore} = store;
 
   const inputRef = useRef<HTMLInputElement | null>(null);
 
-  const { dispatch: modalDialogDispatch } = useContext(ModalDialogContext);
+  const {dispatch: modalDialogDispatch} = useContext(ModalDialogContext);
 
-  const downloadData = useCallback(() => {
-    if (rootID === null) {
-      return;
-    }
+  const downloadData = useCallback(
+    () => {
+      if (rootID === null) {
+        return;
+      }
 
-    if (profilingData !== null) {
-      const profilingDataExport = prepareProfilingDataExport(profilingData);
-      const date = new Date();
-      const dateString = date
-        .toLocaleDateString(undefined, {
-          year: 'numeric',
-          month: '2-digit',
-          day: '2-digit',
-        })
-        .replace(/\//g, '-');
-      const timeString = date
-        .toLocaleTimeString(undefined, {
-          hour12: false,
-        })
-        .replace(/:/g, '-');
-      downloadFile(
-        `profiling-data.${dateString}.${timeString}.json`,
-        JSON.stringify(profilingDataExport, null, 2)
-      );
-    }
-  }, [rootID, profilingData]);
+      if (profilingData !== null) {
+        const profilingDataExport = prepareProfilingDataExport(profilingData);
+        const date = new Date();
+        const dateString = date
+          .toLocaleDateString(undefined, {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+          })
+          .replace(/\//g, '-');
+        const timeString = date
+          .toLocaleTimeString(undefined, {
+            hour12: false,
+          })
+          .replace(/:/g, '-');
+        downloadFile(
+          `profiling-data.${dateString}.${timeString}.json`,
+          JSON.stringify(profilingDataExport, null, 2),
+        );
+      }
+    },
+    [rootID, profilingData],
+  );
 
   const uploadData = useCallback(() => {
     if (inputRef.current !== null) {
@@ -58,38 +61,41 @@ export default function ProfilingImportExportButtons() {
     }
   }, []);
 
-  const handleFiles = useCallback(() => {
-    const input = inputRef.current;
-    if (input !== null && input.files.length > 0) {
-      const fileReader = new FileReader();
-      fileReader.addEventListener('load', () => {
-        try {
-          const raw = ((fileReader.result: any): string);
-          const profilingDataExport = ((JSON.parse(
-            raw
-          ): any): ProfilingDataExport);
-          profilerStore.profilingData = prepareProfilingDataFrontendFromExport(
-            profilingDataExport
-          );
-        } catch (error) {
-          modalDialogDispatch({
-            type: 'SHOW',
-            title: 'Import failed',
-            content: (
-              <Fragment>
-                <div>The profiling data you selected cannot be imported.</div>
-                {error !== null && (
-                  <div className={styles.ErrorMessage}>{error.message}</div>
-                )}
-              </Fragment>
-            ),
-          });
-        }
-      });
-      // TODO (profiling) Handle fileReader errors.
-      fileReader.readAsText(input.files[0]);
-    }
-  }, [modalDialogDispatch, profilerStore]);
+  const handleFiles = useCallback(
+    () => {
+      const input = inputRef.current;
+      if (input !== null && input.files.length > 0) {
+        const fileReader = new FileReader();
+        fileReader.addEventListener('load', () => {
+          try {
+            const raw = ((fileReader.result: any): string);
+            const profilingDataExport = ((JSON.parse(
+              raw,
+            ): any): ProfilingDataExport);
+            profilerStore.profilingData = prepareProfilingDataFrontendFromExport(
+              profilingDataExport,
+            );
+          } catch (error) {
+            modalDialogDispatch({
+              type: 'SHOW',
+              title: 'Import failed',
+              content: (
+                <Fragment>
+                  <div>The profiling data you selected cannot be imported.</div>
+                  {error !== null && (
+                    <div className={styles.ErrorMessage}>{error.message}</div>
+                  )}
+                </Fragment>
+              ),
+            });
+          }
+        });
+        // TODO (profiling) Handle fileReader errors.
+        fileReader.readAsText(input.files[0]);
+      }
+    },
+    [modalDialogDispatch, profilerStore],
+  );
 
   return (
     <Fragment>
@@ -104,15 +110,13 @@ export default function ProfilingImportExportButtons() {
       <Button
         disabled={isProfiling}
         onClick={uploadData}
-        title="Load profile..."
-      >
+        title="Load profile...">
         <ButtonIcon type="import" />
       </Button>
       <Button
         disabled={isProfiling || !profilerStore.didRecordCommits}
         onClick={downloadData}
-        title="Save profile..."
-      >
+        title="Save profile...">
         <ButtonIcon type="export" />
       </Button>
     </Fragment>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder.js
index d0f302fea2be4..602b8ef631755 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder.js
@@ -1,10 +1,13 @@
 // @flow
 
-import { ElementTypeForwardRef, ElementTypeMemo } from 'react-devtools-shared/src/types';
-import { formatDuration } from './utils';
+import {
+  ElementTypeForwardRef,
+  ElementTypeMemo,
+} from 'react-devtools-shared/src/types';
+import {formatDuration} from './utils';
 import ProfilerStore from 'react-devtools-shared/src/devtools/ProfilerStore';
 
-import type { CommitTree } from './types';
+import type {CommitTree} from './types';
 
 export type ChartNode = {|
   id: number,
@@ -33,8 +36,8 @@ export function getChartData({
 |}): ChartData {
   const commitDatum = profilerStore.getCommitData(rootID, commitIndex);
 
-  const { fiberActualDurations, fiberSelfDurations } = commitDatum;
-  const { nodes } = commitTree;
+  const {fiberActualDurations, fiberSelfDurations} = commitDatum;
+  const {nodes} = commitTree;
 
   const key = `${rootID}-${commitIndex}`;
   if (cachedChartData.has(key)) {
@@ -51,7 +54,7 @@ export function getChartData({
       throw Error(`Could not find node with id "${id}" in commit tree`);
     }
 
-    const { displayName, key, parentID, type } = node;
+    const {displayName, key, parentID, type} = node;
 
     // Don't show the root node in this chart.
     if (parentID === 0) {
@@ -71,7 +74,7 @@ export function getChartData({
     }
 
     const label = `${name}${maybeBadge}${maybeKey} (${formatDuration(
-      selfDuration
+      selfDuration,
     )}ms)`;
     chartNodes.push({
       id,
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js
index a3d494c71666a..8f2052d12ee36 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js
@@ -1,9 +1,9 @@
 // @flow
 
-import React, { useContext } from 'react';
+import React, {useContext} from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
-import { ProfilerContext } from './ProfilerContext';
+import {ProfilerContext} from './ProfilerContext';
 
 import styles from './RecordToggle.css';
 
@@ -11,9 +11,9 @@ export type Props = {|
   disabled?: boolean,
 |};
 
-export default function RecordToggle({ disabled }: Props) {
-  const { isProfiling, startProfiling, stopProfiling } = useContext(
-    ProfilerContext
+export default function RecordToggle({disabled}: Props) {
+  const {isProfiling, startProfiling, stopProfiling} = useContext(
+    ProfilerContext,
   );
 
   let className = styles.InactiveRecordToggle;
@@ -28,8 +28,7 @@ export default function RecordToggle({ disabled }: Props) {
       className={className}
       disabled={disabled}
       onClick={isProfiling ? stopProfiling : startProfiling}
-      title={isProfiling ? 'Stop profiling' : 'Start profiling'}
-    >
+      title={isProfiling ? 'Stop profiling' : 'Start profiling'}>
       <ButtonIcon type="record" />
     </Button>
   );
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js
index 05c7882fe9f0a..3076d785de545 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js
@@ -1,10 +1,10 @@
 // @flow
 
-import React, { useCallback, useContext, useMemo } from 'react';
+import React, {useCallback, useContext, useMemo} from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
-import { BridgeContext, StoreContext } from '../context';
-import { useSubscription } from '../hooks';
+import {BridgeContext, StoreContext} from '../context';
+import {useSubscription} from '../hooks';
 import Store from 'react-devtools-shared/src/devtools/store';
 
 type SubscriptionData = {|
@@ -31,22 +31,24 @@ export default function ReloadAndProfileButton() {
         };
       },
     }),
-    [store]
+    [store],
   );
-  const {
-    recordChangeDescriptions,
-    supportsReloadAndProfile,
-  } = useSubscription<SubscriptionData>(subscription);
+  const {recordChangeDescriptions, supportsReloadAndProfile} = useSubscription<
+    SubscriptionData,
+  >(subscription);
 
-  const reloadAndProfile = useCallback(() => {
-    // TODO If we want to support reload-and-profile for e.g. React Native,
-    // we might need to also start profiling here before reloading the app (since DevTools itself isn't reloaded).
-    // We'd probably want to do this before reloading though, to avoid sending a message on a disconnected port in the browser.
-    // For now, let's just skip doing it entirely to avoid paying snapshot costs for data we don't need.
-    // startProfiling();
+  const reloadAndProfile = useCallback(
+    () => {
+      // TODO If we want to support reload-and-profile for e.g. React Native,
+      // we might need to also start profiling here before reloading the app (since DevTools itself isn't reloaded).
+      // We'd probably want to do this before reloading though, to avoid sending a message on a disconnected port in the browser.
+      // For now, let's just skip doing it entirely to avoid paying snapshot costs for data we don't need.
+      // startProfiling();
 
-    bridge.send('reloadAndProfile', recordChangeDescriptions);
-  }, [bridge, recordChangeDescriptions]);
+      bridge.send('reloadAndProfile', recordChangeDescriptions);
+    },
+    [bridge, recordChangeDescriptions],
+  );
 
   if (!supportsReloadAndProfile) {
     return null;
@@ -56,8 +58,7 @@ export default function ReloadAndProfileButton() {
     <Button
       disabled={!store.supportsProfiling}
       onClick={reloadAndProfile}
-      title="Reload and start profiling"
-    >
+      title="Reload and start profiling">
       <ButtonIcon type="reload" />
     </Button>
   );
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js
index b4e89af82470a..1301aacd2bf2c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js
@@ -1,12 +1,12 @@
 // @flow
 
-import React, { Fragment, useCallback, useContext } from 'react';
-import { ProfilerContext } from './ProfilerContext';
+import React, {Fragment, useCallback, useContext} from 'react';
+import {ProfilerContext} from './ProfilerContext';
 
 import styles from './RootSelector.css';
 
 export default function RootSelector(_: {||}) {
-  const { profilingData, rootID, setRootID } = useContext(ProfilerContext);
+  const {profilingData, rootID, setRootID} = useContext(ProfilerContext);
 
   const options = [];
   if (profilingData !== null) {
@@ -14,16 +14,16 @@ export default function RootSelector(_: {||}) {
       options.push(
         <option key={rootID} value={rootID}>
           {dataForRoot.displayName}
-        </option>
+        </option>,
       );
     });
   }
 
   const handleChange = useCallback(
-    ({ currentTarget }) => {
+    ({currentTarget}) => {
       setRootID(parseInt(currentTarget.value, 10));
     },
-    [setRootID]
+    [setRootID],
   );
 
   if (profilingData === null || profilingData.dataForRoots.size <= 1) {
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js
index 527d0ebffa610..964ba7548e512 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js
@@ -1,9 +1,9 @@
 // @flow
 
-import React, { Fragment, useContext } from 'react';
-import { ProfilerContext } from './ProfilerContext';
-import { formatDuration, formatTime } from './utils';
-import { StoreContext } from '../context';
+import React, {Fragment, useContext} from 'react';
+import {ProfilerContext} from './ProfilerContext';
+import {formatDuration, formatTime} from './utils';
+import {StoreContext} from '../context';
 
 import styles from './SidebarCommitInfo.css';
 
@@ -17,13 +17,13 @@ export default function SidebarCommitInfo(_: Props) {
     selectTab,
   } = useContext(ProfilerContext);
 
-  const { profilerStore } = useContext(StoreContext);
+  const {profilerStore} = useContext(StoreContext);
 
   if (rootID === null || selectedCommitIndex === null) {
     return <div className={styles.NothingSelected}>Nothing selected</div>;
   }
 
-  const { interactions } = profilerStore.getDataForRoot(rootID);
+  const {interactions} = profilerStore.getDataForRoot(rootID);
   const {
     duration,
     interactionIDs,
@@ -70,8 +70,7 @@ export default function SidebarCommitInfo(_: Props) {
                   <button
                     key={interactionID}
                     className={styles.Interaction}
-                    onClick={() => viewInteraction(interactionID)}
-                  >
+                    onClick={() => viewInteraction(interactionID)}>
                     {interaction.name}
                   </button>
                 );
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarInteractions.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarInteractions.js
index c23a2106fc380..c511e13c3f7ab 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarInteractions.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarInteractions.js
@@ -1,10 +1,10 @@
 // @flow
 
-import React, { Fragment, useContext } from 'react';
-import { ProfilerContext } from './ProfilerContext';
-import { formatDuration, formatTime } from './utils';
-import { StoreContext } from '../context';
-import { getGradientColor } from './utils';
+import React, {Fragment, useContext} from 'react';
+import {ProfilerContext} from './ProfilerContext';
+import {formatDuration, formatTime} from './utils';
+import {StoreContext} from '../context';
+import {getGradientColor} from './utils';
 
 import styles from './SidebarInteractions.css';
 
@@ -18,24 +18,24 @@ export default function SidebarInteractions(_: Props) {
     selectTab,
   } = useContext(ProfilerContext);
 
-  const { profilerStore } = useContext(StoreContext);
-  const { profilingCache } = profilerStore;
+  const {profilerStore} = useContext(StoreContext);
+  const {profilingCache} = profilerStore;
 
   if (selectedInteractionID === null) {
     return <div className={styles.NothingSelected}>Nothing selected</div>;
   }
 
-  const { interactionCommits, interactions } = profilerStore.getDataForRoot(
-    ((rootID: any): number)
+  const {interactionCommits, interactions} = profilerStore.getDataForRoot(
+    ((rootID: any): number),
   );
   const interaction = interactions.get(selectedInteractionID);
   if (interaction == null) {
     throw Error(
-      `Could not find interaction by selected interaction id "${selectedInteractionID}"`
+      `Could not find interaction by selected interaction id "${selectedInteractionID}"`,
     );
   }
 
-  const { maxCommitDuration } = profilingCache.getInteractionsChartData({
+  const {maxCommitDuration} = profilingCache.getInteractionsChartData({
     rootID: ((rootID: any): number),
   });
 
@@ -48,22 +48,21 @@ export default function SidebarInteractions(_: Props) {
   const commitIndices = interactionCommits.get(selectedInteractionID);
   if (commitIndices != null) {
     commitIndices.forEach(commitIndex => {
-      const { duration, timestamp } = profilerStore.getCommitData(
+      const {duration, timestamp} = profilerStore.getCommitData(
         ((rootID: any): number),
-        commitIndex
+        commitIndex,
       );
 
       listItems.push(
         <li
           key={commitIndex}
           className={styles.ListItem}
-          onClick={() => viewCommit(commitIndex)}
-        >
+          onClick={() => viewCommit(commitIndex)}>
           <div
             className={styles.CommitBox}
             style={{
               backgroundColor: getGradientColor(
-                Math.min(1, Math.max(0, duration / maxCommitDuration)) || 0
+                Math.min(1, Math.max(0, duration / maxCommitDuration)) || 0,
               ),
             }}
           />
@@ -72,7 +71,7 @@ export default function SidebarInteractions(_: Props) {
             <br />
             duration: {formatDuration(duration)}ms
           </div>
-        </li>
+        </li>,
       );
     });
   }
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
index 214e44677a244..804b4d43932ce 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
@@ -1,10 +1,10 @@
 // @flow
 
-import React, { Fragment, useContext } from 'react';
+import React, {Fragment, useContext} from 'react';
 import ProfilerStore from 'react-devtools-shared/src/devtools/ProfilerStore';
-import { ProfilerContext } from './ProfilerContext';
-import { formatDuration, formatTime } from './utils';
-import { StoreContext } from '../context';
+import {ProfilerContext} from './ProfilerContext';
+import {formatDuration, formatTime} from './utils';
+import {StoreContext} from '../context';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 
@@ -13,7 +13,7 @@ import styles from './SidebarSelectedFiberInfo.css';
 export type Props = {||};
 
 export default function SidebarSelectedFiberInfo(_: Props) {
-  const { profilerStore } = useContext(StoreContext);
+  const {profilerStore} = useContext(StoreContext);
   const {
     rootID,
     selectCommitIndex,
@@ -22,7 +22,7 @@ export default function SidebarSelectedFiberInfo(_: Props) {
     selectedFiberName,
     selectFiber,
   } = useContext(ProfilerContext);
-  const { profilingCache } = profilerStore;
+  const {profilingCache} = profilerStore;
 
   const commitIndices = profilingCache.getFiberCommits({
     fiberID: ((selectedFiberID: any): number),
@@ -33,9 +33,9 @@ export default function SidebarSelectedFiberInfo(_: Props) {
   for (let i = 0; i < commitIndices.length; i++) {
     const commitIndex = commitIndices[i];
 
-    const { duration, timestamp } = profilerStore.getCommitData(
+    const {duration, timestamp} = profilerStore.getCommitData(
       ((rootID: any): number),
-      commitIndex
+      commitIndex,
     );
 
     listItems.push(
@@ -46,10 +46,9 @@ export default function SidebarSelectedFiberInfo(_: Props) {
             ? styles.CurrentCommit
             : styles.Commit
         }
-        onClick={() => selectCommitIndex(commitIndex)}
-      >
+        onClick={() => selectCommitIndex(commitIndex)}>
         {formatTime(timestamp)}s for {formatDuration(duration)}ms
-      </button>
+      </button>,
     );
   }
 
@@ -63,8 +62,7 @@ export default function SidebarSelectedFiberInfo(_: Props) {
         <Button
           className={styles.IconButton}
           onClick={() => selectFiber(null, null)}
-          title="Back to commit view"
-        >
+          title="Back to commit view">
           <ButtonIcon type="close" />
         </Button>
       </div>
@@ -101,9 +99,9 @@ function WhatChanged({
   profilerStore,
   rootID,
 }: WhatChangedProps) {
-  const { changeDescriptions } = profilerStore.getCommitData(
+  const {changeDescriptions} = profilerStore.getCommitData(
     ((rootID: any): number),
-    commitIndex
+    commitIndex,
   );
   if (changeDescriptions === null) {
     return null;
@@ -131,7 +129,7 @@ function WhatChanged({
     changes.push(
       <div key="context" className={styles.WhatChangedItem}>
         • Context changed
-      </div>
+      </div>,
     );
   } else if (
     typeof changeDescription.context === 'object' &&
@@ -146,7 +144,7 @@ function WhatChanged({
             {key}
           </span>
         ))}
-      </div>
+      </div>,
     );
   }
 
@@ -154,7 +152,7 @@ function WhatChanged({
     changes.push(
       <div key="hooks" className={styles.WhatChangedItem}>
         • Hooks changed
-      </div>
+      </div>,
     );
   }
 
@@ -170,7 +168,7 @@ function WhatChanged({
             {key}
           </span>
         ))}
-      </div>
+      </div>,
     );
   }
 
@@ -186,7 +184,7 @@ function WhatChanged({
             {key}
           </span>
         ))}
-      </div>
+      </div>,
     );
   }
 
@@ -194,7 +192,7 @@ function WhatChanged({
     changes.push(
       <div key="nothing" className={styles.WhatChangedItem}>
         The parent component rendered.
-      </div>
+      </div>,
     );
   }
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
index 433750fdd8445..54db90467b58e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
@@ -1,16 +1,10 @@
 // @flow
 
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { FixedSizeList } from 'react-window';
+import {FixedSizeList} from 'react-window';
 import SnapshotCommitListItem from './SnapshotCommitListItem';
-import { minBarWidth } from './constants';
+import {minBarWidth} from './constants';
 
 import styles from './SnapshotCommitList.css';
 
@@ -44,7 +38,7 @@ export default function SnapshotCommitList({
 }: Props) {
   return (
     <AutoSizer>
-      {({ height, width }) => (
+      {({height, width}) => (
         <List
           commitDurations={commitDurations}
           commitTimes={commitTimes}
@@ -86,14 +80,17 @@ function List({
   const prevCommitIndexRef = useRef<number | null>(null);
 
   // Make sure a newly selected snapshot is fully visible within the list.
-  useEffect(() => {
-    if (selectedFilteredCommitIndex !== prevCommitIndexRef.current) {
-      prevCommitIndexRef.current = selectedFilteredCommitIndex;
-      if (selectedFilteredCommitIndex !== null && listRef.current !== null) {
-        listRef.current.scrollToItem(selectedFilteredCommitIndex);
+  useEffect(
+    () => {
+      if (selectedFilteredCommitIndex !== prevCommitIndexRef.current) {
+        prevCommitIndexRef.current = selectedFilteredCommitIndex;
+        if (selectedFilteredCommitIndex !== null && listRef.current !== null) {
+          listRef.current.scrollToItem(selectedFilteredCommitIndex);
+        }
       }
-    }
-  }, [listRef, selectedFilteredCommitIndex]);
+    },
+    [listRef, selectedFilteredCommitIndex],
+  );
 
   // When the mouse is down, dragging over a commit should auto-select it.
   // This provides a nice way for users to swipe across a range of commits to compare them.
@@ -104,30 +101,33 @@ function List({
   const handleMouseUp = useCallback(() => {
     setIsMouseDown(false);
   }, []);
-  useEffect(() => {
-    if (divRef.current === null) {
-      return () => {};
-    }
+  useEffect(
+    () => {
+      if (divRef.current === null) {
+        return () => {};
+      }
 
-    // It's important to listen to the ownerDocument to support the browser extension.
-    // Here we use portals to render individual tabs (e.g. Profiler),
-    // and the root document might belong to a different window.
-    const ownerDocument = divRef.current.ownerDocument;
-    ownerDocument.addEventListener('mouseup', handleMouseUp);
-    return () => ownerDocument.removeEventListener('mouseup', handleMouseUp);
-  }, [divRef, handleMouseUp]);
+      // It's important to listen to the ownerDocument to support the browser extension.
+      // Here we use portals to render individual tabs (e.g. Profiler),
+      // and the root document might belong to a different window.
+      const ownerDocument = divRef.current.ownerDocument;
+      ownerDocument.addEventListener('mouseup', handleMouseUp);
+      return () => ownerDocument.removeEventListener('mouseup', handleMouseUp);
+    },
+    [divRef, handleMouseUp],
+  );
 
   const itemSize = useMemo(
     () => Math.max(minBarWidth, width / filteredCommitIndices.length),
-    [filteredCommitIndices, width]
+    [filteredCommitIndices, width],
   );
   const maxDuration = useMemo(
     () =>
       commitDurations.reduce(
         (maxDuration, duration) => Math.max(maxDuration, duration),
-        0
+        0,
       ),
-    [commitDurations]
+    [commitDurations],
   );
 
   // Pass required contextual data down to the ListItem renderer.
@@ -151,7 +151,7 @@ function List({
       selectedCommitIndex,
       selectedFilteredCommitIndex,
       selectCommitIndex,
-    ]
+    ],
   );
 
   return (
@@ -159,8 +159,7 @@ function List({
       onMouseDown={handleMouseDown}
       onMouseUp={handleMouseUp}
       ref={divRef}
-      style={{ height, width }}
-    >
+      style={{height, width}}>
       <FixedSizeList
         className={styles.List}
         layout="horizontal"
@@ -169,8 +168,7 @@ function List({
         itemData={itemData}
         itemSize={itemSize}
         ref={(listRef: any) /* Flow bug? */}
-        width={width}
-      >
+        width={width}>
         {SnapshotCommitListItem}
       </FixedSizeList>
     </div>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js
index 4116d41f36125..c1ae6f4e02cf6 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js
@@ -1,12 +1,12 @@
 // @flow
 
-import React, { memo, useCallback } from 'react';
-import { areEqual } from 'react-window';
-import { getGradientColor, formatDuration, formatTime } from './utils';
+import React, {memo, useCallback} from 'react';
+import {areEqual} from 'react-window';
+import {getGradientColor, formatDuration, formatTime} from './utils';
 
 import styles from './SnapshotCommitListItem.css';
 
-import type { ItemData } from './SnapshotCommitList';
+import type {ItemData} from './SnapshotCommitList';
 
 type Props = {
   data: ItemData,
@@ -14,7 +14,7 @@ type Props = {
   style: Object,
 };
 
-function SnapshotCommitListItem({ data: itemData, index, style }: Props) {
+function SnapshotCommitListItem({data: itemData, index, style}: Props) {
   const {
     commitDurations,
     commitTimes,
@@ -56,9 +56,8 @@ function SnapshotCommitListItem({ data: itemData, index, style }: Props) {
           : undefined,
       }}
       title={`Duration ${formatDuration(commitDuration)}ms at ${formatTime(
-        commitTime
-      )}s`}
-    >
+        commitTime,
+      )}s`}>
       <div
         className={styles.Inner}
         style={{
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
index a41187d89d08a..c64e87bbd09aa 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
@@ -1,12 +1,12 @@
 // @flow
 
-import React, { Fragment, useCallback, useContext, useMemo } from 'react';
+import React, {Fragment, useCallback, useContext, useMemo} from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
-import { ProfilerContext } from './ProfilerContext';
+import {ProfilerContext} from './ProfilerContext';
 import SnapshotCommitList from './SnapshotCommitList';
-import { maxBarWidth } from './constants';
-import { StoreContext } from '../context';
+import {maxBarWidth} from './constants';
+import {StoreContext} from '../context';
 
 import styles from './SnapshotSelector.css';
 
@@ -21,8 +21,8 @@ export default function SnapshotSelector(_: Props) {
     selectCommitIndex,
   } = useContext(ProfilerContext);
 
-  const { profilerStore } = useContext(StoreContext);
-  const { commitData } = profilerStore.getDataForRoot(((rootID: any): number));
+  const {profilerStore} = useContext(StoreContext);
+  const {commitData} = profilerStore.getDataForRoot(((rootID: any): number));
 
   const commitDurations: Array<number> = [];
   const commitTimes: Array<number> = [];
@@ -42,22 +42,25 @@ export default function SnapshotSelector(_: Props) {
         }
         return reduced;
       }, []),
-    [commitData, isCommitFilterEnabled, minCommitDuration]
+    [commitData, isCommitFilterEnabled, minCommitDuration],
   );
 
   const numFilteredCommits = filteredCommitIndices.length;
 
   // Map the (unfiltered) selected commit index to an index within the filtered data.
-  const selectedFilteredCommitIndex = useMemo(() => {
-    if (selectedCommitIndex !== null) {
-      for (let i = 0; i < filteredCommitIndices.length; i++) {
-        if (filteredCommitIndices[i] === selectedCommitIndex) {
-          return i;
+  const selectedFilteredCommitIndex = useMemo(
+    () => {
+      if (selectedCommitIndex !== null) {
+        for (let i = 0; i < filteredCommitIndices.length; i++) {
+          if (filteredCommitIndices[i] === selectedCommitIndex) {
+            return i;
+          }
         }
       }
-    }
-    return null;
-  }, [filteredCommitIndices, selectedCommitIndex]);
+      return null;
+    },
+    [filteredCommitIndices, selectedCommitIndex],
+  );
 
   // TODO (profiling) This should be managed by the context controller (reducer).
   // It doesn't currently know about the filtered commits though (since it doesn't suspend).
@@ -77,26 +80,32 @@ export default function SnapshotSelector(_: Props) {
     label =
       `${selectedFilteredCommitIndex + 1}`.padStart(
         `${numFilteredCommits}`.length,
-        '0'
+        '0',
       ) +
       ' / ' +
       numFilteredCommits;
   }
 
-  const viewNextCommit = useCallback(() => {
-    const nextCommitIndex = Math.min(
-      ((selectedFilteredCommitIndex: any): number) + 1,
-      filteredCommitIndices.length - 1
-    );
-    selectCommitIndex(filteredCommitIndices[nextCommitIndex]);
-  }, [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex]);
-  const viewPrevCommit = useCallback(() => {
-    const nextCommitIndex = Math.max(
-      ((selectedFilteredCommitIndex: any): number) - 1,
-      0
-    );
-    selectCommitIndex(filteredCommitIndices[nextCommitIndex]);
-  }, [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex]);
+  const viewNextCommit = useCallback(
+    () => {
+      const nextCommitIndex = Math.min(
+        ((selectedFilteredCommitIndex: any): number) + 1,
+        filteredCommitIndices.length - 1,
+      );
+      selectCommitIndex(filteredCommitIndices[nextCommitIndex]);
+    },
+    [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex],
+  );
+  const viewPrevCommit = useCallback(
+    () => {
+      const nextCommitIndex = Math.max(
+        ((selectedFilteredCommitIndex: any): number) - 1,
+        0,
+      );
+      selectCommitIndex(filteredCommitIndices[nextCommitIndex]);
+    },
+    [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex],
+  );
 
   const handleKeyDown = useCallback(
     event => {
@@ -113,7 +122,7 @@ export default function SnapshotSelector(_: Props) {
           break;
       }
     },
-    [viewNextCommit, viewPrevCommit]
+    [viewNextCommit, viewPrevCommit],
   );
 
   if (commitData.length === 0) {
@@ -127,8 +136,7 @@ export default function SnapshotSelector(_: Props) {
         className={styles.Button}
         disabled={selectedFilteredCommitIndex === 0 || numFilteredCommits === 0}
         onClick={viewPrevCommit}
-        title="Select previous commit"
-      >
+        title="Select previous commit">
         <ButtonIcon type="previous" />
       </Button>
       <div
@@ -141,8 +149,7 @@ export default function SnapshotSelector(_: Props) {
               ? numFilteredCommits * maxBarWidth
               : undefined,
         }}
-        tabIndex={0}
-      >
+        tabIndex={0}>
         {numFilteredCommits > 0 && (
           <SnapshotCommitList
             commitDurations={commitDurations}
@@ -164,8 +171,7 @@ export default function SnapshotSelector(_: Props) {
           selectedFilteredCommitIndex >= numFilteredCommits - 1
         }
         onClick={viewNextCommit}
-        title="Select next commit"
-      >
+        title="Select next commit">
         <ButtonIcon type="next" />
       </Button>
     </Fragment>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/types.js b/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
index 06beb521cca27..2afd9826e362e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
@@ -1,6 +1,6 @@
 // @flow
 
-import type { ElementType } from 'react-devtools-shared/src/types';
+import type {ElementType} from 'react-devtools-shared/src/types';
 
 export type CommitTreeNode = {|
   id: number,
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js b/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
index 3caf128483c5a..92dce7e48c390 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
@@ -1,8 +1,8 @@
 // @flow
 
-import { PROFILER_EXPORT_VERSION } from 'react-devtools-shared/src/constants';
+import {PROFILER_EXPORT_VERSION} from 'react-devtools-shared/src/constants';
 
-import type { ProfilingDataBackend } from 'react-devtools-shared/src/backend/types';
+import type {ProfilingDataBackend} from 'react-devtools-shared/src/backend/types';
 import type {
   ProfilingDataExport,
   ProfilingDataForRootExport,
@@ -29,7 +29,7 @@ const commitGradient = [
 export function prepareProfilingDataFrontendFromBackendAndStore(
   dataBackends: Array<ProfilingDataBackend>,
   operationsByRootID: Map<number, Array<Array<number>>>,
-  snapshotsByRootID: Map<number, Map<number, SnapshotNode>>
+  snapshotsByRootID: Map<number, Map<number, SnapshotNode>>,
 ): ProfilingDataFrontend {
   const dataForRoots: Map<number, ProfilingDataForRootFrontend> = new Map();
 
@@ -61,7 +61,7 @@ export function prepareProfilingDataFrontendFromBackendAndStore(
                 : null,
             duration: commitDataBackend.duration,
             fiberActualDurations: new Map(
-              commitDataBackend.fiberActualDurations
+              commitDataBackend.fiberActualDurations,
             ),
             fiberSelfDurations: new Map(commitDataBackend.fiberSelfDurations),
             interactionIDs: commitDataBackend.interactionIDs,
@@ -76,18 +76,18 @@ export function prepareProfilingDataFrontendFromBackendAndStore(
           rootID,
           snapshots,
         });
-      }
+      },
     );
   });
 
-  return { dataForRoots };
+  return {dataForRoots};
 }
 
 // Converts a Profiling data export into the format required by the Store.
 export function prepareProfilingDataFrontendFromExport(
-  profilingDataExport: ProfilingDataExport
+  profilingDataExport: ProfilingDataExport,
 ): ProfilingDataFrontend {
-  const { version } = profilingDataExport;
+  const {version} = profilingDataExport;
 
   if (version !== PROFILER_EXPORT_VERSION) {
     throw Error(`Unsupported profiler export version "${version}"`);
@@ -124,7 +124,7 @@ export function prepareProfilingDataFrontendFromExport(
             interactionIDs,
             priorityLevel,
             timestamp,
-          })
+          }),
         ),
         displayName,
         initialTreeBaseDurations: new Map(initialTreeBaseDurations),
@@ -134,15 +134,15 @@ export function prepareProfilingDataFrontendFromExport(
         rootID,
         snapshots: new Map(snapshots),
       });
-    }
+    },
   );
 
-  return { dataForRoots };
+  return {dataForRoots};
 }
 
 // Converts a Store Profiling data into a format that can be safely (JSON) serialized for export.
 export function prepareProfilingDataExport(
-  profilingDataFrontend: ProfilingDataFrontend
+  profilingDataFrontend: ProfilingDataFrontend,
 ): ProfilingDataExport {
   const dataForRoots: Array<ProfilingDataForRootExport> = [];
   profilingDataFrontend.dataForRoots.forEach(
@@ -177,11 +177,11 @@ export function prepareProfilingDataExport(
             interactionIDs,
             priorityLevel,
             timestamp,
-          })
+          }),
         ),
         displayName,
         initialTreeBaseDurations: Array.from(
-          initialTreeBaseDurations.entries()
+          initialTreeBaseDurations.entries(),
         ),
         interactionCommits: Array.from(interactionCommits.entries()),
         interactions: Array.from(interactions.entries()),
@@ -189,7 +189,7 @@ export function prepareProfilingDataExport(
         rootID,
         snapshots: Array.from(snapshots.entries()),
       });
-    }
+    },
   );
 
   return {
@@ -222,7 +222,7 @@ export const scale = (
   minValue: number,
   maxValue: number,
   minRange: number,
-  maxRange: number
+  maxRange: number,
 ) => (value: number, fallbackValue: number) =>
   maxValue - minValue === 0
     ? fallbackValue
diff --git a/packages/react-devtools-shared/src/devtools/views/ReactLogo.js b/packages/react-devtools-shared/src/devtools/views/ReactLogo.js
index 358a3a8ec8a8e..bcc50d2e4b39b 100644
--- a/packages/react-devtools-shared/src/devtools/views/ReactLogo.js
+++ b/packages/react-devtools-shared/src/devtools/views/ReactLogo.js
@@ -8,13 +8,12 @@ type Props = {|
   className?: string,
 |};
 
-export default function ReactLogo({ className }: Props) {
+export default function ReactLogo({className}: Props) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       className={`${styles.ReactLogo} ${className || ''}`}
-      viewBox="-11.5 -10.23174 23 20.46348"
-    >
+      viewBox="-11.5 -10.23174 23 20.46348">
       <circle cx="0" cy="0" r="2.05" fill="currentColor" />
       <g stroke="currentColor" strokeWidth="1" fill="none">
         <ellipse rx="11" ry="4.2" />
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
index 3757c5139bd87..bef3e1a6c59d2 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
@@ -8,8 +8,8 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { useSubscription } from '../hooks';
-import { StoreContext } from '../context';
+import {useSubscription} from '../hooks';
+import {StoreContext} from '../context';
 import Store from 'react-devtools-shared/src/devtools/store';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
@@ -52,21 +52,21 @@ export default function ComponentsSettings(_: {||}) {
         return () => store.removeListener('collapseNodesByDefault', callback);
       },
     }),
-    [store]
+    [store],
   );
   const collapseNodesByDefault = useSubscription<boolean>(
-    collapseNodesByDefaultSubscription
+    collapseNodesByDefaultSubscription,
   );
 
   const updateCollapseNodesByDefault = useCallback(
-    ({ currentTarget }) => {
+    ({currentTarget}) => {
       store.collapseNodesByDefault = !currentTarget.checked;
     },
-    [store]
+    [store],
   );
 
   const [componentFilters, setComponentFilters] = useState<
-    Array<ComponentFilter>
+    Array<ComponentFilter>,
   >(() => [...store.componentFilters]);
 
   const addFilter = useCallback(() => {
@@ -119,7 +119,7 @@ export default function ComponentsSettings(_: {||}) {
         return cloned;
       });
     },
-    []
+    [],
   );
 
   const updateFilterValueElementType = useCallback(
@@ -142,7 +142,7 @@ export default function ComponentsSettings(_: {||}) {
         return cloned;
       });
     },
-    []
+    [],
   );
 
   const updateFilterValueRegExp = useCallback(
@@ -175,7 +175,7 @@ export default function ComponentsSettings(_: {||}) {
         return cloned;
       });
     },
-    []
+    [],
   );
 
   const removeFilter = useCallback((index: number) => {
@@ -215,7 +215,7 @@ export default function ComponentsSettings(_: {||}) {
         return cloned;
       });
     },
-    []
+    [],
   );
 
   // Filter updates are expensive to apply (since they impact the entire tree).
@@ -223,15 +223,18 @@ export default function ComponentsSettings(_: {||}) {
   // The Store will avoid doing any expensive work unless they've changed.
   // We just want to batch the work in the event that they do change.
   const componentFiltersRef = useRef<Array<ComponentFilter>>(componentFilters);
-  useEffect(() => {
-    componentFiltersRef.current = componentFilters;
-    return () => {};
-  }, [componentFilters]);
+  useEffect(
+    () => {
+      componentFiltersRef.current = componentFilters;
+      return () => {};
+    },
+    [componentFilters],
+  );
   useEffect(
     () => () => {
       store.componentFilters = [...componentFiltersRef.current];
     },
-    [store]
+    [store],
   );
 
   return (
@@ -273,10 +276,9 @@ export default function ComponentsSettings(_: {||}) {
                     componentFilter.isValid === false
                       ? 'Filter invalid'
                       : componentFilter.isEnabled
-                      ? 'Filter enabled'
-                      : 'Filter disabled'
-                  }
-                >
+                        ? 'Filter enabled'
+                        : 'Filter disabled'
+                  }>
                   <ToggleIcon
                     isEnabled={componentFilter.isEnabled}
                     isValid={
@@ -290,16 +292,15 @@ export default function ComponentsSettings(_: {||}) {
                 <select
                   className={styles.Select}
                   value={componentFilter.type}
-                  onChange={({ currentTarget }) =>
+                  onChange={({currentTarget}) =>
                     changeFilterType(
                       componentFilter,
                       ((parseInt(
                         currentTarget.value,
-                        10
-                      ): any): ComponentFilterType)
+                        10,
+                      ): any): ComponentFilterType),
                     )
-                  }
-                >
+                  }>
                   <option value={ComponentFilterLocation}>location</option>
                   <option value={ComponentFilterDisplayName}>name</option>
                   <option value={ComponentFilterElementType}>type</option>
@@ -318,13 +319,12 @@ export default function ComponentsSettings(_: {||}) {
                   <select
                     className={styles.Select}
                     value={componentFilter.value}
-                    onChange={({ currentTarget }) =>
+                    onChange={({currentTarget}) =>
                       updateFilterValueElementType(
                         componentFilter,
-                        ((parseInt(currentTarget.value, 10): any): ElementType)
+                        ((parseInt(currentTarget.value, 10): any): ElementType),
                       )
-                    }
-                  >
+                    }>
                     <option value={ElementTypeClass}>class</option>
                     <option value={ElementTypeContext}>context</option>
                     <option value={ElementTypeFunction}>function</option>
@@ -344,10 +344,10 @@ export default function ComponentsSettings(_: {||}) {
                     className={styles.Input}
                     type="text"
                     placeholder="Regular expression"
-                    onChange={({ currentTarget }) =>
+                    onChange={({currentTarget}) =>
                       updateFilterValueRegExp(
                         componentFilter,
-                        currentTarget.value
+                        currentTarget.value,
                       )
                     }
                     value={componentFilter.value}
@@ -357,8 +357,7 @@ export default function ComponentsSettings(_: {||}) {
               <td className={styles.TableCell}>
                 <Button
                   onClick={() => removeFilter(index)}
-                  title="Delete filter"
-                >
+                  title="Delete filter">
                   <ButtonIcon type="delete" />
                 </Button>
               </td>
@@ -379,7 +378,7 @@ type ToggleIconProps = {|
   isEnabled: boolean,
   isValid: boolean,
 |};
-function ToggleIcon({ isEnabled, isValid }: ToggleIconProps) {
+function ToggleIcon({isEnabled, isValid}: ToggleIconProps) {
   let className;
   if (isValid) {
     className = isEnabled ? styles.ToggleOn : styles.ToggleOff;
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
index 59edf3bfcbf1d..25e9dc3320cd9 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
@@ -1,8 +1,8 @@
 // @flow
 
-import React, { useContext } from 'react';
-import { SettingsContext } from './SettingsContext';
-import { CHANGE_LOG_URL } from 'react-devtools-shared/src/constants';
+import React, {useContext} from 'react';
+import {SettingsContext} from './SettingsContext';
+import {CHANGE_LOG_URL} from 'react-devtools-shared/src/constants';
 
 import styles from './SettingsShared.css';
 
@@ -16,10 +16,10 @@ export default function GeneralSettings(_: {||}) {
     setAppendComponentStack,
   } = useContext(SettingsContext);
 
-  const updateDisplayDensity = ({ currentTarget }) =>
+  const updateDisplayDensity = ({currentTarget}) =>
     setDisplayDensity(currentTarget.value);
-  const updateTheme = ({ currentTarget }) => setTheme(currentTarget.value);
-  const updateappendComponentStack = ({ currentTarget }) =>
+  const updateTheme = ({currentTarget}) => setTheme(currentTarget.value);
+  const updateappendComponentStack = ({currentTarget}) =>
     setAppendComponentStack(currentTarget.checked);
 
   return (
@@ -38,8 +38,7 @@ export default function GeneralSettings(_: {||}) {
         <select
           className={styles.Select}
           value={displayDensity}
-          onChange={updateDisplayDensity}
-        >
+          onChange={updateDisplayDensity}>
           <option value="compact">Compact</option>
           <option value="comfortable">Comfortable</option>
         </select>
@@ -61,8 +60,7 @@ export default function GeneralSettings(_: {||}) {
           className={styles.ReleaseNotesLink}
           target="_blank"
           rel="noopener noreferrer"
-          href={CHANGE_LOG_URL}
-        >
+          href={CHANGE_LOG_URL}>
           View release notes
         </a>{' '}
         for DevTools version {process.env.DEVTOOLS_VERSION}
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js
index 0a09cab1e44ad..4d3bbe7ce311c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js
@@ -1,9 +1,9 @@
 // @flow
 
-import React, { useCallback, useContext, useMemo, useRef } from 'react';
-import { useSubscription } from '../hooks';
-import { StoreContext } from '../context';
-import { ProfilerContext } from 'react-devtools-shared/src/devtools/views/Profiler/ProfilerContext';
+import React, {useCallback, useContext, useMemo, useRef} from 'react';
+import {useSubscription} from '../hooks';
+import {StoreContext} from '../context';
+import {ProfilerContext} from 'react-devtools-shared/src/devtools/views/Profiler/ProfilerContext';
 import Store from 'react-devtools-shared/src/devtools/store';
 
 import styles from './SettingsShared.css';
@@ -25,26 +25,26 @@ export default function ProfilerSettings(_: {||}) {
         return () => store.removeListener('recordChangeDescriptions', callback);
       },
     }),
-    [store]
+    [store],
   );
   const recordChangeDescriptions = useSubscription<boolean>(
-    recordChangeDescriptionsSubscription
+    recordChangeDescriptionsSubscription,
   );
 
   const updateRecordChangeDescriptions = useCallback(
-    ({ currentTarget }) => {
+    ({currentTarget}) => {
       store.recordChangeDescriptions = currentTarget.checked;
     },
-    [store]
+    [store],
   );
   const updateMinCommitDuration = useCallback(
     (event: SyntheticEvent<HTMLInputElement>) => {
       const newValue = parseFloat(event.currentTarget.value);
       setMinCommitDuration(
-        Number.isNaN(newValue) || newValue <= 0 ? 0 : newValue
+        Number.isNaN(newValue) || newValue <= 0 ? 0 : newValue,
       );
     },
-    [setMinCommitDuration]
+    [setMinCommitDuration],
   );
   const updateIsCommitFilterEnabled = useCallback(
     (event: SyntheticEvent<HTMLInputElement>) => {
@@ -56,7 +56,7 @@ export default function ProfilerSettings(_: {||}) {
         }
       }
     },
-    [setIsCommitFilterEnabled]
+    [setIsCommitFilterEnabled],
   );
 
   const minCommitDurationInputRef = useRef<HTMLInputElement | null>(null);
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
index 200559e15f788..cf640f7a1ec4c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -12,10 +12,10 @@ import {
   COMPACT_LINE_HEIGHT,
   LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
 } from 'react-devtools-shared/src/constants';
-import { useLocalStorage } from '../hooks';
-import { BridgeContext } from '../context';
+import {useLocalStorage} from '../hooks';
+import {BridgeContext} from '../context';
 
-import type { BrowserTheme } from '../DevTools';
+import type {BrowserTheme} from '../DevTools';
 
 export type DisplayDensity = 'comfortable' | 'compact';
 export type Theme = 'auto' | 'light' | 'dark';
@@ -57,68 +57,79 @@ function SettingsContextController({
 
   const [displayDensity, setDisplayDensity] = useLocalStorage<DisplayDensity>(
     'React::DevTools::displayDensity',
-    'compact'
+    'compact',
   );
   const [theme, setTheme] = useLocalStorage<Theme>(
     'React::DevTools::theme',
-    'auto'
+    'auto',
   );
-  const [
-    appendComponentStack,
-    setAppendComponentStack,
-  ] = useLocalStorage<boolean>(LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY, true);
+  const [appendComponentStack, setAppendComponentStack] = useLocalStorage<
+    boolean,
+  >(LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY, true);
 
-  const documentElements = useMemo<DocumentElements>(() => {
-    const array: Array<HTMLElement> = [
-      ((document.documentElement: any): HTMLElement),
-    ];
-    if (componentsPortalContainer != null) {
-      array.push(
-        ((componentsPortalContainer.ownerDocument
-          .documentElement: any): HTMLElement)
-      );
-    }
-    if (profilerPortalContainer != null) {
-      array.push(
-        ((profilerPortalContainer.ownerDocument
-          .documentElement: any): HTMLElement)
-      );
-    }
-    return array;
-  }, [componentsPortalContainer, profilerPortalContainer]);
+  const documentElements = useMemo<DocumentElements>(
+    () => {
+      const array: Array<HTMLElement> = [
+        ((document.documentElement: any): HTMLElement),
+      ];
+      if (componentsPortalContainer != null) {
+        array.push(
+          ((componentsPortalContainer.ownerDocument
+            .documentElement: any): HTMLElement),
+        );
+      }
+      if (profilerPortalContainer != null) {
+        array.push(
+          ((profilerPortalContainer.ownerDocument
+            .documentElement: any): HTMLElement),
+        );
+      }
+      return array;
+    },
+    [componentsPortalContainer, profilerPortalContainer],
+  );
 
-  useLayoutEffect(() => {
-    switch (displayDensity) {
-      case 'comfortable':
-        updateDisplayDensity('comfortable', documentElements);
-        break;
-      case 'compact':
-        updateDisplayDensity('compact', documentElements);
-        break;
-      default:
-        throw Error(`Unsupported displayDensity value "${displayDensity}"`);
-    }
-  }, [displayDensity, documentElements]);
+  useLayoutEffect(
+    () => {
+      switch (displayDensity) {
+        case 'comfortable':
+          updateDisplayDensity('comfortable', documentElements);
+          break;
+        case 'compact':
+          updateDisplayDensity('compact', documentElements);
+          break;
+        default:
+          throw Error(`Unsupported displayDensity value "${displayDensity}"`);
+      }
+    },
+    [displayDensity, documentElements],
+  );
 
-  useLayoutEffect(() => {
-    switch (theme) {
-      case 'light':
-        updateThemeVariables('light', documentElements);
-        break;
-      case 'dark':
-        updateThemeVariables('dark', documentElements);
-        break;
-      case 'auto':
-        updateThemeVariables(browserTheme, documentElements);
-        break;
-      default:
-        throw Error(`Unsupported theme value "${theme}"`);
-    }
-  }, [browserTheme, theme, documentElements]);
+  useLayoutEffect(
+    () => {
+      switch (theme) {
+        case 'light':
+          updateThemeVariables('light', documentElements);
+          break;
+        case 'dark':
+          updateThemeVariables('dark', documentElements);
+          break;
+        case 'auto':
+          updateThemeVariables(browserTheme, documentElements);
+          break;
+        default:
+          throw Error(`Unsupported theme value "${theme}"`);
+      }
+    },
+    [browserTheme, theme, documentElements],
+  );
 
-  useEffect(() => {
-    bridge.send('updateAppendComponentStack', appendComponentStack);
-  }, [bridge, appendComponentStack]);
+  useEffect(
+    () => {
+      bridge.send('updateAppendComponentStack', appendComponentStack);
+    },
+    [bridge, appendComponentStack],
+  );
 
   const value = useMemo(
     () => ({
@@ -140,7 +151,7 @@ function SettingsContextController({
       appendComponentStack,
       setAppendComponentStack,
       theme,
-    ]
+    ],
   );
 
   return (
@@ -153,43 +164,43 @@ function SettingsContextController({
 function setStyleVariable(
   name: string,
   value: string,
-  documentElements: DocumentElements
+  documentElements: DocumentElements,
 ) {
   documentElements.forEach(documentElement =>
-    documentElement.style.setProperty(name, value)
+    documentElement.style.setProperty(name, value),
   );
 }
 
 function updateStyleHelper(
   themeKey: string,
   style: string,
-  documentElements: DocumentElements
+  documentElements: DocumentElements,
 ) {
   setStyleVariable(
     `--${style}`,
     `var(--${themeKey}-${style})`,
-    documentElements
+    documentElements,
   );
 }
 
 function updateDisplayDensity(
   displayDensity: DisplayDensity,
-  documentElements: DocumentElements
+  documentElements: DocumentElements,
 ): void {
   updateStyleHelper(
     displayDensity,
     'font-size-monospace-normal',
-    documentElements
+    documentElements,
   );
   updateStyleHelper(
     displayDensity,
     'font-size-monospace-large',
-    documentElements
+    documentElements,
   );
   updateStyleHelper(
     displayDensity,
     'font-size-monospace-small',
-    documentElements
+    documentElements,
   );
   updateStyleHelper(displayDensity, 'font-size-sans-normal', documentElements);
   updateStyleHelper(displayDensity, 'font-size-sans-large', documentElements);
@@ -200,7 +211,7 @@ function updateDisplayDensity(
   // so update the root font-size as well when the display preference changes.
   const computedStyle = getComputedStyle((document.body: any));
   const fontSize = computedStyle.getPropertyValue(
-    `--${displayDensity}-root-font-size`
+    `--${displayDensity}-root-font-size`,
   );
   const root = ((document.querySelector(':root'): any): HTMLElement);
   root.style.fontSize = fontSize;
@@ -208,7 +219,7 @@ function updateDisplayDensity(
 
 function updateThemeVariables(
   theme: Theme,
-  documentElements: DocumentElements
+  documentElements: DocumentElements,
 ): void {
   updateStyleHelper(theme, 'color-attribute-name', documentElements);
   updateStyleHelper(theme, 'color-attribute-name-inverted', documentElements);
@@ -231,22 +242,22 @@ function updateThemeVariables(
   updateStyleHelper(
     theme,
     'color-commit-did-not-render-fill',
-    documentElements
+    documentElements,
   );
   updateStyleHelper(
     theme,
     'color-commit-did-not-render-fill-text',
-    documentElements
+    documentElements,
   );
   updateStyleHelper(
     theme,
     'color-commit-did-not-render-pattern',
-    documentElements
+    documentElements,
   );
   updateStyleHelper(
     theme,
     'color-commit-did-not-render-pattern-text',
-    documentElements
+    documentElements,
   );
   updateStyleHelper(theme, 'color-commit-gradient-0', documentElements);
   updateStyleHelper(theme, 'color-commit-gradient-1', documentElements);
@@ -264,18 +275,18 @@ function updateThemeVariables(
   updateStyleHelper(
     theme,
     'color-component-badge-background',
-    documentElements
+    documentElements,
   );
   updateStyleHelper(
     theme,
     'color-component-badge-background-inverted',
-    documentElements
+    documentElements,
   );
   updateStyleHelper(theme, 'color-component-badge-count', documentElements);
   updateStyleHelper(
     theme,
     'color-component-badge-count-inverted',
-    documentElements
+    documentElements,
   );
   updateStyleHelper(theme, 'color-dim', documentElements);
   updateStyleHelper(theme, 'color-dimmer', documentElements);
@@ -293,12 +304,12 @@ function updateThemeVariables(
   updateStyleHelper(
     theme,
     'color-selected-tree-highlight-active',
-    documentElements
+    documentElements,
   );
   updateStyleHelper(
     theme,
     'color-selected-tree-highlight-inactive',
-    documentElements
+    documentElements,
   );
   updateStyleHelper(theme, 'color-tab-selected-border', documentElements);
   updateStyleHelper(theme, 'color-text', documentElements);
@@ -324,4 +335,4 @@ function updateThemeVariables(
   });
 }
 
-export { SettingsContext, SettingsContextController };
+export {SettingsContext, SettingsContextController};
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js
index 8b876d3750681..d3073c4ac65f9 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js
@@ -7,12 +7,12 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
-import { SettingsModalContext } from './SettingsModalContext';
+import {SettingsModalContext} from './SettingsModalContext';
 import Store from 'react-devtools-shared/src/devtools/store';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import TabBar from '../TabBar';
-import { StoreContext } from '../context';
+import {StoreContext} from '../context';
 import {
   useLocalStorage,
   useModalDismissSignal,
@@ -27,11 +27,9 @@ import styles from './SettingsModal.css';
 type TabID = 'general' | 'components' | 'profiler';
 
 export default function SettingsModal(_: {||}) {
-  const { isModalShowing, setIsModalShowing } = useContext(
-    SettingsModalContext
-  );
+  const {isModalShowing, setIsModalShowing} = useContext(SettingsModalContext);
   const store = useContext(StoreContext);
-  const { profilerStore } = store;
+  const {profilerStore} = store;
 
   // Updating preferences while profiling is in progress could break things (e.g. filtering)
   // Explicitly disallow it for now.
@@ -43,7 +41,7 @@ export default function SettingsModal(_: {||}) {
         return () => profilerStore.removeListener('isProfiling', callback);
       },
     }),
-    [profilerStore]
+    [profilerStore],
   );
   const isProfiling = useSubscription<boolean>(isProfilingSubscription);
   if (isProfiling && isModalShowing) {
@@ -58,24 +56,27 @@ export default function SettingsModal(_: {||}) {
 }
 
 function SettingsModalImpl(_: {||}) {
-  const { setIsModalShowing } = useContext(SettingsModalContext);
+  const {setIsModalShowing} = useContext(SettingsModalContext);
   const dismissModal = useCallback(() => setIsModalShowing(false), [
     setIsModalShowing,
   ]);
 
   const [selectedTabID, selectTab] = useLocalStorage<TabID>(
     'React::DevTools::selectedSettingsTabID',
-    'general'
+    'general',
   );
 
   const modalRef = useRef<HTMLDivElement | null>(null);
   useModalDismissSignal(modalRef, dismissModal);
 
-  useEffect(() => {
-    if (modalRef.current !== null) {
-      modalRef.current.focus();
-    }
-  }, [modalRef]);
+  useEffect(
+    () => {
+      if (modalRef.current !== null) {
+        modalRef.current.focus();
+      }
+    },
+    [modalRef],
+  );
 
   let view = null;
   switch (selectedTabID) {
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js
index 1b214f37f6394..698400cb8dd18 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { createContext, useMemo, useState } from 'react';
+import React, {createContext, useMemo, useState} from 'react';
 
 export type DisplayDensity = 'comfortable' | 'compact';
 export type Theme = 'auto' | 'light' | 'dark';
@@ -13,14 +13,10 @@ type Context = {
 const SettingsModalContext = createContext<Context>(((null: any): Context));
 SettingsModalContext.displayName = 'SettingsModalContext';
 
-function SettingsModalContextController({
-  children,
-}: {|
-  children: React$Node,
-|}) {
+function SettingsModalContextController({children}: {|children: React$Node|}) {
   const [isModalShowing, setIsModalShowing] = useState<boolean>(false);
 
-  const value = useMemo(() => ({ isModalShowing, setIsModalShowing }), [
+  const value = useMemo(() => ({isModalShowing, setIsModalShowing}), [
     isModalShowing,
     setIsModalShowing,
   ]);
@@ -32,4 +28,4 @@ function SettingsModalContextController({
   );
 }
 
-export { SettingsModalContext, SettingsModalContextController };
+export {SettingsModalContext, SettingsModalContextController};
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle.js
index 3781612b8f44c..e7c58ec2301a1 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle.js
@@ -1,17 +1,17 @@
 // @flow
 
-import React, { useCallback, useContext, useMemo } from 'react';
-import { SettingsModalContext } from './SettingsModalContext';
+import React, {useCallback, useContext, useMemo} from 'react';
+import {SettingsModalContext} from './SettingsModalContext';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
-import { StoreContext } from '../context';
-import { useSubscription } from '../hooks';
+import {StoreContext} from '../context';
+import {useSubscription} from '../hooks';
 import Store from 'react-devtools-shared/src/devtools/store';
 
 export default function SettingsModalContextToggle() {
-  const { setIsModalShowing } = useContext(SettingsModalContext);
+  const {setIsModalShowing} = useContext(SettingsModalContext);
   const store = useContext(StoreContext);
-  const { profilerStore } = store;
+  const {profilerStore} = store;
 
   const showFilterModal = useCallback(() => setIsModalShowing(true), [
     setIsModalShowing,
@@ -27,7 +27,7 @@ export default function SettingsModalContextToggle() {
         return () => profilerStore.removeListener('isProfiling', callback);
       },
     }),
-    [profilerStore]
+    [profilerStore],
   );
   const isProfiling = useSubscription<boolean>(isProfilingSubscription);
 
@@ -35,8 +35,7 @@ export default function SettingsModalContextToggle() {
     <Button
       disabled={isProfiling}
       onClick={showFilterModal}
-      title="View settings"
-    >
+      title="View settings">
       <ButtonIcon type="settings" />
     </Button>
   );
diff --git a/packages/react-devtools-shared/src/devtools/views/ShowWelcomeToTheNewDevToolsDialog.js b/packages/react-devtools-shared/src/devtools/views/ShowWelcomeToTheNewDevToolsDialog.js
index c6f82dc51cb3a..0fb270999652a 100644
--- a/packages/react-devtools-shared/src/devtools/views/ShowWelcomeToTheNewDevToolsDialog.js
+++ b/packages/react-devtools-shared/src/devtools/views/ShowWelcomeToTheNewDevToolsDialog.js
@@ -1,11 +1,11 @@
 // @flow
 
-import React, { Fragment, useContext, useEffect } from 'react';
-import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
-import { useLocalStorage } from './hooks';
-import { ModalDialogContext } from './ModalDialog';
+import React, {Fragment, useContext, useEffect} from 'react';
+import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
+import {useLocalStorage} from './hooks';
+import {ModalDialogContext} from './ModalDialog';
 import ReactLogo from './ReactLogo';
-import { CHANGE_LOG_URL } from 'react-devtools-shared/src/constants';
+import {CHANGE_LOG_URL} from 'react-devtools-shared/src/constants';
 
 import styles from './ShowWelcomeToTheNewDevToolsDialog.css';
 
@@ -13,28 +13,31 @@ const LOCAL_STORAGE_KEY =
   'React::DevTools::hasShownWelcomeToTheNewDevToolsDialog';
 
 export default function ShowWelcomeToTheNewDevToolsDialog(_: {||}) {
-  const { dispatch } = useContext(ModalDialogContext);
+  const {dispatch} = useContext(ModalDialogContext);
   const [
     hasShownWelcomeToTheNewDevToolsDialog,
     setHasShownWelcomeToTheNewDevToolsDialog,
   ] = useLocalStorage<boolean>(LOCAL_STORAGE_KEY, false);
 
-  useEffect(() => {
-    if (!hasShownWelcomeToTheNewDevToolsDialog) {
-      batchedUpdates(() => {
-        setHasShownWelcomeToTheNewDevToolsDialog(true);
-        dispatch({
-          canBeDismissed: true,
-          type: 'SHOW',
-          content: <DialogContent />,
+  useEffect(
+    () => {
+      if (!hasShownWelcomeToTheNewDevToolsDialog) {
+        batchedUpdates(() => {
+          setHasShownWelcomeToTheNewDevToolsDialog(true);
+          dispatch({
+            canBeDismissed: true,
+            type: 'SHOW',
+            content: <DialogContent />,
+          });
         });
-      });
-    }
-  }, [
-    dispatch,
-    hasShownWelcomeToTheNewDevToolsDialog,
-    setHasShownWelcomeToTheNewDevToolsDialog,
-  ]);
+      }
+    },
+    [
+      dispatch,
+      hasShownWelcomeToTheNewDevToolsDialog,
+      setHasShownWelcomeToTheNewDevToolsDialog,
+    ],
+  );
 
   return null;
 }
@@ -51,8 +54,7 @@ function DialogContent(_: {||}) {
               className={styles.ReleaseNotesLink}
               target="_blank"
               rel="noopener noreferrer"
-              href={CHANGE_LOG_URL}
-            >
+              href={CHANGE_LOG_URL}>
               Learn more
             </a>{' '}
             about changes in this version.
diff --git a/packages/react-devtools-shared/src/devtools/views/TabBar.js b/packages/react-devtools-shared/src/devtools/views/TabBar.js
index 6462a9fe08eca..c05999ebabe95 100644
--- a/packages/react-devtools-shared/src/devtools/views/TabBar.js
+++ b/packages/react-devtools-shared/src/devtools/views/TabBar.js
@@ -1,13 +1,13 @@
 // @flow
 
-import React, { Fragment, useCallback } from 'react';
+import React, {Fragment, useCallback} from 'react';
 import Tooltip from '@reach/tooltip';
 import Icon from './Icon';
 
 import styles from './TabBar.css';
 import tooltipStyles from './Tooltip.css';
 
-import type { IconType } from './Icon';
+import type {IconType} from './Icon';
 
 type TabInfo = {|
   icon: IconType,
@@ -38,8 +38,8 @@ export default function TabBar({
   }
 
   const onChange = useCallback(
-    ({ currentTarget }) => selectTab(currentTarget.value),
-    [selectTab]
+    ({currentTarget}) => selectTab(currentTarget.value),
+    [selectTab],
   );
 
   const handleKeyDown = useCallback(event => {
@@ -80,18 +80,17 @@ export default function TabBar({
 
   return (
     <Fragment>
-      {tabs.map(({ icon, id, label, title }) => {
+      {tabs.map(({icon, id, label, title}) => {
         let button = (
           <label
             className={[
               tabSizeClassName,
               disabled ? styles.TabDisabled : styles.Tab,
-              !disabled && currentTab === id ? styles.TabCurrent : ''
+              !disabled && currentTab === id ? styles.TabCurrent : '',
             ].join(' ')}
             key={id}
             onKeyDown={handleKeyDown}
-            onMouseDown={() => selectTab(id)}
-          >
+            onMouseDown={() => selectTab(id)}>
             <input
               type="radio"
               className={styles.Input}
diff --git a/packages/react-devtools-shared/src/devtools/views/Toggle.js b/packages/react-devtools-shared/src/devtools/views/Toggle.js
index 5780c7f28c34e..99938273579c0 100644
--- a/packages/react-devtools-shared/src/devtools/views/Toggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Toggle.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useCallback } from 'react';
+import React, {useCallback} from 'react';
 import Tooltip from '@reach/tooltip';
 
 import styles from './Toggle.css';
@@ -41,8 +41,7 @@ export default function Toggle({
     <button
       className={`${defaultClassName} ${className}`}
       disabled={isDisabled}
-      onClick={handleClick}
-    >
+      onClick={handleClick}>
       <span className={styles.ToggleContent} tabIndex={-1}>
         {children}
       </span>
diff --git a/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js b/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js
index 466c9ba1bd06e..90a1bc3933055 100644
--- a/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js
+++ b/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js
@@ -1,67 +1,70 @@
 // @flow
 
-import React, { Fragment, useContext, useEffect } from 'react';
-import { BridgeContext } from './context';
-import { ModalDialogContext } from './ModalDialog';
+import React, {Fragment, useContext, useEffect} from 'react';
+import {BridgeContext} from './context';
+import {ModalDialogContext} from './ModalDialog';
 
 import styles from './WarnIfLegacyBackendDetected.css';
 
 export default function WarnIfLegacyBackendDetected(_: {||}) {
   const bridge = useContext(BridgeContext);
-  const { dispatch } = useContext(ModalDialogContext);
+  const {dispatch} = useContext(ModalDialogContext);
 
   // Detect pairing with legacy v3 backend.
   // We do this by listening to a message that it broadcasts but the v4 backend doesn't.
   // In this case the frontend should show upgrade instructions.
-  useEffect(() => {
-    // Wall.listen returns a cleanup function
-    let unlisten = bridge.wall.listen(message => {
-      switch (message.type) {
-        case 'call':
-        case 'event':
-        case 'many-events':
-          // Any of these types indicate the v3 backend.
-          dispatch({
-            canBeDismissed: false,
-            type: 'SHOW',
-            title: 'DevTools v4 is incompatible with this version of React',
-            content: <InvalidBackendDetected />,
-          });
+  useEffect(
+    () => {
+      // Wall.listen returns a cleanup function
+      let unlisten = bridge.wall.listen(message => {
+        switch (message.type) {
+          case 'call':
+          case 'event':
+          case 'many-events':
+            // Any of these types indicate the v3 backend.
+            dispatch({
+              canBeDismissed: false,
+              type: 'SHOW',
+              title: 'DevTools v4 is incompatible with this version of React',
+              content: <InvalidBackendDetected />,
+            });
 
-          // Once we've identified the backend version, it's safe to unsubscribe.
-          if (typeof unlisten === 'function') {
-            unlisten();
-            unlisten = null;
-          }
-          break;
-        default:
-          break;
-      }
+            // Once we've identified the backend version, it's safe to unsubscribe.
+            if (typeof unlisten === 'function') {
+              unlisten();
+              unlisten = null;
+            }
+            break;
+          default:
+            break;
+        }
 
-      switch (message.event) {
-        case 'isBackendStorageAPISupported':
-        case 'isNativeStyleEditorSupported':
-        case 'operations':
-        case 'overrideComponentFilters':
-          // Any of these is sufficient to indicate a v4 backend.
-          // Once we've identified the backend version, it's safe to unsubscribe.
-          if (typeof unlisten === 'function') {
-            unlisten();
-            unlisten = null;
-          }
-          break;
-        default:
-          break;
-      }
-    });
+        switch (message.event) {
+          case 'isBackendStorageAPISupported':
+          case 'isNativeStyleEditorSupported':
+          case 'operations':
+          case 'overrideComponentFilters':
+            // Any of these is sufficient to indicate a v4 backend.
+            // Once we've identified the backend version, it's safe to unsubscribe.
+            if (typeof unlisten === 'function') {
+              unlisten();
+              unlisten = null;
+            }
+            break;
+          default:
+            break;
+        }
+      });
 
-    return () => {
-      if (typeof unlisten === 'function') {
-        unlisten();
-        unlisten = null;
-      }
-    };
-  }, [bridge, dispatch]);
+      return () => {
+        if (typeof unlisten === 'function') {
+          unlisten();
+          unlisten = null;
+        }
+      };
+    },
+    [bridge, dispatch],
+  );
 
   return null;
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/context.js b/packages/react-devtools-shared/src/devtools/views/context.js
index 655241be061a3..e0fce93ececa6 100644
--- a/packages/react-devtools-shared/src/devtools/views/context.js
+++ b/packages/react-devtools-shared/src/devtools/views/context.js
@@ -1,12 +1,12 @@
 // @flow
 
-import { createContext } from 'react';
+import {createContext} from 'react';
 import Store from '../store';
 
-import type { FrontendBridge } from 'react-devtools-shared/src/bridge';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 
 export const BridgeContext = createContext<FrontendBridge>(
-  ((null: any): FrontendBridge)
+  ((null: any): FrontendBridge),
 );
 BridgeContext.displayName = 'BridgeContext';
 
diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js
index 94c8ec50a9d17..550b0952cda25 100644
--- a/packages/react-devtools-shared/src/devtools/views/hooks.js
+++ b/packages/react-devtools-shared/src/devtools/views/hooks.js
@@ -1,37 +1,43 @@
 // @flow
 
 import throttle from 'lodash.throttle';
-import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
-import { localStorageGetItem, localStorageSetItem } from 'react-devtools-shared/src/storage';
+import {useCallback, useEffect, useLayoutEffect, useState} from 'react';
+import {
+  localStorageGetItem,
+  localStorageSetItem,
+} from 'react-devtools-shared/src/storage';
 
 export function useIsOverflowing(
-  containerRef: { current: HTMLDivElement | null },
-  totalChildWidth: number
+  containerRef: {current: HTMLDivElement | null},
+  totalChildWidth: number,
 ): boolean {
   const [isOverflowing, setIsOverflowing] = useState<boolean>(false);
 
   // It's important to use a layout effect, so that we avoid showing a flash of overflowed content.
-  useLayoutEffect(() => {
-    if (containerRef.current === null) {
-      return () => {};
-    }
+  useLayoutEffect(
+    () => {
+      if (containerRef.current === null) {
+        return () => {};
+      }
 
-    const container = ((containerRef.current: any): HTMLDivElement);
+      const container = ((containerRef.current: any): HTMLDivElement);
 
-    const handleResize = throttle(
-      () => setIsOverflowing(container.clientWidth <= totalChildWidth),
-      100
-    );
+      const handleResize = throttle(
+        () => setIsOverflowing(container.clientWidth <= totalChildWidth),
+        100,
+      );
 
-    handleResize();
+      handleResize();
 
-    // It's important to listen to the ownerDocument.defaultView to support the browser extension.
-    // Here we use portals to render individual tabs (e.g. Profiler),
-    // and the root document might belong to a different window.
-    const ownerWindow = container.ownerDocument.defaultView;
-    ownerWindow.addEventListener('resize', handleResize);
-    return () => ownerWindow.removeEventListener('resize', handleResize);
-  }, [containerRef, totalChildWidth]);
+      // It's important to listen to the ownerDocument.defaultView to support the browser extension.
+      // Here we use portals to render individual tabs (e.g. Profiler),
+      // and the root document might belong to a different window.
+      const ownerWindow = container.ownerDocument.defaultView;
+      ownerWindow.addEventListener('resize', handleResize);
+      return () => ownerWindow.removeEventListener('resize', handleResize);
+    },
+    [containerRef, totalChildWidth],
+  );
 
   return isOverflowing;
 }
@@ -39,23 +45,26 @@ export function useIsOverflowing(
 // Forked from https://usehooks.com/useLocalStorage/
 export function useLocalStorage<T>(
   key: string,
-  initialValue: T | (() => T)
+  initialValue: T | (() => T),
 ): [T, (value: T | (() => T)) => void] {
-  const getValueFromLocalStorage = useCallback(() => {
-    try {
-      const item = localStorageGetItem(key);
-      if (item != null) {
-        return JSON.parse(item);
+  const getValueFromLocalStorage = useCallback(
+    () => {
+      try {
+        const item = localStorageGetItem(key);
+        if (item != null) {
+          return JSON.parse(item);
+        }
+      } catch (error) {
+        console.log(error);
       }
-    } catch (error) {
-      console.log(error);
-    }
-    if (typeof initialValue === 'function') {
-      return ((initialValue: any): () => T)();
-    } else {
-      return initialValue;
-    }
-  }, [initialValue, key]);
+      if (typeof initialValue === 'function') {
+        return ((initialValue: any): () => T)();
+      } else {
+        return initialValue;
+      }
+    },
+    [initialValue, key],
+  );
 
   const [storedValue, setStoredValue] = useState(getValueFromLocalStorage);
 
@@ -70,72 +79,78 @@ export function useLocalStorage<T>(
         console.log(error);
       }
     },
-    [key, storedValue]
+    [key, storedValue],
   );
 
   // Listen for changes to this local storage value made from other windows.
   // This enables the e.g. "⚛️ Elements" tab to update in response to changes from "⚛️ Settings".
-  useLayoutEffect(() => {
-    const onStorage = event => {
-      const newValue = getValueFromLocalStorage();
-      if (key === event.key && storedValue !== newValue) {
-        setValue(newValue);
-      }
-    };
+  useLayoutEffect(
+    () => {
+      const onStorage = event => {
+        const newValue = getValueFromLocalStorage();
+        if (key === event.key && storedValue !== newValue) {
+          setValue(newValue);
+        }
+      };
 
-    window.addEventListener('storage', onStorage);
+      window.addEventListener('storage', onStorage);
 
-    return () => {
-      window.removeEventListener('storage', onStorage);
-    };
-  }, [getValueFromLocalStorage, key, storedValue, setValue]);
+      return () => {
+        window.removeEventListener('storage', onStorage);
+      };
+    },
+    [getValueFromLocalStorage, key, storedValue, setValue],
+  );
 
   return [storedValue, setValue];
 }
 
 export function useModalDismissSignal(
-  modalRef: { current: HTMLDivElement | null },
+  modalRef: {current: HTMLDivElement | null},
   dismissCallback: () => void,
-  dismissOnClickOutside?: boolean = true
+  dismissOnClickOutside?: boolean = true,
 ): void {
-  useEffect(() => {
-    if (modalRef.current === null) {
-      return () => {};
-    }
-
-    const handleDocumentKeyDown = ({ key }: any) => {
-      if (key === 'Escape') {
-        dismissCallback();
+  useEffect(
+    () => {
+      if (modalRef.current === null) {
+        return () => {};
       }
-    };
-
-    const handleDocumentClick = (event: any) => {
-      // $FlowFixMe
-      if (
-        modalRef.current !== null &&
-        !modalRef.current.contains(event.target)
-      ) {
-        event.stopPropagation();
-        event.preventDefault();
-
-        dismissCallback();
+
+      const handleDocumentKeyDown = ({key}: any) => {
+        if (key === 'Escape') {
+          dismissCallback();
+        }
+      };
+
+      const handleDocumentClick = (event: any) => {
+        // $FlowFixMe
+        if (
+          modalRef.current !== null &&
+          !modalRef.current.contains(event.target)
+        ) {
+          event.stopPropagation();
+          event.preventDefault();
+
+          dismissCallback();
+        }
+      };
+
+      // It's important to listen to the ownerDocument to support the browser extension.
+      // Here we use portals to render individual tabs (e.g. Profiler),
+      // and the root document might belong to a different window.
+      const ownerDocument = modalRef.current.ownerDocument;
+      ownerDocument.addEventListener('keydown', handleDocumentKeyDown);
+      if (dismissOnClickOutside) {
+        ownerDocument.addEventListener('click', handleDocumentClick);
       }
-    };
-
-    // It's important to listen to the ownerDocument to support the browser extension.
-    // Here we use portals to render individual tabs (e.g. Profiler),
-    // and the root document might belong to a different window.
-    const ownerDocument = modalRef.current.ownerDocument;
-    ownerDocument.addEventListener('keydown', handleDocumentKeyDown);
-    if (dismissOnClickOutside) {
-      ownerDocument.addEventListener('click', handleDocumentClick);
-    }
-
-    return () => {
-      ownerDocument.removeEventListener('keydown', handleDocumentKeyDown);
-      ownerDocument.removeEventListener('click', handleDocumentClick);
-    };
-  }, [modalRef, dismissCallback, dismissOnClickOutside]);
+
+      return () => {
+        ownerDocument.removeEventListener('keydown', handleDocumentKeyDown);
+        ownerDocument.removeEventListener('click', handleDocumentClick);
+      };
+    },
+    [modalRef, dismissCallback, dismissOnClickOutside],
+  );
 }
 
 // Copied from https://github.com/facebook/react/pull/15022
@@ -163,39 +178,42 @@ export function useSubscription<Value>({
     });
   }
 
-  useEffect(() => {
-    let didUnsubscribe = false;
-
-    const checkForUpdates = () => {
-      if (didUnsubscribe) {
-        return;
-      }
+  useEffect(
+    () => {
+      let didUnsubscribe = false;
 
-      setState(prevState => {
-        if (
-          prevState.getCurrentValue !== getCurrentValue ||
-          prevState.subscribe !== subscribe
-        ) {
-          return prevState;
-        }
-
-        const value = getCurrentValue();
-        if (prevState.value === value) {
-          return prevState;
+      const checkForUpdates = () => {
+        if (didUnsubscribe) {
+          return;
         }
 
-        return { ...prevState, value };
-      });
-    };
-    const unsubscribe = subscribe(checkForUpdates);
-
-    checkForUpdates();
-
-    return () => {
-      didUnsubscribe = true;
-      unsubscribe();
-    };
-  }, [getCurrentValue, subscribe]);
+        setState(prevState => {
+          if (
+            prevState.getCurrentValue !== getCurrentValue ||
+            prevState.subscribe !== subscribe
+          ) {
+            return prevState;
+          }
+
+          const value = getCurrentValue();
+          if (prevState.value === value) {
+            return prevState;
+          }
+
+          return {...prevState, value};
+        });
+      };
+      const unsubscribe = subscribe(checkForUpdates);
+
+      checkForUpdates();
+
+      return () => {
+        didUnsubscribe = true;
+        unsubscribe();
+      };
+    },
+    [getCurrentValue, subscribe],
+  );
 
   return state.value;
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/portaledContent.js b/packages/react-devtools-shared/src/devtools/views/portaledContent.js
index 546524b6959eb..b3e59c48e484d 100644
--- a/packages/react-devtools-shared/src/devtools/views/portaledContent.js
+++ b/packages/react-devtools-shared/src/devtools/views/portaledContent.js
@@ -1,7 +1,7 @@
 // @flow
 
 import React from 'react';
-import { createPortal } from 'react-dom';
+import {createPortal} from 'react-dom';
 import ErrorBoundary from './ErrorBoundary';
 
 export type Props = {
@@ -9,9 +9,9 @@ export type Props = {
 };
 
 export default function portaledContent(
-  Component: React$StatelessFunctionalComponent<any>
+  Component: React$StatelessFunctionalComponent<any>,
 ): React$StatelessFunctionalComponent<any> {
-  return function PortaledContent({ portalContainer, ...rest }: Props) {
+  return function PortaledContent({portalContainer, ...rest}: Props) {
     const children = (
       <ErrorBoundary>
         <Component {...rest} />
diff --git a/packages/react-devtools-shared/src/devtools/views/utils.js b/packages/react-devtools-shared/src/devtools/views/utils.js
index db41f09ca9adc..26de046c918ae 100644
--- a/packages/react-devtools-shared/src/devtools/views/utils.js
+++ b/packages/react-devtools-shared/src/devtools/views/utils.js
@@ -1,9 +1,9 @@
 // @flow
 
 import escapeStringRegExp from 'escape-string-regexp';
-import { meta } from '../../hydration';
+import {meta} from '../../hydration';
 
-import type { HooksTree } from 'react-debug-tools/src/ReactDebugHooks';
+import type {HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
 
 export function createRegExp(string: string): RegExp {
   // Allow /regex/ syntax with optional last /
@@ -65,7 +65,7 @@ export function createRegExp(string: string): RegExp {
       '|' +
       firstChar.toUpperCase() +
       ')' +
-      restRegex
+      restRegex,
   );
 }
 
@@ -157,7 +157,7 @@ export function serializeHooksForCopy(hooks: HooksTree | null): string {
 let downloadUrl = null;
 
 export function downloadFile(filename: string, text: string): void {
-  const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
+  const blob = new Blob([text], {type: 'text/plain;charset=utf-8'});
 
   if (downloadUrl !== null) {
     URL.revokeObjectURL(downloadUrl);
@@ -177,7 +177,7 @@ export function downloadFile(filename: string, text: string): void {
 }
 
 export function truncateText(text: string, maxLength: number): string {
-  const { length } = text;
+  const {length} = text;
   if (length > maxLength) {
     return (
       text.substr(0, Math.floor(maxLength / 2)) +
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index 1936e9e1005e1..bcbd657b47f2e 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -12,7 +12,7 @@ import {
   registerRenderer as registerRendererWithConsole,
 } from './backend/console';
 
-import type { DevToolsHook } from 'react-devtools-shared/src/backend/types';
+import type {DevToolsHook} from 'react-devtools-shared/src/backend/types';
 
 declare var window: any;
 
@@ -44,7 +44,7 @@ export function installHook(target: any): DevToolsHook | null {
       if (renderer.Mount && renderer.Mount._renderNewRootComponent) {
         // React DOM Stack
         const renderRootCode = toString.call(
-          renderer.Mount._renderNewRootComponent
+          renderer.Mount._renderNewRootComponent,
         );
         // Filter out bad results (if that is even possible):
         if (renderRootCode.indexOf('function') !== 0) {
@@ -143,7 +143,7 @@ export function installHook(target: any): DevToolsHook | null {
             'React is running in production mode, but dead code ' +
               'elimination has not been applied. Read how to correctly ' +
               'configure React for production: ' +
-              'https://fb.me/react-perf-use-the-production-build'
+              'https://fb.me/react-perf-use-the-production-build',
           );
         });
       }
@@ -194,7 +194,7 @@ export function installHook(target: any): DevToolsHook | null {
       hook.rendererInterfaces.set(id, rendererInterface);
     }
 
-    hook.emit('renderer', { id, renderer, reactBuildType });
+    hook.emit('renderer', {id, renderer, reactBuildType});
 
     return id;
   }
@@ -305,7 +305,7 @@ export function installHook(target: any): DevToolsHook | null {
       get() {
         return hook;
       },
-    }: Object)
+    }: Object),
   );
 
   return hook;
diff --git a/packages/react-devtools-shared/src/hydration.js b/packages/react-devtools-shared/src/hydration.js
index 4fd5bcfd32cab..e3b6eb6dbad6e 100644
--- a/packages/react-devtools-shared/src/hydration.js
+++ b/packages/react-devtools-shared/src/hydration.js
@@ -16,7 +16,7 @@ import {
   StrictMode,
   Suspense,
 } from 'react-is';
-import { getDisplayName, getInObject, setInObject } from './utils';
+import {getDisplayName, getInObject, setInObject} from './utils';
 
 export const meta = {
   inspectable: Symbol('inspectable'),
@@ -126,7 +126,7 @@ function createDehydrated(
   inspectable: boolean,
   data: Object,
   cleaned: Array<Array<string | number>>,
-  path: Array<string | number>
+  path: Array<string | number>,
 ): Dehydrated {
   cleaned.push(path);
 
@@ -175,8 +175,12 @@ export function dehydrate(
   cleaned: Array<Array<string | number>>,
   path: Array<string | number>,
   isPathWhitelisted: (path: Array<string | number>) => boolean,
-  level?: number = 0
-): string | Dehydrated | Array<Dehydrated> | { [key: string]: string | Dehydrated } {
+  level?: number = 0,
+):
+  | string
+  | Dehydrated
+  | Array<Dehydrated>
+  | {[key: string]: string | Dehydrated} {
   const type = getDataType(data);
 
   switch (type) {
@@ -239,8 +243,8 @@ export function dehydrate(
           cleaned,
           path.concat([i]),
           isPathWhitelisted,
-          arrayPathCheck ? 1 : level + 1
-        )
+          arrayPathCheck ? 1 : level + 1,
+        ),
       );
 
     case 'typed_array':
@@ -267,7 +271,7 @@ export function dehydrate(
             cleaned,
             path.concat([name]),
             isPathWhitelisted,
-            objectPathCheck ? 1 : level + 1
+            objectPathCheck ? 1 : level + 1,
           );
         }
         return object;
@@ -291,7 +295,7 @@ export function dehydrate(
 export function fillInPath(
   object: Object,
   path: Array<string | number>,
-  value: any
+  value: any,
 ) {
   const target = getInObject(object, path);
   if (target != null) {
@@ -307,7 +311,7 @@ export function fillInPath(
 
 export function hydrate(
   object: Object,
-  cleaned: Array<Array<string | number>>
+  cleaned: Array<Array<string | number>>,
 ): Object {
   cleaned.forEach((path: Array<string | number>) => {
     const length = path.length;
@@ -327,7 +331,7 @@ export function hydrate(
       parent[last] = undefined;
     } else {
       // Replace the string keys with Symbols so they're non-enumerable.
-      const replaced: { [key: Symbol]: boolean | string } = {};
+      const replaced: {[key: Symbol]: boolean | string} = {};
       replaced[meta.inspectable] = !!value.inspectable;
       replaced[meta.inspected] = false;
       replaced[meta.name] = value.name;
@@ -342,7 +346,7 @@ export function hydrate(
 }
 
 export function getDisplayNameForReactElement(
-  element: React$Element<any>
+  element: React$Element<any>,
 ): string | null {
   const elementType = typeOf(element);
   switch (elementType) {
@@ -370,7 +374,7 @@ export function getDisplayNameForReactElement(
     case Suspense:
       return 'Suspense';
     default:
-      const { type } = element;
+      const {type} = element;
       if (typeof type === 'string') {
         return type;
       } else if (type != null) {
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index 9316c201d1a36..2ab1a1faf04de 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -7,31 +7,31 @@ import {
   TREE_OPERATION_REORDER_CHILDREN,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from './constants';
-import { ElementTypeRoot } from 'react-devtools-shared/src/types';
+import {ElementTypeRoot} from 'react-devtools-shared/src/types';
 import {
   LOCAL_STORAGE_FILTER_PREFERENCES_KEY,
   LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
 } from './constants';
-import { ComponentFilterElementType, ElementTypeHostComponent } from './types';
+import {ComponentFilterElementType, ElementTypeHostComponent} from './types';
 import {
   ElementTypeClass,
   ElementTypeForwardRef,
   ElementTypeFunction,
   ElementTypeMemo,
 } from 'react-devtools-shared/src/types';
-import { localStorageGetItem, localStorageSetItem } from './storage';
+import {localStorageGetItem, localStorageSetItem} from './storage';
 
-import type { ComponentFilter, ElementType } from './types';
+import type {ComponentFilter, ElementType} from './types';
 
 const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();
 
 // On large trees, encoding takes significant time.
 // Try to reuse the already encoded strings.
-let encodedStringCache = new LRU({ max: 1000 });
+let encodedStringCache = new LRU({max: 1000});
 
 export function getDisplayName(
   type: Function,
-  fallbackName: string = 'Anonymous'
+  fallbackName: string = 'Anonymous',
 ): string {
   const nameFromCache = cachedDisplayNames.get(type);
   if (nameFromCache != null) {
@@ -97,7 +97,7 @@ export function printOperationsArray(operations: Array<number>) {
   while (i < stringTableEnd) {
     const nextLength = operations[i++];
     const nextString = utfDecodeString(
-      (operations.slice(i, i + nextLength): any)
+      (operations.slice(i, i + nextLength): any),
     );
     stringTable.push(nextString);
     i += nextLength;
@@ -131,7 +131,7 @@ export function printOperationsArray(operations: Array<number>) {
           i++; // key
 
           logs.push(
-            `Add node ${id} (${displayName || 'null'}) as child of ${parentID}`
+            `Add node ${id} (${displayName || 'null'}) as child of ${parentID}`,
           );
         }
         break;
@@ -193,11 +193,11 @@ export function getSavedComponentFilters(): Array<ComponentFilter> {
 }
 
 export function saveComponentFilters(
-  componentFilters: Array<ComponentFilter>
+  componentFilters: Array<ComponentFilter>,
 ): void {
   localStorageSetItem(
     LOCAL_STORAGE_FILTER_PREFERENCES_KEY,
-    JSON.stringify(componentFilters)
+    JSON.stringify(componentFilters),
   );
 }
 
@@ -214,13 +214,13 @@ export function getAppendComponentStack(): boolean {
 export function setAppendComponentStack(value: boolean): void {
   localStorageSetItem(
     LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
-    JSON.stringify(value)
+    JSON.stringify(value),
   );
 }
 
 export function separateDisplayNameAndHOCs(
   displayName: string | null,
-  type: ElementType
+  type: ElementType,
 ): [string | null, Array<string> | null] {
   if (displayName === null) {
     return [null, null];
@@ -279,7 +279,7 @@ export function getInObject(object: Object, path: Array<string | number>): any {
 export function setInObject(
   object: Object,
   path: Array<string | number>,
-  value: any
+  value: any,
 ) {
   const length = path.length;
   const last = path[length - 1];
diff --git a/packages/react-devtools/app.js b/packages/react-devtools/app.js
index 679dfb70df5c5..b50ef179dd016 100644
--- a/packages/react-devtools/app.js
+++ b/packages/react-devtools/app.js
@@ -1,7 +1,7 @@
 // @flow
 
-const { app, BrowserWindow } = require('electron'); // Module to create native browser window.
-const { join } = require('path');
+const {app, BrowserWindow} = require('electron'); // Module to create native browser window.
+const {join} = require('path');
 
 const argv = require('minimist')(process.argv.slice(2));
 const projectRoots = argv._;
@@ -31,7 +31,7 @@ app.on('ready', function() {
     // We use this so that RN can keep relative JSX __source filenames
     // but "click to open in editor" still works. js1 passes project roots
     // as the argument to DevTools.
-    'window.devtools.setProjectRoots(' + JSON.stringify(projectRoots) + ')'
+    'window.devtools.setProjectRoots(' + JSON.stringify(projectRoots) + ')',
   );
 
   // Emitted when the window is closed.
diff --git a/packages/react-devtools/bin.js b/packages/react-devtools/bin.js
index 55fd22c22ff48..b36c0714b7d58 100755
--- a/packages/react-devtools/bin.js
+++ b/packages/react-devtools/bin.js
@@ -9,7 +9,7 @@ const pkg = require('./package.json');
 const updateNotifier = require('update-notifier');
 
 // notify if there's an update
-updateNotifier({ pkg }).notify({ defer: false });
+updateNotifier({pkg}).notify({defer: false});
 
 const result = spawn.sync(electron, [require.resolve('./app')].concat(argv), {
   stdio: 'ignore',
diff --git a/packages/react-devtools/index.js b/packages/react-devtools/index.js
index 9a48b9c2b69a6..e01fbb8a0895c 100644
--- a/packages/react-devtools/index.js
+++ b/packages/react-devtools/index.js
@@ -1,6 +1,6 @@
 // @flow
 
-const { connectToDevTools } = require('react-devtools-core/backend');
+const {connectToDevTools} = require('react-devtools-core/backend');
 
 // Connect immediately with default options.
 // If you need more control, use `react-devtools-core` directly instead of `react-devtools`.