Change:
Do you want to request a feature or report a bug? Report a bug What is the current behavior? The hook's value is shown as in React DevTools if the value is a string or a number. Clicking on the bug icon prints the correct values to console. ! If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. CodeSandbox: Direct link to page so you can see the DevTools: What is the expected behavior? The DevTools should show the correct value of the hook. Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? React 16.9.0. Google Chrome [Version 77.0.3865.90 (Official Build) (64-bit)] running on Linux x64. This issue appeared after version 4.1.0 (9/19/2019) of the DevTools Chrome extension. Might be same bug as but this one appears without any complicated reproduction steps.
Looks like the issue also appears with boolean values.
Having the same problem. The extension worked fine after I downgraded React to version 16.8.6
I think the only significant difference between React v16.8 and v16.9 is that v16.9 injects the function DevTools uses to support editable hooks (in other words, DevTools is using a different code path when you run v16.8 vs v16.9). I think that means this bug is probably related to somehow. Will dig in more.
Should be fixed by
This fix will be released with 4.1.1 (sometime soon)
This fix has just been published to NPM and posted to Chrome/Firefox as v4.1.1

Discussion:
type EditableValueProps = {| className?: string, <del> dataType: string, </del> initialValue: any, overrideValueFn: OverrideValueFn, path: Array<string | number>,

export default function EditableValue({ className = '', <del> dataType, </del> initialValue, overrideValueFn, path,

</span> {typeof overrideValueFn === 'function' ? ( <EditableValue <del> dataType={type} </del> <ins> initialValue={value} </ins> overrideValueFn={overrideValueFn} path={[]} <del> value={value} </del> /> ) : ( // $FlowFixMe Cannot create span element because in property children

</span> {isEditable ? ( <EditableValue <del> dataType={dataType} </del> <ins> initialValue={value} </ins> overrideValueFn={((overrideValueFn: any): OverrideValueFn)} path={path} <del> initialValue={value} </del> /> ) : ( <span className={styles.Value}>{displayValue}</span>

*/ import throttle from 'lodash.throttle'; <del> import { useCallback, useEffect, useLayoutEffect, useMemo, useState, } from 'react'; </del> <ins> import {useCallback, useEffect, useLayoutEffect, useState} from 'react'; </ins> import {unstable_batchedUpdates as batchedUpdates} from 'react-dom'; import { localStorageGetItem,

const [parsedValue, setParsedValue] = useState(initialValue); const [isValid, setIsValid] = useState(initialIsValid); <del> const reset = useCallback(() => { setEditableValue(smartStringify(initialValue)); setParsedValue(initialValue); setIsValid(initialIsValid); }, []); </del> <ins> const reset = useCallback( () => { setEditableValue(smartStringify(initialValue)); setParsedValue(initialValue); setIsValid(initialIsValid); }, [initialValue, initialIsValid], ); </ins> const update = useCallback(newValue => { let isNewValueValid = false;

}); }, []); <del> return useMemo( () => ({ editableValue, hasPendingChanges: smartStringify(initialValue) !== editableValue, isValid, parsedValue, reset, update, }), [editableValue, initialValue, isValid, parsedValue], ); </del> <ins> return { editableValue, hasPendingChanges: smartStringify(initialValue) !== editableValue, isValid, parsedValue, reset, update, }; </ins> } export function useIsOverflowing(