Managing Props & Lifecycle Methods

[00:00:00]
>> Let's talk next about component authoring. Component authoring is pretty big cuz obviously, the way you write code and Solid even if the components don't have much of a runtime impact, they are everywhere, right? That's where you're gonna spend most of your time. So again, this kinda gets us back to what is a component.

[00:00:24]
And in the same way that reactivities loses a bit of meaning here, I have to admit in Solid, it does too. I mentioned this before, I wasn't expecting to mention it so early, but a component is basically an untrack call. That's essentially all it is. We call a function with untrack to isolate its context.

[00:00:41]
That is basically all it is. I'd say in your head just pretend it's a function. And again, it's all about the props. So this has some implications though, because sure, this is fine when you interact with the props, you just read them and it doesn't matter if it's reactive or not, it works the same way.

[00:01:01]
However, what if we want to do some fun stuff like merge them and spread them and destructure them and stuff? And this is where things get a little bit more fun. So we actually have a couple helper functions to handle with that. Spreads and stuff in the JSX are all handled for you automatically.

[00:01:21]
But if you're gonna be like merging props together, setting default props, and whatnot, you have to do it in a way that doesn't lose reactivity. We haven't brought it up to this point now, but it might be obvious to you if you consider that a component's untracked. Is that if you destructure at the top of your component, you are accessing the variables at that point, it is not under an effect, right?

[00:01:43]
So reactive frameworks, whether they're Vue or Solid or whatever, you lose reactivity if you destructure props. This is our hooks rule, this is the rule that everyone trips on at least once, probably multiple times because even though they're aware of it, it's like a force of habit.

[00:02:03]
So big thing is destructuring technically is fine if you're in a point that is being read like that is reactive. But the top your component is never that. So destructuring props is something that we do not do generally. So yeah, we'll look at a couple of examples of how to use these APIs essentially.

[00:02:31]
So first thing props.children already introduced, this is the generic prop that works for any open close tags. MergeProps is how we keep reactivity while merging the props together, so if you have multiple objects you wanna merge. SplitProps is how we maybe we get some props and send some to a children and some that you use locally, we can split those objects across.

[00:02:53]
And then children is very similar to if you'd use React's Children, where it resolves all the children and gives you kind of like a ability to do introspection and look at them. Because in reactivity, you might have a lot of reactive things going under the hood, you might be returning functions and return functions and do a bunch of stuff.

[00:03:12]
And children will give you the actual DOM nodes underneath. So it returns basically a derivation that you can reactively introspect. The other thing we have, I'm gonna call them lifecycle functions, but that's a little bit of a cheat because everything in Solid runs off the reactive system. So these are more for convenience than anything.

[00:03:38]
OnMount is literally create effect with untrack on it. If you have an effect with an empty dependency array essentially. OnCleanup registers with that cleanup function that we wrote earlier, so that anything you write, if the parent effect reruns, it'll run your function. So it's a custom way to register cleanup.

[00:04:01]
And this is really powerful because it means onCleanup can be written inside effects, outside effects. It's the same mechanism regardless of where you register these cleanup methods.