Improved react dev-tools support for hooks
orestis opened this issue · comments
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:
- All the names are the same.
- 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.
This is relevant: facebook/react-devtools#1282
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.
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.