Reactive References

[00:00:00]
>> So, here's the thing. We have a regionName. We have the Pokedex. This all looks pretty good. Except if we take a look at this actually, and let's say we wanted to change the regionName. This is actually pretty common. So let's say we wanna say let's do an H2.

[00:00:17]
And this is a regionName. There we go. We see console here there we go. Now it's not being clicked, okay? So if you wanna change this you might be thinking well, okay, I know what I'm going to do. I'm going to say inside of will create a method here, just to make things very clear.

[00:00:36]
In this has changed regionName. And then this .regionName is gonna be equal to Hoenn after this. Alright, and then we're gonna do is wanna create a button. Actually now that's gonna be at the bottom of a very long list equals change regionName. And then change regionName save. Okay, so far, again, just to recap, we wanna be able to change the regionName.

[00:01:05]
So we created a button that runs its function that should, as we've been practicing already, just change canto to Owen. So we say that and click. You'll notice that nothing is happening. And this might feel weird because after all isn't this what we've been doing this entire time?

[00:01:25]
The secrets of this lies in the fact that what we talked about when we covered setup which is that everything in here is Vanilla JavaScript. So what you're returning here, while view will go ahead and register it to the rest of the component, there's no reactivity attached to it right now.

[00:01:41]
Because why? It's a plain JavaScript const. It's a constant. And the same thing is happening with Pokedex. In other words, all the stuff that we were talking about regarding reactive data, computer properties, that will not work with this. Because at this point, it's not reactive. So how do we bring some reactivity?

[00:01:57]
Well the way we do that is actually by using view helper methods. And so we mentioned that earlier were a really popular thing that with view three is the ability to parse out different functions to kind of help people use it in different context. Well, there is a helper method for turning something into a reactive reference.

[00:02:15]
And the way we do that is we import from view. And we D structure out this method called ref. Again, if you think of ref think of reactive reference. And so how does that work? Well, what we do is we actually just wrapped the value that we want to be reactive inside of this helper method that's what we do.

[00:02:36]
And so now if I refresh this and we change it, you'll notice it's now actually being tracked by view. And so this ref and a lot of the content we'll be talking about is actually really critical because going forward, whenever you're working side of composition API, you have to be very explicit about when you want view to introduce metric.

[00:02:54]
And so this is actually one of the things I do think that's beneficial to the composition API is because now you know exactly where view is coming in to do things. Whereas in the options API you could argue that this context could be confusing for JavaScript developers. And what if they wanted to come in and change some stuff right?

[00:03:09]
Composition API is your ability to get at the primitives and say okay this is stuff I wanna do and then view do your magic for this kinda stuff. And so for example right, if we wanted to say let's actually have ability to have like an all caps regionName.

[00:03:23]
Well, the way we can easily do that is you can have a computed property. That's how I would approach this. So we'll say region all caps. And actually, I'll just be more specific region name all caps. And what do we need how we need a computed property. And guess what the helper method is computed.

[00:03:39]
So we have a computer property, but what we need to do inside of our computer property is we need to run a function. Because we look back at our other apps that use computed. Let's go back into another component that uses it. You'll see that all of our computer properties actually are functions, which makes sense because they need to run a computation on the things that are dependencies.

[00:04:00]
So, we have an error function in here, and what are we gonna do? We gonna go ahead and we're gonna return, just like we did before, we're gonna return the region name to uppercase. This is probably our first instinct as far as how we would make this work.

[00:04:14]
And so to make sure this works, we've got to make sure we return this to regionName all caps. Just like that, and then let's go ahead and expose that here as an H3. RegionName of caps, just like that. And we'll save. And you might notice that well, something's broken.

[00:04:35]
What's going on? Well, it's in regionName but to uppercase is not a function. You might be thinking This is weird, but RegionName is a string, right? It's not. Yeah, it's not a string anymore. It is now a reactive reference, which actually some of you have noticed when you're doing the inspecting the element.

[00:04:55]
Let's go ahead and actually log regionName at this point and see what we get. If I refresh that, that's fine, we get a massive error. And you'll see things like the ref implementation. You also might have seen as well when you're doing the options API you saw proxy show up when you would log out a value.

