React: DevTools: hooks with numbers, strings or booleans show as undefined

[cxcorp]

Do you want to request a feature or report a bug?
Report a bug

What is the current behavior?
The useState hook's value is shown as undefined 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: https://codesandbox.io/s/keen-colden-syb7r
Direct link to page so you can see the DevTools: https://2km9v.csb.app/

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 #16843 but this one appears without any complicated reproduction steps.

[cxcorp]

Looks like the issue also appears with boolean values.

[arkuar]

Having the same problem.
The extension worked fine after I downgraded React to version 16.8.6

[bvaughn]

I think the only significant difference between React v16.8 and v16.9 is that v16.9 injects the overrideHookState 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 #16700 somehow. Will dig in more.

[bvaughn]

Should be fixed by #16867

[bvaughn]

This fix will be released with 4.1.1 (sometime soon)

[bvaughn]

This fix has just been published to NPM and posted to Chrome/Firefox as v4.1.1