Fork me on GitHub
#helix
<
2021-09-03
>
JonR16:09:51

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.

lilactown16:09:19

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

lilactown16:09:34

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

lilactown16:09:28

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

JonR16:09:28

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

lilactown16:09:53

i seem to recall a bunch of libs like this

JonR16:09:24

nice, I haven't seen either of these

lilactown16:09:17

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

JonR16:09:27

yup, exactly what I was thinking about

JonR16:09:51

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

lilactown16:09:52

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

lilactown16:09:25

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

JonR16:09:56

💥

JonR16:09:13

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

JonR16:09:48

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

lilactown16:09:53

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

JonR16:09:13

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

2
JonR16:09:24

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

JonR16:09:47

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

lilactown16:09:16

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

JonR16:09:35

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

lilactown16:09:39

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)
doesn't work?

JonR16:09:23

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

JonR16:09:38

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

JonR16:09:59

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

JonR16:09:12

there's what I get in the shadow build

lilactown16:09:45

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

lilactown16:09:55

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

JonR16:09:03

Happy to create an issue if that's helpful

JonR16:09:01

But doh, now I see it is valid just warning

lilactown16:09:26

yeah but warnings can block hot reloading in some setups

lilactown16:09:31

I'll put a fix out for this

lilactown18:09:06

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

🎉 10
💥 6