diff --git a/src/devtools/views/Components/ExpandCollapseToggle.css b/src/devtools/views/Components/ExpandCollapseToggle.css
new file mode 100644
index 0000000000..a686fcd1dc
--- /dev/null
+++ b/src/devtools/views/Components/ExpandCollapseToggle.css
@@ -0,0 +1,6 @@
+.ExpandCollapseToggle {
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
+  color: var(--color-expand-collapse-toggle);
+}
diff --git a/src/devtools/views/Components/ExpandCollapseToggle.js b/src/devtools/views/Components/ExpandCollapseToggle.js
new file mode 100644
index 0000000000..b5425c8129
--- /dev/null
+++ b/src/devtools/views/Components/ExpandCollapseToggle.js
@@ -0,0 +1,31 @@
+// @flow
+
+import React, { useCallback } from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+
+import styles from './ExpandCollapseToggle.css';
+
+type ExpandCollapseToggleProps = {|
+  isOpen: boolean,
+  setIsOpen: Function,
+|};
+
+export default function ExpandCollapseToggle({
+  isOpen,
+  setIsOpen,
+}: ExpandCollapseToggleProps) {
+  const handleClick = useCallback(() => {
+    setIsOpen(prevIsOpen => !prevIsOpen);
+  }, [setIsOpen]);
+
+  return (
+    <Button
+      className={styles.ExpandCollapseToggle}
+      onClick={handleClick}
+      title={`${isOpen ? 'Collapse' : 'Expand'} prop value`}
+    >
+      <ButtonIcon type={isOpen ? 'expanded' : 'collapsed'} />
+    </Button>
+  );
+}
diff --git a/src/devtools/views/Components/HooksTree.css b/src/devtools/views/Components/HooksTree.css
index 67bd155b90..8eb3312b4d 100644
--- a/src/devtools/views/Components/HooksTree.css
+++ b/src/devtools/views/Components/HooksTree.css
@@ -27,10 +27,12 @@
 .Name {
   color: var(--color-dim);
   flex: 0 0 auto;
+  user-select: none;
 }
 .EditableName {
   color: var(--color-attribute-name);
   flex: 0 0 auto;
+  user-select: none;
 }
 .EditableName:after,
 .Name:after {
diff --git a/src/devtools/views/Components/HooksTree.js b/src/devtools/views/Components/HooksTree.js
index cb27a2ee67..ac6dee5ea1 100644
--- a/src/devtools/views/Components/HooksTree.js
+++ b/src/devtools/views/Components/HooksTree.js
@@ -1,11 +1,12 @@
 // @flow
 
 import { copy } from 'clipboard-js';
-import React, { useCallback, useContext } from 'react';
+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 KeyValue from './KeyValue';
 import { serializeHooksForCopy } from '../utils';
 import styles from './HooksTree.css';
@@ -76,6 +77,13 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const toggleIsOpen = useCallback(
+    () => setIsOpen(prevIsOpen => !prevIsOpen),
+    []
+  );
+
   if (hook.hasOwnProperty(meta.inspected)) {
     // This Hook is too deep and hasn't been hydrated.
     // TODO: show UI to load its data.
@@ -121,34 +129,43 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
       return (
         <div className={styles.Hook}>
           <div className={styles.NameValueRow}>
-            <span className={styles.ExpandCollapseToggleSpacer} />
-            <span className={styles.Name}>{name}</span>
-          </div>
-          <div className={styles.Children}>
-            <KeyValue depth={1} name="DebugValue" value={value} />
-            <InnerHooksTreeView
-              canEditHooks={canEditHooks}
-              hooks={subHooks}
-              id={id}
-            />
+            <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
+            <span onDoubleClick={toggleIsOpen} className={styles.Name}>
+              {name}
+            </span>
           </div>
+          {isOpen && (
+            <div className={styles.Children}>
+              <KeyValue depth={1} name="DebugValue" value={value} />
+              <InnerHooksTreeView
+                canEditHooks={canEditHooks}
+                hooks={subHooks}
+                id={id}
+              />
+            </div>
+          )}
         </div>
       );
     } else {
       return (
         <div className={styles.Hook}>
           <div className={styles.NameValueRow}>
-            <span className={styles.ExpandCollapseToggleSpacer} />
-            <span className={styles.Name}>{name}</span> {/* $FlowFixMe */}
+            <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
+            <span onDoubleClick={toggleIsOpen} className={styles.Name}>
+              {name}
+            </span>{' '}
+            {/* $FlowFixMe */}
             <span className={styles.Value}>{displayValue}</span>
           </div>
-          <div className={styles.Children}>
-            <InnerHooksTreeView
-              canEditHooks={canEditHooks}
-              hooks={subHooks}
-              id={id}
-            />
-          </div>
+          {isOpen && (
+            <div className={styles.Children}>
+              <InnerHooksTreeView
+                canEditHooks={canEditHooks}
+                hooks={subHooks}
+                id={id}
+              />
+            </div>
+          )}
         </div>
       );
     }
diff --git a/src/devtools/views/Components/KeyValue.css b/src/devtools/views/Components/KeyValue.css
index 565e7fbe27..25340bdd56 100644
--- a/src/devtools/views/Components/KeyValue.css
+++ b/src/devtools/views/Components/KeyValue.css
@@ -29,13 +29,6 @@
   font-style: italic;
 }
 
-.ExpandCollapseToggle {
-  width: 1rem;
-  height: 1rem;
-  padding: 0;
-  color: var(--color-expand-collapse-toggle);
-}
-
 .ExpandCollapseToggleSpacer {
   width: 1rem;
 }
diff --git a/src/devtools/views/Components/KeyValue.js b/src/devtools/views/Components/KeyValue.js
index ed965943f5..cfcb04cc70 100644
--- a/src/devtools/views/Components/KeyValue.js
+++ b/src/devtools/views/Components/KeyValue.js
@@ -3,8 +3,7 @@
 import React, { useCallback, useState } from 'react';
 import type { Element } from 'react';
 import EditableValue from './EditableValue';
-import Button from '../Button';
-import ButtonIcon from '../ButtonIcon';
+import ExpandCollapseToggle from './ExpandCollapseToggle';
 import { getMetaValueLabel } from '../utils';
 import { meta } from '../../../hydration';
 import styles from './KeyValue.css';
@@ -153,27 +152,3 @@ export default function KeyValue({
 
   return children;
 }
-
-type ExpandCollapseToggleProps = {|
-  isOpen: boolean,
-  setIsOpen: Function,
-|};
-
-function ExpandCollapseToggle({
-  isOpen,
-  setIsOpen,
-}: ExpandCollapseToggleProps) {
-  const handleClick = useCallback(() => {
-    setIsOpen(prevIsOpen => !prevIsOpen);
-  }, [setIsOpen]);
-
-  return (
-    <Button
-      className={styles.ExpandCollapseToggle}
-      onClick={handleClick}
-      title={`${isOpen ? 'Collapse' : 'Expand'} prop value`}
-    >
-      <ButtonIcon type={isOpen ? 'expanded' : 'collapsed'} />
-    </Button>
-  );
-}