Bug(devtools): complex types ignored sometimes in useDebugValue

[eps1lon]

React version: 0.0.0-241c4467e (current next) and 16.12.0
Devtools: 4.4.0 (1/3/2020). [...] Created from revision f749045 on 1/3/2020.

Steps To Reproduce

1. Visit https://codesandbox.io/s/usedebugvalue-complex-types-3x877
2. Inspect App Component
3. NoHooksAtAll displays no hooks at all
4. IgnoredComplexValue displayes the custom hook but without a value
5. NoHooksAtAll displays the custom hook with its value

Link to code example:

The current behavior

Complex values (and custom hooks) are sometimes not displayed

The expected behavior

Implementation of components and hooks should not affect if these are displayed.

[wfnuser]

I would like to take a look. 😄

[bvaughn]

This issue is all yours! 😄

I've added the "good first issue (taken)" label so that others will know not to start work on the issue. If you change your mind about the issue, no worries! Just let me know so that I can remove the label and free it up for someone else to claim.

Cheers!

[wfnuser]

Thanks. I'm working on it.

[wfnuser]

Hi... It seems I need some help... I'm not sure what the hooks should behave in the dev-tools.
Would anyone explain it more detailed for me. Or give me some docs to follow... It has proved that I'm still very new to react.😅

[bvaughn]

@wfnuser I don't think I understand what you're asking.

[eps1lon]

@wfnuser
Here's a mock of what I would've expected looking at the built-in hooks.

currently working as expected

currently working useDebugValue in component

missing debug value in component

actual

expected

missing hooks in component

actual

expected

@bvaughn needs to confirm if this is correct.

I can write some tests tomorrow if you're not sure where to start. Having failing test might help experimenting with various pieces of code to see what does what.

[wfnuser]

@wfnuser
Here's a mock of what I would've expected looking at the built-in hooks.

currently working as expected

currently working useDebugValue in component

missing debug value in component

actual

expected

missing hooks in component

actual

expected

@bvaughn needs to confirm if this is correct.

I can write some tests tomorrow if you're not sure where to start. Having failing test might help experimenting with various pieces of code to see what does what.

Thanks a lot. I still need to learn more about how hooks work. If you can provide some tests, that will be very helpful.

[bvaughn]

Not sure if I agree with "no hooks at all" component. Seems like a use case that I'm not sure if DevTools needs to support.