[DevTools] polish hooks: complex values preview

[a-x-]

We create many useDebugValue helpers, loggers and so one now, so we can feel less pain.

What matter (Updated)

• previewing complex values brifely like chrome devtools does it for arrays, sets, maps, objects,,,

I wrote related twit recently with one of my DebugValue helpers. screenshot out here:

my named hooks currently require a label option unless react babel cannot transform name of variable automatically

[bvaughn]

Big bucketed issues like this can be helpful in some cases, for project maintainers to track a larger initiative, but I'm not a fan of them for feature requests- particularly when some of the features are controversial (like "named hooks", which already has its own huge issue and so really doesn't need to be mentioned again here).

I'm closing this. If you'd like to re-open an issue for the complex value preview, please feel free. I thought one had already been opened but I wasn't able to find it.

The request of copying the name doesn't really seem like a common use case to me. (Why would you need to select+copy text like "State" or "Reducer"?) But you could open that as its own issue as well.

[a-x-]

Okay=) I updated description

[a-x-]

Excuse me, I don’t know before, that named hooks are controversial. Can you point me to the message, that explains the problem?

[bvaughn]

Sure, if you search React GitHub issues for "named hooks" you'll find issue #16474 which explains in depth why it's kind of a complicated issue.

[a-x-]

Thank you
And can you re-open the issue as I updated the description?

[bvaughn]

I have made some progress on this this afternoon. Needs more testing (and probably some new unit tests as well) but here's a preview:

[bvaughn]

Tweaked things a bit more and I think it's pretty close to mirroring what Chrome console does not. Feels a lot better when exploring nested values.

Should be ready to submit a PR soon. Need to update tests.