This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "useRef" Lesson
[00:00:00]
>> So let's go to ref.js here. Again, we did talk a little bit about this one in the complete Intro to React v7. We used it for our modal. And I'm gonna kinda get into the details here a little bit with of like, when and why you would use this.
[00:00:19] So it says useRef Example here. So I have this number here, which I have a ref and I have a set state number here, right, so a state, one of them is using state and one of them is using this useRef here, okay? If I click delay logging, you can say increments and delay logging, so what this does is it increments both numbers it's gonna increment the state number here by using set state.
[00:00:55] State number plus one, right? And then this ref thing is a container for state as well, right? So it's going to increment that as well. You can see here by the plus plus. Then it's gonna set a timeout, and it's going to alert you to what the current state of numRef.current and stateNumber is here.
[00:01:19] So if I click delay logging, what would you expect it to alert you to? I would expect personally if not coming into this blind to say I would expect it to alert one on one right because it's incrementing both things. However, it doesn't, it does 0 and it does 1.
[00:01:39] Let's talk about why. So, this numRef.current, this current is going to be the same across all renders. So if I click this a bunch of times you'll see a huge difference, right? This will be six and then this will be one. And then as I click OK, it's going to be you can see ref is not changing, but the state is incrementing over time.
[00:02:08] That's because across all renders, I'm getting the same number every single time. And that's the point of a ref is like, no matter what I want this to always be the most current thing, as opposed to state number here, this is gonna get captured in the closure, right?
[00:02:22] So you can see here I'm not actually incrementing the state number directly. I'm calling set state which is being given back to me by the hook. And therefore, when I call this increment and delay logging, it's capturing the state number here. In that current state, by a closure.
[00:02:41] Now splitting hairs here, for the most part, you really don't need to care, but where this comes into play is like if I need to have the most current thing across all renders no matter what all of the time. Or I need to have the same thing that would be another thing that reason to do that.
[00:02:56] The reason why we did this in complete intro to react V seven is we wanted to have the same div, right? So we actually created a DOM div programmatically, and then we inserted that into the DOM. And then later when we cleaned it up, we wanted to get the exact correct div later for us to clean up later, which was a perfect use case for this useRef.
[00:03:18] Okay, and then here you can see as we increment it, later when we go back to reference numRef.current, because this is getting incremented directly on the object that allows us to get the most current number. So again, you can see that here it's hilarious, you have state six.
[00:03:38] You can see here the state is rendering 10 because the state has been updated, but this delay logging was captured when we clicked the Button, right? Which is why we did the delay there. So it's a little mind bending, it's very niche in your use case, most people would probably never have to useRefs.
[00:04:03] But when you need it, you definitely need it. Which is why this one it's a rarely used but sometimes needed kind of thing, right? So I just wanted you to kind of be aware that it's out there. All right, any questions about that? Actually, I have one more thing to point out about this, numRef is an object and it only has one thing available to read.
[00:04:30] And write to it I think if you actually say numRef, let's put it up here actually, numRef.somethingElse. Equals five. I think it actually will yell at you. Can I clear this? In any case, you shouldn't the only thing you should ever write to numRef is current. It might just ignore it.
[00:05:18] Yeah, so look at that, despite the fact that I'm setting num ref something else to be five, it's ignoring this, right? And it's because it's a frozen object. The only thing that's available to read and write to is something or is current. Everything else is like cool. Ignore everything else.
[00:05:35] Just allow current to be written to you. Why did they do that, and why is it an object? Why isn't it just like a value is because they want it to be like an object so that you can use kind of the properties of objects that allow you to track that it's always the same object, right?
[00:05:52] So therefore, if I update it, it's gonna update across all num refs because I'm referencing seen the object. It's in JavaScript trickery is probably the best way to put it. Okay, questions about Ref?
>> Thought useRef was used in conjunction with the ref attribute on a DOM element.
[00:06:25]
>> It's one of the use cases but it's not all of the use cases of it. I know exactly what that person is talking about. And that's actually a very valid point that we hadn't really talked about. So let's say I needed to, let's see if I can do this off the top of my head.
[00:06:50] Ref equals, I don't know if this I have not used this API in a very long time. Let's say you'll have to look up at the exact syntax of that. Let's say I needed to refer to specifically this h1 right here from my code. You can actually assign a ref to it.
[00:07:14] Maybe it's this, all right, let's try this const my h1. Apologies if this doesn't work. We're pulling out of the memory banks here. And I say ref={{el} => myH1.current = el. And then here I say console.log(myH1). Wow, I'm impressed with myself [LAUGH] that was dangerous. Okay so this is another valid use case for using refs.
[00:08:05] Let's see I need to specifically refer to this h1 in my code because react is constantly creating and destroying things. And you don't really know the state of the DOM ever, right? If I said document.getElementByID. This h1, right? That might be it at the moment, but later it could be created and destroyed and you have no guarantee that that h1 is going to be the same h1 later.
[00:08:31] You just have the guarantee that like react is going to render it however you tell it, right? So let's say I'm integrating with something like a jQuery plugin where I need to be referencing specifically that h1. And it needs to be the correct that h1 all the time.
[00:08:46] The way you can do that is with this ref attribute, and this ref hook, and then I can make sure that it references the same one here, by giving it this ref thing. And now you can see here I have a handle on this h1 here. So that's that would be a use case probably a pretty good use case for refs as well.
[00:09:11] Good question, that took me down memory lane for a second. I hadn't done that a while. Yeah, question.
>> I've used a library called popper in the best interest free tool tips. And you have to do something very similar by adding a ref to an element. But there was something like the change between a class component and a functional component where using the useRef hook gets kind of broken Dean.
[00:09:36] I always get confused as to what changed between the two.
>> Well, I mean, you can't use hooks so you're gonna be have to, there is a way to assign a ref to it. And that one, it's been even longer since I've done that so I couldn't do that off the top of my head.
[00:09:54] Yeah, sorry, I can remember. You all are very lucky that I remember this. [LAUGH]
>> We can pass ref using forward ref only, right?
>> Yeah, we'll get into that. That's a different sort of, we'll do it here and imperative handle. Unless you're a library author, you really don't need to do that though.