Skip to content

Commit

Permalink
Fix DevTools v4.1 editable hook regression (#16867)
Browse files Browse the repository at this point in the history
* Fixed a regression in hooks editor from a recent EditableValue change

* Fixed a reset/state bug in useEditableValue() hook and removed unnecessary useMemo()
  • Loading branch information
Brian Vaughn authored Sep 23, 2019
1 parent 1a6294d commit 9b3cde9
Show file tree
Hide file tree
Showing 4 changed files with 19 additions and 29 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
40 changes: 17 additions & 23 deletions packages/react-devtools-shared/src/devtools/views/hooks.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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;
Expand All @@ -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(
Expand Down

0 comments on commit 9b3cde9

Please sign in to comment.