Clojurians Log v2

Hey @lilactown, thanks for the library! We're building our new app on helix and loving it so far. Something I've been wondering about a bit is if helix and the component macro + hook wrappers could allow for exposing more info around re-renders triggered by hooks. Unless I'm unaware of some new tools, this has been a major pain point in optimizing vanilla js(x) react components. My understanding is that the way react has implemented hooks fundamentally is at odds with surfacing this info via the debugger. Any thoughts on if it would be useful, and if so, how hard to expose this type of info. For example, if you could pass a meta data flag and handler to a component which is called with component name and hook name that returned a new value.

hmm, so the "want" is to be able to know what triggered a specific render?

i.e. "this render was triggered by this specific use-state hook by calling set-state with arguments xyz "?

I guess if you just want to know what values have changed, you could use something like https://github.com/clj-commons/spyscope

yes @lilactown, that is the "want". Checking out spyscope now

or debux: https://github.com/philoskim/debux

i seem to recall a bunch of libs like this

nice, I haven't seen either of these

anyway, I could imagine a macro or something similar to what these provide but only logs things when values change from previous

yup, exactly what I was thinking about

That + the context of which component you're in would do it I think

if you do it as a macro or reader tag, you can use the ns+line as the identity to trace things across renders

which would mean you wouldn't need to do anything with helix 🙂

💥

ok nice, I'll mess around with this sort of approach. Thanks for the tips and thoughts

In part, I think it's just something you could do with cljs and not js so would be fun to show

sure thing. I'm inspired. would be interested in something like this for my own debugging purposes

yeah!

If I get something interesting going I'll loop back around

Oh yeah, while I have you, one other quick question

Any thoughts on allowing use-callback to take a fn var rather then need a body?

ugghh yes. I should start that effort sooner rather than later

It's not a blocker or anything, just curious if there was an explicit reason to disallow

actually, backing up, because I was thinking of use-memo and use-effect: you're finding you can't pass in a var to use-callback? i.e.

(use-callback
  :once
  some-fn)

I thought so but your question makes me doubt my question 🙂. Checking now

_ (hooks/use-callback
           []
           update-query-params)

--------------------------------------------------------------------------------
 183 | 
 184 |         search-terms (get query-params :search-terms "")
 185 | 
 186 |         _ (hooks/use-callback
-----------------^--------------------------------------------------------------
 Got a single symbol update-query-params as a body, expected an expression. Maybe you meant (update-query-params)?
--------------------------------------------------------------------------------
 187 |            []
 188 |            update-query-params)
 189 | 
 190 |         debounce-time 325
--------------------------------------------------------------------------------

there's what I get in the shadow build

I see. ty for the report! I believe that warning is wrong

it's true for use-memo but not for use-callback

Happy to create an issue if that's helpful

But doh, now I see it is valid just warning

yeah but warnings can block hot reloading in some setups

I'll put a fix out for this

thanks!

I just published helix 0.1.2 with the following: Fixed • Fix invalid hooks check false warnings when a `use-` symbol appears in a quoted form (@SevereOverfl0w) • Allow a single var/binding to be passed to `use-callback` Added • Invalid hooks check now happens in `defhook` forms • fnc for constructing anonymous components https://github.com/lilactown/helix/blob/master/CHANGELOG.md