Improved react dev-tools support for hooks

[orestis]

Opening this to start a discussion going, but it seems it's not going to be an easy one.

React dev-tools supports introspecting the props and hooks of a component. Props work relatively well, but unfortunately, hx hooks look a little bit opaque:

Observations:

1. All the names are the same.
2. The first State hook is a CLJS map, but it renders as "...". This could be fixed by using useDebugValue inside <-state, to do custom formatting (pr-str would be an easy first step).

There's more to research here, as even using React/useState with a JS object doesn't show any value.

[orestis]

This is relevant: facebook/react-devtools#1282

[lilactown]

facebook/react#15259

I created an issue for this in the React repo. I might create one in devtools as well. I hope they give us some way of customizing the display name of the hooks in devtools, otherwise this might always be gross for anything that compiles to JS.

[lilactown]

It isn't possible for hx to fix this completely, since the React dev tools output relies on the names of closures within the React component rendered. Unfortunately, ClojureScript's let introduces a new closure most of the time in order to avoid variables leaking. That's what those eval names are.

If/when ClojureScript moves to outputting let/const, we might be able to remove those closures from the JS output and thus flatten this a lot more.