Current section: DOM Side-Effects 29 exercises
solution

Primitive Dependencies

Loading solution

Transcript

00:00 Here we go. Let's take this and we're going to move vanilla to options directly into use effect. We can put it all the way down here. OK, so with that now we're getting a new warning. It's saying, hey, vanilla to options. I don't even know what that is. And if we come down

00:16 here and again remove this ESLint rule, then we won't actually even have to type this stuff out. Check this out. Awesome. Thank you, ESLint. So we get the glare, the max, the max glare and speed. And these are primitive values. And so when any one of these things individually changes,

00:32 then our use effect will be recalled. So we come over here. Let's take a look at that corner. Click, click, click, click, click, click. Look at that. Awesome. We're not getting it reset unnecessarily, but we will get it reset if one of those values actually changes. And now it's

00:47 just like, what the heck is going on? Or no glare, no glare at all. Or we do want to glare and it gets reset when it needs to be, when one of these values actually changes. And if they don't, then it doesn't get reset. Now, a question that some of you might be thinking is like, what if

01:05 there are like six thousand options? Well, first of all, maybe don't have six thousand options. But but if you really do have that scenario, then there are a couple of things that you could do.

01:18 You could remove the dependency array entirely and instead do your own sort of checking inside of the use effect and exit early if you don't need to reinitialize or something. This would involve a little bit of extra work because you want to like handle the cleanup

01:34 properly and stuff. But that is something that you could potentially do. Is do your own comparison rather than reacts comparison, which is just literally is this thing referentially equal to this thing? It's not. OK, let's rerun it. So you could do it that way. And some people try to do

01:53 like a JSON string if I think that is not the best because you're going to have performance issues with that and stuff potentially. But I just prefer to list them out here. Luckily, we don't have to

02:07 use use effect a ton because you can handle lots of things in events and things like that. But when you need to use use effect, this is how you do it. And now you know how to handle use effect and the dependency array and all that stuff. So you should feel proud of yourself. Good job.