Fix DevTools v4.1 editable hook regression (#16867)

* Fixed a regression in hooks editor from a recent EditableValue change * Fixed a reset/state bug in useEditableValue() hook and removed unnecessary useMemo()
facebook · Sep 23, 2019 · 9b3cde9 · 9b3cde9
1 parent 1a6294d
commit 9b3cde9
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 29 deletions.
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
@@ -17,15 +17,13 @@ type OverrideValueFn = (path: Array<string | number>, value: any) => void;
 
 type EditableValueProps = {|
   className?: string,
-  dataType: string,
   initialValue: any,
   overrideValueFn: OverrideValueFn,
   path: Array<string | number>,
 |};
 
 export default function EditableValue({
   className = '',
-  dataType,
   initialValue,
   overrideValueFn,
   path,

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js
@@ -270,10 +270,9 @@ function HookView({canEditHooks, hook, id, inspectPath, path}: HookViewProps) {
             </span>
             {typeof overrideValueFn === 'function' ? (
               <EditableValue
-                dataType={type}
+                initialValue={value}
                 overrideValueFn={overrideValueFn}
                 path={[]}
-                value={value}
               />
             ) : (
               // $FlowFixMe Cannot create span element because in property children

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
@@ -102,10 +102,9 @@ export default function KeyValue({
         </span>
         {isEditable ? (
           <EditableValue
-            dataType={dataType}
+            initialValue={value}
             overrideValueFn={((overrideValueFn: any): OverrideValueFn)}
             path={path}
-            initialValue={value}
           />
         ) : (
           <span className={styles.Value}>{displayValue}</span>

diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js
@@ -8,13 +8,7 @@
  */
 
 import throttle from 'lodash.throttle';
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useState,
-} from 'react';
+import {useCallback, useEffect, useLayoutEffect, useState} from 'react';
 import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
 import {
   localStorageGetItem,
@@ -42,11 +36,14 @@ export function useEditableValue(
   const [parsedValue, setParsedValue] = useState(initialValue);
   const [isValid, setIsValid] = useState(initialIsValid);
 
-  const reset = useCallback(() => {
-    setEditableValue(smartStringify(initialValue));
-    setParsedValue(initialValue);
-    setIsValid(initialIsValid);
-  }, []);
+  const reset = useCallback(
+    () => {
+      setEditableValue(smartStringify(initialValue));
+      setParsedValue(initialValue);
+      setIsValid(initialIsValid);
+    },
+    [initialValue, initialIsValid],
+  );
 
   const update = useCallback(newValue => {
     let isNewValueValid = false;
@@ -65,17 +62,14 @@ export function useEditableValue(
     });
   }, []);
 
-  return useMemo(
-    () => ({
-      editableValue,
-      hasPendingChanges: smartStringify(initialValue) !== editableValue,
-      isValid,
-      parsedValue,
-      reset,
-      update,
-    }),
-    [editableValue, initialValue, isValid, parsedValue],
-  );
+  return {
+    editableValue,
+    hasPendingChanges: smartStringify(initialValue) !== editableValue,
+    isValid,
+    parsedValue,
+    reset,
+    update,
+  };
 }
 
 export function useIsOverflowing(