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()
Brian Vaughn committed
Sep 23, 2019 at 12:56 UTC
9b3cde9b627e91f9d4a81093384d579928474c37
4 files changed
+19
-29
packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
-2
@@ -17,7 +17,6 @@ type OverrideValueFn = (path: Array<string | number>, value: any) => void;
17
18
type EditableValueProps = {|
19
className?: string,
20
- dataType: string,
20
initialValue: any,
21
overrideValueFn: OverrideValueFn,
22
path: Array<string | number>,
@@ -25,7 +24,6 @@ type EditableValueProps = {|
24
25
export default function EditableValue({
26
className = '',
28
- dataType,
27
initialValue,
28
overrideValueFn,
29
path,
packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js
+1
-2
@@ -270,10 +270,9 @@ function HookView({canEditHooks, hook, id, inspectPath, path}: HookViewProps) {
270
</span>
271
{typeof overrideValueFn === 'function' ? (
272
<EditableValue
273
- dataType={type}
273
+ initialValue={value}
274
overrideValueFn={overrideValueFn}
275
path={[]}
276
- value={value}
276
/>
277
) : (
278
// $FlowFixMe Cannot create span element because in property children
packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
+1
-2
@@ -102,10 +102,9 @@ export default function KeyValue({
102
</span>
103
{isEditable ? (
104
<EditableValue
105
- dataType={dataType}
105
+ initialValue={value}
106
overrideValueFn={((overrideValueFn: any): OverrideValueFn)}
107
path={path}
108
- initialValue={value}
108
/>
109
) : (
110
<span className={styles.Value}>{displayValue}</span>
packages/react-devtools-shared/src/devtools/views/hooks.js
+17
-23
@@ -8,13 +8,7 @@
8
*/
9
10
import throttle from 'lodash.throttle';
11
-import {
12
- useCallback,
13
- useEffect,
14
- useLayoutEffect,
15
- useMemo,
16
- useState,
17
-} from 'react';
11
+import {useCallback, useEffect, useLayoutEffect, useState} from 'react';
12
import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
13
import {
14
localStorageGetItem,
@@ -42,11 +36,14 @@ export function useEditableValue(
36
const [parsedValue, setParsedValue] = useState(initialValue);
37
const [isValid, setIsValid] = useState(initialIsValid);
38
45
- const reset = useCallback(() => {
46
- setEditableValue(smartStringify(initialValue));
47
- setParsedValue(initialValue);
48
- setIsValid(initialIsValid);
49
- }, []);
39
+ const reset = useCallback(
40
+ () => {
41
+ setEditableValue(smartStringify(initialValue));
42
+ setParsedValue(initialValue);
43
+ setIsValid(initialIsValid);
44
+ },
45
+ [initialValue, initialIsValid],
46
+ );
47
48
const update = useCallback(newValue => {
49
let isNewValueValid = false;
@@ -65,17 +62,14 @@ export function useEditableValue(
62
});
63
}, []);
64
68
- return useMemo(
69
- () => ({
70
- editableValue,
71
- hasPendingChanges: smartStringify(initialValue) !== editableValue,
72
- isValid,
73
- parsedValue,
74
- reset,
75
- update,
76
- }),
77
- [editableValue, initialValue, isValid, parsedValue],
78
- );
65
+ return {
66
+ editableValue,
67
+ hasPendingChanges: smartStringify(initialValue) !== editableValue,
68
+ isValid,
69
+ parsedValue,
70
+ reset,
71
+ update,
72
+ };
73
}
74
75
export function useIsOverflowing(