From 9b3cde9b627e91f9d4a81093384d579928474c37 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 23 Sep 2019 12:56:01 -0700
Subject: [PATCH] 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()
---
 .../views/Components/EditableValue.js         |  2 -
 .../devtools/views/Components/HooksTree.js    |  3 +-
 .../src/devtools/views/Components/KeyValue.js |  3 +-
 .../src/devtools/views/hooks.js               | 40 ++++++++-----------
 4 files changed, 19 insertions(+), 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
index c196a8d83b..a0429bf8d3 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
@@ -17,7 +17,6 @@ type OverrideValueFn = (path: Array<string | number>, value: any) => void;
 
 type EditableValueProps = {|
   className?: string,
-  dataType: string,
   initialValue: any,
   overrideValueFn: OverrideValueFn,
   path: Array<string | number>,
@@ -25,7 +24,6 @@ type EditableValueProps = {|
 
 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
index 2fd4f95cbd..ce0be7c47a 100644
--- 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
index e05a35fc57..9e82eefa42 100644
--- 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
index f027f751d3..57ebb69f6e 100644
--- 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(