00:00 Well, because this is not a Vanilla Tilt workshop, we're giving you a lot of stuff. So this is coming from MartyTheMoneyBag, giving you all this information. We are not going to be just importing the type, we actually need the value, so I'll fix that. So we're getting Vanilla Tilt, we're making an HTML Vanilla Tilt element,

00:18 which extends the regular HTML div element, because the element ref, the DOM ref that we're creating is going to have this property on it so that we can use it for cleanup. So then we have our Vanilla Tilt options, and with all of that set up, now we can grab the

00:35 DOM node for this div and turn it into a Vanilla Tilt element. So we're going to say ref equals this Tilt node, and it is an HTML Vanilla Tilt element, or it could be null. In certain versions of React, in the current version of React, they will call your function with null when the component's being unmounted.

00:57 That is not going to be the case in future versions of React, and we don't need to worry about it here because we have the cleanup function. But this is something that we need to handle as far as our types are concerned, and making sure that this is backward compatible with old versions of React. And so we're going to add if not Tilt node, then return.

01:16 If there is a Tilt node, though, then we can use Vanilla Tilt to initialize on this Tilt node with these Vanilla Tilt options. And then finally, we need to handle cleanup. So if I save this right now, and then I get my cool Vanilla Tilt interaction going on,

01:32 because now we've got our Tilt node initialized and everything, I can still increment this. But if I toggle visibility, then those event listeners that Vanilla Tilt created are still going to be around. We're going to have a memory leak, and if you want to,

01:47 feel free to pull up your memory dev tools and all that stuff, and you can observe that yourself. But I don't want to deal with that, so we're going to return a cleanup function that calls Vanilla Tilt destroy on that Tilt node. So this is why we have our own instance here,

02:05 or our own interface, so that we can interact with Vanilla Tilt just like this. So if we save that now, we will correctly be cleaning up. We can add some console logs if we want to. So console.log Tilt node, and in our cleanup,

02:22 let's just add a console.log cleanup up right there. And save that, pull up our dev tools. We've got our Tilt node right there. Looks awesome. And then toggle visibility, cleanup, and then there we go. And every time we click this, every time we render,

02:42 we're going to be reinitializing Vanilla Tilt. So we return the cleanup, Vanilla Tilt gets destroyed, and then we reinitialize it again, which is something we're going to be looking at later on in the exercises. But there you go. That is using refs. Here, let's get rid of some of these

02:59 logs. We pass a ref prop to the div that we're interested in. We get a reference to that DOM node. In our case, we want a special type of element. But typically, you do HTML DOM element

03:13 or a div element, or in fact, the type should be inferred for us automatically anyway. So if we don't specify anything, it's going to be an HTML development or null. Of course, if we change this to a span, then that is going to now be an HTML span element. So that's kind of cool. Thank you,

03:29 TypeScript. But in any case, or in our case, we want to have a specific type of element. So we're going to type that specially. We're going to handle the null case for backward compatibility reasons. And then we'll initialize our Tilt node. So this is where we're making a mess of the DOM

03:46 after React is done doing its thing. And this is where we clean up our mess that we made between renders and when this thing gets removed, which we can do right here. Boom. Toggle visibility, clean up. Ta-da. So, awesome work.