Shallow Ref & Singletons

[00:00:00]
>> Ben Hong: Have any of you here heard of shallow ref? In case you haven't, shallow ref sounds actually a bit like what you think, which is that. Take this. We're gonna take this. Where am I? Backend database JSON. Okay, imagine for a moment here, and let's go to our sandbox here, that we had my data and it was a ref.

[00:00:25]
There was this giant object, right? This is a lot of data. And the thing is that when you make it a ref, it actually basically watches everything at a deep level, so assigns reactivity pretty basically watches everything at a deep level, which at first glance you're probably like, that sounds good, that's what I want.

[00:00:45]
And so for, I don't know, most people won't know this performance. Like, for some, actually, this is not even really that big, so probably, probably wouldn't matter. But you can imagine if you're downloading stuff from your database, you're doing some sort of test, it could be tens of thousands of records.

[00:00:59]
And the thing is, you don't always need deep reactivity. Sometimes you just need to know whether the object, like the giant object, has changed instead of the words. Hence why it's called that. So shallow ref is a helper method, just like REF from vue, and the difference being that when you're dealing with large sets of data, or more importantly, you're not going to be manipulating, like, deep reactivity.

[00:01:20]
And so this particularly comes into play with tests that I've seen most commonly, they actually recommend just default to shallow ref, because then it's just basically VUE is only looking at the top, they're not worrying about the rest of it. So, again, this is more of a technique for in the event you think that performance might be an issue or you know for a fact that you don't need deeper activity.

[00:01:38]
There are some who would even venture to go as far to say that shallow ref should be your default. Some would claim that. I don't think it needs to be that extreme. I would say I have seen most unit tests or like end to end tests, they do tend to be shallow REF, because it's usually just like, render this object, then skip to the next thing.

[00:01:55]
Or if there's one piece that really needs to be reactive, they'll make that piece reactive. So I have seen people try to optimize performance in that regard, but just know that this exists for you in the event that you've ever like, ref definitely seems like overkill for this thing.

[00:02:08]
Well, we got you covered, shallow REF. So we are going to formally give this a name. We talked about this earlier and I mentioned that we had basically touched on this. And so it's this reminder, so I guess how many people have heard the term singleton? Okay, great.

[00:02:22]
Yeah, because here's the thing. It's not a view thing, it's a JavaScript thing. It's a programming thing. And so, you know, for those who are maybe haven't heard of it or new to it before, essentially it's as the things that it's a single instance that is then shared with a bunch of things.

[00:02:37]
And so this is why we saw earlier in our code when we were using things like UseWeek, this is an example of a singleton right here, because this constant is then basically cached, and then whenever it's brought into another component, that same instance of weeks is then being referenced.

[00:02:54]
And that's the reason why we get that shared state.