Derivations

[00:00:00]
>> There's a third piece here, which is computed values. So far, we actually have basically everything we need for a basic reactive system, but the nuance or the real control comes in with this third primitive, which I call derivations. They're sometimes called memos or computeds. And this thing is basically both an observer and a signal.

[00:00:26]
It only recalculates when the values it depends on changes. So like the effect, it only reruns its function body if something inside of it changes. When you just access it from the outside, you'll always get the same value back. However, this sort of intermediate caching is very powerful.

[00:00:47]
I'm just gonna show the syntaxctualy what this work looks like here where we basically have a couple names like John and Smith for our signals and then I've created a memo for full name. This is usually a pretty canonical example where we're just calculating full name from first name and last name.

[00:01:04]
And then I've actually got an effect here to console log our full name. And essentially, setting the first name to Will, will also update our effect. This is kind of unsurprising perhaps, but it's basically so that it causes a bit of a change. So if you set the first name to Will, it actually causes this memo to recalculate, which gives us a new first name and last name, which causes the effect to calculate.

[00:01:33]
There's a ripple effect as the change propagates through the system. And as I said, this example is so trivial you'd probably be like, why do I even care about this? This can be important if you need to cache expensive calculations, especially if they're used in more than one place.

[00:01:55]
For me, getting back to my kinda spreadsheet thinking, this is when I'm thinking about calculating tax and tip and stuff off a single subtotal. You don't wanna do the math over and over again, you just wanna kinda like get to a certain point and be like, okay, I've calculated the subtotal, gonna cash this value, tips calculated off of it, tax calculated off of it.

[00:02:19]
You can also think of it sometimes like if you've ever seen a user interface when there's an avatar in the corner, sometimes it's a letter, let's say for your first name if you don't have a picture. That's an example of something derived off your first name, essentially. So you only need to calculate that once unless your name changes, you're not gonna recalculate that avatar.

[00:02:42]
So you might use it in multiple places in the UI though. So these are kind of examples of this. Basically, I'd like to say what could be derived should be derived. That's kind of the principle that we have behind how to write stuff with reactivity and with Solid.

[00:03:00]
And because this largely removes the potential of getting out of sync. This typically when you write code, though, requires little bookkeeping, because if you had to manage all those assignments and updates yourself, it gets kinda complicated. But luckily for us, reactive systems handle this automatically. And I've got a couple more examples where I actually wanna kind of illustrate the difference here.

[00:03:23]
I've got a bit of an example here where I've taken our first name and last name example. And instead of using the memo or create memo or the derivation I showed before, I've just made it a function call. Why didn't make it a function call? Cuz I wanna still call it under our effect, I want our effect to still track it, so I've made it a function call.

[00:03:48]
And I've made two effects now, I've made an effect that says my name is full name and your name is not full name. And then at the end here, I update the name to kinda show you the difference. And again, we start by creating our signals. We create our reaction now, that happens when we run our two effects and you'll immediately see that it calls creating or updating full name, which is this little thing that I put in the top of our full name function.

[00:04:20]
And the reason it calls out immediately is because when it calls full name inside this effect, it essentially is just running this function again and again. So we see creating updating full name, my name is John Smith, creating updating full name, your name is not John Smith because it just calls the function twice.

[00:04:38]
Then when we update our name, it's the same thing again creating updating full name, my name is Jacob Smith, creating updating full name, your name is not Jacob Smith. And the key difference here when we do something that we're using derivations is that if I change this now to be create memo and wrap this function call and import it.

[00:05:07]
What runs actually becomes a lot shorter because now this is eager the way that it works in Solid. But now when we create our signals, we actually create our memo up here and it basically creates or updates the full name up top. But you can see when we run our effects, it doesn't actually run this function again it literally just reads it.

[00:05:27]
It goes, my name is John Smith, your name is not John Smith. We got rid of that kind of extra overhead. And then similarly now when we change the name on step three, we see that it updates the full name, but then again both effects run and we've reduced the execution.

[00:05:45]
This is just kind of why we would derive stuff. Obviously, concatenate strings is not very expensive operation and you probably would be like, who cares but you can picture things that are more expensive. Very kind of the fundamentals look, look at this.
>> So without registering in effects nothing's reacting to the signal, it's just kind of changing into the void.

[00:06:12]
>> Ideally, that's probably the case, in the case of Solid, our stuff actually is eager. And this does depend differently on different reactive systems. This is something that we're exploring, the eagerness of these derivations in Solid are important for the way our rendering works today, but I think it's something that we could look at in the future.

[00:06:36]
Theoretically, yes, we could just not do it, but in Solid actually, as soon as you have one of these derived values, it does start calculating stuff eagerly.