00:00 So, let's start out by creating a TiltRef with UseRef. So, our TiltRef is UseRef. The type of ref is this HTML tilt element. We're going to pull a UseRef from React, so that import gets updated up there. And then down here, we're going to take all of this stuff

00:18 and cut it out and replace it with a reference to TiltRef. So, now React is going to add the DOM node on the current property of TiltRef. So, let's make a UseEffect here. UseEffect. And we'll add our dependency array right there.

00:36 And we will grab the current property off of the TiltRef. So, now we get the Tilt node, which is the current property of the TiltRef. And then the rest of the stuff we had before actually works just fine. I'll just get rid of that. It's all pretty much the same. And if there's no Tilt node for some reason, maybe, yeah, some weird reason,

00:55 then we'll just return. Don't need to do anything in that case. A reason this could happen is if you have some logic, and then here we do null, then now there is a situation where the TiltRef actually could be null because there's no DOM node that represents it. So, it is important to handle those cases.

01:12 Don't just tell TypeScript to be quiet. It's important for you to handle the cases TypeScript's telling you about. And with that, then, we've got our Vanilla Tilt options. So, let's stick the Vanilla Tilt options in here as the dependency. So, whenever those change, we will rerun this use effect and we will do this cleanup.

01:32 So, if we save this, now we should still be able to get the, whoa, yeah, it definitely is working. And when I click on the corner, it's resetting again. And so, if we added a couple console logs, I'll do that for you here really quick. Console log, cleanup, and I'll add another one right here,

01:51 console.log, setup. So, now we've got our setup and I click on this, we get a cleanup and then a setup as we already talked about. And we'll talk about why that is happening, but this is important for us to do this because if we don't include the Vanilla Tilt options right there,

02:10 then we can make a change to this and it doesn't actually change our results here. We only set up and we don't clean up and then reset up with the new options. So, it's important that we include those dependencies in there. Another option is we could just remove the dependencies altogether and now React will just run our use effects

02:29 and our cleanup every single time. And this is basically what our ref prop was doing. So, here this will actually work and we got a cleanup, we got a setup. That's what we expected, that's what we wanted when we changed those options. But, if we click on this, it's going to do that again. So, that's what we're trying to get away from.

02:47 We do want to have a dependency right here, but for some reason, which we'll discuss here momentarily, just including the dependency array here is not enough. We're still getting the same experience that we don't want and that's what we'll get into next. But, the main takeaway for you here

03:04 is that the dependency array that you have in here is actually critically important. You want to make sure that you're filling this with all the dependencies that you have. And in fact, it's so important that we have an ESLint rule that I have turned off for this exercise so that it didn't spoil things for us.

03:23 But, the Lint rule is going to make sure that you don't make mistakes here. And in fact, it's telling us why we're having a problem right here. We'll look at that here in a second. So, useEffect, dependency array, important. Anything that you actually depend on that could change, that is in here,

03:41 you need to include in your dependency array. I'll add a quick note that you'll notice we're not putting the tiltRef in the dependency array. And, the reason we're not doing that is because the tiltRef never actually changes. It's an object that stays the same forever. And so, it doesn't actually make a difference either way. So, the Lint rule isn't telling us not to do this. It doesn't actually make

04:00 too much of a difference because the tiltRef itself never changes. We could say tiltRef.current, but the problem with this is now the Lint rule is telling us that we have no way of knowing when this changes. The whole idea behind a ref is that you can change it without re-rendering.

04:19 And, if that's the case, then we need to refactor the code. Like, if you really want to know when this changes, you should put it in state instead. And so, we don't put refs or their current values in our dependency array because we don't know when those things change anyway. But, for pretty much everything else,

04:38 you want to stick that in the dependency array. And, my recommendation is just install the Lint plugin and follow its instructions because it pretty much knows what it's talking about. In addition, it's going to tell us, hey, you're missing some dependencies right here. If I command period, then it's going to tell me to update my dependency array.

04:57 And, poof, it can write some code for you. So, it is quite handy. Okay, that's enough there. Let's move on.