Prettified changes.

Author: hristo-kanchev

packages/react-devtools-shared/src/devtools/views/Components/EditableName.js

@@ -25,14 +25,11 @@ export default function EditableName({
   const [isValid, setIsValid] = useState(false);
   const inputRef = useRef<HTMLInputElement | null>(null);
 
-  useEffect(
-    () => {
-      if (inputRef.current !== null) {
-        inputRef.current.focus();
-      }
-    },
-    [],
-  );
+  useEffect(() => {
+    if (inputRef.current !== null) {
+      inputRef.current.focus();
+    }
+  }, []);
 
   const handleChange = useCallback(
     ({target}) => {
@@ -59,10 +56,10 @@ export default function EditableName({
       if ((eventKey === 'Enter' || eventKey === 'Tab') && isValid) {
         overrideNameFn(editableName);
       } else if (eventKey === 'Escape') {
-        setEditableName(name);
+        setEditableName(initialValue);
       }
     },
-    [editableName, setEditableName, isValid, name, overrideNameFn],
+    [editableName, setEditableName, isValid, initialValue, overrideNameFn],
   );
 
   return (

packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import React, {Fragment, useEffect, 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';
@@ -22,12 +22,6 @@ type EditableValueProps = {|
   initialValue: any,
 |};
 
-function useEditableValue(initialValue) {
-  const [editableValue, setEditableValue] = useState(JSON.stringify(initialValue));
-
-  return [editableValue, (value, {shouldStringify} = {}) => (shouldStringify ? setEditableValue(JSON.stringify(value)) : setEditableValue(value))];
-}
-
 export default function EditableValue({
   dataType,
   overrideValueFn,
@@ -102,7 +96,8 @@ export default function EditableValue({
     [editableValue, isValid, dataType, overrideValueFn, path, initialValue],
   );
 
-  let inputValue = initialValue === undefined ? '' : JSON.stringify(initialValue);
+  let inputValue =
+    initialValue === undefined ? '' : JSON.stringify(initialValue);
   if (hasPendingChanges) {
     inputValue = editableValue;
   }
@@ -151,3 +146,22 @@ export default function EditableValue({
     </Fragment>
   );
 }
+
+function useEditableValue(initialValue: any): [any, Function] {
+  const [editableValue, setEditableValue] = useState(
+    JSON.stringify(initialValue),
+  );
+
+  function setEditableValueWithStringify(
+    value: any,
+    {shouldStringify}: Object = {},
+  ) {
+    if (shouldStringify) {
+      setEditableValue(JSON.stringify(value));
+    }
+
+    setEditableValue(value);
+  }
+
+  return [editableValue, setEditableValueWithStringify];
+}

packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js

@@ -16,7 +16,7 @@ import {meta} from '../../../hydration';
 import styles from './KeyValue.css';
 
 import type {InspectPath} from './SelectedElement';
-import EditableName from "./EditableName";
+import EditableName from './EditableName';
 
 type OverrideValueFn = (path: Array<string | number>, value: any) => void;