TomDaBomb
Tagged Template Literals - Why is unwrapped props value reactive?
ANSWER:
Props wrap Solid signal accessors in proxies and call signal accessors when prop values are being accessed. The result is that you get primitive values when accessing a prop.value. Because they are primitive values (as opposed to signal accessors/getter functions), they must be wrapped with a function when using tagged template literals to be reactive.
(For anyone coming here in the future)
37 replies
Tagged Template Literals - Why is unwrapped props value reactive?
Context: I did a bunch of microcontroller programming where we had to write event loops in C (to read sensors and control motors at the "same time"), so JavaScript always feels cozy to me haha
^
Some people bash it (the JavaScript event loop), but I think it's great. You don't have to write one ever haha.
37 replies
Tagged Template Literals - Why is unwrapped props value reactive?
Woah, I've actually thought about that, too...
I assumed that a promise is seemingly an object/structure wrapping a callback whereas async/await is a context pushed back/deferred directly in the good ol' "JavaScript Event Loop"
^
I could be totally wrong... I just assumed that... 😆. But, thinking about it is strange nonetheless.
Btw, thanks again for the answers/examples/etc, @peerreynders! 🤙 It is much appreciated 🙂
37 replies
Tagged Template Literals - Why is unwrapped props value reactive?
Haha yeah, it's easy to believe/imagine that it's just magic as a beginner (until you run into an issue and have to learn) 😆.
^
I come from Vue, and Vue has "computed properties" for derived properties. Just like effects/memos.
A bit off topic at this point haha, but one thing I didn't like from Vue (React has it, too) is the "async render queue" (ie, a "promise tick"). As far as I can tell, Solid is sync, which is actually really cool to me!
37 replies
Tagged Template Literals - Why is unwrapped props value reactive?
I personally like the idea of calling accessor functions directly, too. 👀
It is a little more verbose, but I too like the feeling of knowing you have the most up-to-date value.
37 replies
Tagged Template Literals - Why is unwrapped props value reactive?
Ohhh, @peerreynders, I didn't realize props values were wrapped with a proxy (ie, a trap mechanism)
I presume that the proxy calls the solid signal accessor/getter and hence, when one has, props.id, it is the primitive value at the end of the day (not the Solid signal accessor function)
37 replies
Tagged Template Literals - Why is unwrapped props value reactive?
Also, @peerreynders, in the example you presented with props.id, if props.id is a getter, isn't a getter (to a primitive value) still a function?
I think it's odd that a signal getter doesn't have to be wrapped, yet when a props value is assigned a signal getter, it has to be wrapped. Strange to me...
I think it's fair to say that I have a gap in my knowledge about reactivity. 🤔
^
I'm also foregoing using build tools which may complicate things a bit (for learning purposes) (typescript is certainly useful for productivity, but I'm also a bit of a vanilla purist at heart 😆).
37 replies
Tagged Template Literals - Why is unwrapped props value reactive?
@peerreynders ahhh, I see what you were doing now. Yes, line 25 indeed does not work as I originally hypothesized after changing the way the prop is passed in. 🙂
I assumed that a getter, in itself, was still a "reactive expression" and hence needed to be wrapped.
But, I suppose that is not the case!
Also, @bigmistqke, my impression was that Solid doesn't re-render entire components. Are there exceptions to this? 👀
37 replies
