00:00 We've talked about side effects already, but some side effects are different than others, and there is a particular side effect that involves working with the DOM directly that we want to talk about in this exercise. So we've got this cool library. That's vanilla tilt library. It makes things kind of fancy. It's just kind of interesting. And

00:18 it is a vanilla JavaScript library, meaning it doesn't have any dependencies on third parties. It's not integrated with React, but we want to integrate this library in our own application because we don't want to write this ourselves. We don't want to make our own version of this or whatever. So we need to

00:36 talk to the DOM directly, or maybe even if we were going to build this library ourselves and interact with the DOM, we'd be interacting with the DOM directly anyway. So we need to have a mechanism for updating the DOM after React has done all of its stuff, because not everything we want to do is encapsulated in a declarative API. We need to work

00:54 imperatively with the DOM sometimes. So this is how you do that. You have a ref prop on a div, and this will give you a reference to that DOM node once it's created. You need to remember that when you call React.createElement, you're creating a React element. You're not creating a DOM element. And so you don't actually have a

01:12 DOM element until React has finished rendering, which doesn't happen until you call render. So once that rendering is complete, then React is going to call this DOM element. So once that rendering is complete, then React is going to call this ref callback function. So then you get your div, and then you can return a cleanup function, and this allows you to

01:30 clean up. And we learned earlier how important it is to clean up so you don't have a bunch of data sitting around or memory leaks, all that stuff. So this is the preferred mechanism for handling refs. Anytime this re-renders, you're going to get this called again, and you're cleaning up the DOM.

01:49 So you have to keep that in mind, that every single time this re-renders, this callback and its cleanup are going to be called. But there is another way to do things, and this can be a little bit more optimal, even though it's kind of a little less direct. It's a little indirect. And that is to use the useRef

02:09 hook. This is another hook that we're going to be exploring in this exercise. So useRef is similar to useState, where it gives you back a fixed value that you're going to get back every time it's called, except useRef doesn't have a special function you call to update that state. Instead, you mutate it directly.

02:27 So useRef gives you back an object that has a current property, and you reassign that current property any time you want to change it. And what this allows you to do is make a change to something that doesn't trigger a re-render. And so that can be valuable in certain scenarios like this one

02:45 where that current property is going to get assigned for us by React. So instead of passing a callback to this ref prop, we're going to pass this object from useRef to there, and then React will assign the current property to that DOM node when that DOM node is created.

03:03 And then inside of our use effect, we can access that. So this is another way to do things. There are two ways to manage these refs. I should mention also that useRef isn't only useful for working with DOM nodes. It's also useful for all sorts of things.

03:22 And we'll be using useRef for various things in our upcoming workshops as well, especially the patterns workshop. We're going to be using useRef as well. But yeah, these are the two mechanisms. In this exercise, you'll kind of get an idea of how to use useRef versus the other because we're going to evolve from one to the

03:41 other and kind of see the use cases that they serve. It's going to be super duper fun. I'm excited to get going. So let's do that right now. Let's get going. See you in the exercise.