I would like to take a look. 😄

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!

Thanks. I'm working on it.

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.😅

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

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

currently working as expected

missing debug value in component

missing hooks in component

@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
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.

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.

Seems like a use case that I'm not sure if DevTools needs to support.

Because there are no built-in hooks used other than useDebugValue? Would probably agree with that. It's still surprising behavior which I'd like to avoid generally.

@bvaughn I'm quite lost where the tests for these components are located. The data seems to be wired up correctly. It looks like the view is not working but I can't find tests for those. Is there some documentation how to test devtools?

Seems like a use case that I'm not sure if DevTools needs to support.

Because there are no built-in hooks used other than useDebugValue? Would probably agree with that. It's still surprising behavior which I'd like to avoid generally.

Yes. There's no need to use such a hook at all, since hooks calls can't be conditional to begin with (without leading to errors).

@bvaughn I'm quite lost where the tests for these components are located. The data seems to be wired up correctly. It looks like the view is not working but I can't find tests for those.

You'd probably want to add tests to the following places:

• v16+ - https://github.com/facebook/react/blob/master/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
• v5 - https://github.com/facebook/react/blob/master/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js

Is there some documentation how to test devtools?

No.

Ah I couldn't get it pick up react-devtools-shared but this isn't included in yarn test. yarn test-build-devtools was the magic word.

Yes. There's no need to use such a hook at all, since hooks calls can't be conditional to begin with (without leading to errors).

Just to be clear: There's not conditional call there. It's just not using an built-in hooks other than useDebugValue

Yes. There's no need to use such a hook at all, since hooks calls can't be conditional to begin with (without leading to errors).

Just to be clear: There's not conditional call there. It's just not using an built-in hooks other than useDebugValue

I understand. My point though is that- since hooks calls can't be conditional, this could only ever be an "empty" hook- which serves no purpose and so I don't see it as a use case we should ever need to support.

My point though is that- since hooks calls can't be conditional, this could only ever be an "empty" hook- which serves no purpose and so I don't see it as a use case we should ever need to support.

I'm confused. A custom hook with no built-in hooks is the only hook that's displaying complext types. It's only not working for the component that doesn't use built-in hooks (other than useDebugValue) at all.

As soon as a custom hook uses useDebugValue and built-in hooks the complex type isn't displayed.

I'm not sure where the confusion is.

I'm just saying that the "no hooks at all" component is not a use case I care about us supporting, because that's a "custom hook" that literally only uses the debug value hook and nothing else. That use case is not important to support. (If it works, fine. If it doesn't work, fine.)

I'm not sure where the confusion is.

I originally thought at least something is working. But since we don't care about the case that is working it's a bit more complicate to understand for an outside contributor how to create a test and feature since I have nothing to work off.

@wfnuser This was more complicated than I thought #18070 already includes a fix. I wasn't able to write test and fix separately, sorry. Might still make sense to check #18070 out in case the fix isn't accepted.