[00:05:14]
And I know that was confusing for some people because they're expecting to just see what the value actually is. But one of the big rewrites of view three when it came to the reactivity engine is that the jobs skip proxies underneath in order to manage how all the dependencies are being tracked.

[00:05:28]
And so again, you don't need to understand how proxies work, for you to be familiar with, or basically to work with view. But in case that's something you're interested in, I just wanted to give you sort of like a little bit of a preview of that so that you can always dive into that if you wanna learn more about.

[00:05:43]
But you'll notice here that once again, regionName is not a string. What is it? It's a rough implementation because it's a reactive reference. Meaning, the way we actually get to the value of it is actually to basically think of it as an object now. It's an object that has the ability to update it, its dependencies.

[00:05:59]
And so when we actually want to access the raw value of a reference, we have to actually unpack the thing. And the way we do that is by saying .value. And you'll notice once you do that everything works. Now, this might feel a little bit odd after using the options API for a little while, because, after all in the past are actually not even the past.

[00:06:21]
If we wanted to, we could have theoretically created a computer property at this level. And just for the sake of having comparison, this will be regionName lowercase. And so what we do here is return this regionName .tolowercase just like that. And then we'll just add another H3 regionName.

[00:06:42]
All okay no it looks like it's just lowercase. Yeah okay save okay. So, that happens to work. Let me see. Let me have a differentiator here. There we go. Okay, sentence case all case okay. So you might be thinking, well, this is way nicer, right? Like, why do I want that value?

[00:07:05]
And I'll say when I first was exposed to this, I would agree. [LAUGH] It definitely feels odd. But there is something to understand about the reason why this is actually helpful. Is because we do have to remember that when you're working in vanilla JavaScript it is important to be able to tell when something is viewed when something is not.

[00:07:22]
And so we think about cons regionName. The fact that you actually have to unpack the value does signify to people that when they're working with this particular value that it's already attached to the view reactivity. That said, I wanted to give you the pros of how people see that because a lot people do like ref.

[00:07:36]
But in the event you're like, I really don't like ref. What you can do instead is you can do this helper method called reactive. And so what reactive is is basically think of the data option from the options API package in a nice little helper function. Because earlier there was a question regarding around the fact that what if I don't like the name data?

[00:08:00]
What if I wanna call it state? Well, we can state, it's a reactive object. And inside of here, let's just say I'll just do region two and I actually don't know a third region. It's fine okay I'll just do element type I would say lightning okay? So, when you're doing the state first of all I'll go ahead and log out state.

[00:08:32]
What you end up getting is something that looks like a lot more of what people are probably expecting when they're actually expecting element which is the proxy. This is what we've seen earlier when we actually inspected the options API element in that you have to look at the target in order to get underneath it.

[00:08:49]
But what's nice about this now, is that, again, this is gonna be misplaced, but if we do state.element.type.touppercase and run it, you'll see it actually just works. And so the way the thing of reactive is, it's like a nicely packaged way of collecting a rest together and that you don't have to unpackage it with.value.

[00:09:15]
And so there are plenty of code bases I've seen that people never touch ref they'd like state or sorry they like reactive. Because reactive feels like composition or sorry feels like options API, but you're in the composition API's setting. And so is there a right or wrong way to do this?

[00:09:31]
Absolutely not. So for the sake of having this example also be here, I'm just gonna say element type all caps, and then we'll make sure to return this here, make it alphabetical. And then I'll just make sure it's here. And then we should be good okay. So, there we have it.

[00:09:53]
This is the fundamentals around composition API. As far as the highlights to consider this, once again, is that you're now in freeform JavaScript land. So this is where I would say comparing options, API to composition API is that options API, you don't need as much JavaScript to get up and running I would argue.

[00:10:10]
And I've seen that before with people who have just enough to understand the syntax, where because of this syntax, they were able to just kind of get in there, make some changes, make some swaps. And the templating was easy enough that people without a lot of JavaScript experience could actually be productive on a cool base.

[00:10:26]
With something like this, however, when it comes to the composition API, as you can see, there's a lot more going on. You need to understand helper functions. You need to know about modules. You need to go ahead and make sure if you're using ref that it's a dot value, that the skill cap jumps considerably when it comes to the amount of jobs you need to know in order to be productive with competition API.