This course has been updated! We now recommend you take the Intermediate React, v5 course.

Check out a free preview of the full Intermediate React, v3 course:
The "useRef" Lesson is part of the full, Intermediate React, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Brian discusses how the useRef hook holds a piece of state through multiple re-rendering cycles. A student's question regarding if useRef contains the original or a copy of the object is also covered in this segment.

Get Unlimited Access Now

Transcript from the "useRef" Lesson

>> It's going to use ref which is we're gonna go to the ref component which is this one down here. This is kind of a funny one. We talked about it a little bit in the complete intro to react vi six. Towards the end, in fact is literally the last section the portals and refs.

[00:00:23] So if you have a piece of state that you want to survive past various different rendering cycles, you can use ref. So in the complete intro to react version six, we use that with modals, right to keep track of a div. So it's basically a container that doesn't get modified from the react lifecycle methods but But it actually just kind of lives outside of that.

[00:00:51] So, I just wanted to show you the difference here. We have this num ref here, which starts at zero and we also have a piece of state here that starts at zero as well. Every time that someone calls, presses this button here called delay logging, it's going to call a function that's going to say, here's what my current state is and here is what my ref is.

[00:01:17] Notice those are different numbers so here I say set state state number plus one and then I say num ref current plus plus. So every ref inside of it has exactly one thing it has. Num ref.current. And this is using the property of JavaScript that if I have a handle on an object that it doesn't change, right, the object is stays the same.

[00:01:45] So you're gonna be handed back the same object every single time. In fact, if I say, console.log How would you do that, but if you checked between renders that if the previous number of current and the next number of current are precisely the same thing, they would be exactly the same object.

[00:02:07] Right? Not even just like equal in value but also equal that they are identically. Identities is referring to the same thing. So this comes in handy in a very specific few cases. So again, this comes in handy for things like holding on to a div between render cycles because sometimes I need to dispose of that div later, right or I need to hold on to a subscription so that later I can dispose of that subscription.

[00:02:39] In this particular case, I want to show you how these look end up looking different because if you press delay logging, what this is gonna do is it's going to schedule a timeout here, right? You can see that and then it's going to alert What is the state number?

[00:02:52] And what is the num ref current state is actually going to change immediately because it's going to say set state. But this num ref or rad it's going to be the other way around the state number is going to not have changed, right because that's going to have been previously scheduled and the number of current will have changed.

[00:03:10] So if I click delay logging here Notice here on the page on the right, state and ref are one, but here's a state zero and ref is one. That's because when it was scheduled state number was zero, right? And so re renders and it immediately renders and state is one and ref is one.

[00:03:30] But that's because ref has already been advanced because I did that num current plus plus or num ref current plus plus. And the state number stayed the same because it's it's using closure to hold on the previous state of it. Now if you're looking this is like why would I ever use this?

[00:03:44] The answer is not frequently I would say most react applications probably don't need to use refs that frequently. However, when you need it You desperately need it. So it actually is a tool that you probably need to be peripherally aware of. Again, we saw that in a previous one with our plugin the complete intro to react version 6, because we had to have it for modals.

[00:04:04] So it makes sense. Does anyone have any questions about this? I mean, you can see here you can make it really apparent here. This ref is one and the status four right as you can actually if I clicked it several times in a row, that's going to be updated.

[00:04:19] And if I click Oon a you'll have two, Three, four, but it's just catching up from the previous ones.
>> If I put an object in useRef, does ref contain a copy of an object or a reference to that object?
>> It's good question. So if I say like Is it a copy of this object?

[00:04:42] So the question is if I put an object into the ref, does it contain a copy of the object or is it actually the same object? Then the answer is it's actually the same object. It does not do a deep copy for you, it's that you will actually be holding on to that particular object.

[00:04:59] Yeah, just keep ref as a container. You can put anything in there. You can put objects, you can put functions, you can put libraries, I don't know why you would use it for any, like libraries and things like that, but you could definitely use it for functions. I can see reasons to do that.

[00:05:16] It's just a container. You can stick whatever you want in the container as you can see and again in the the complete intro to react version six we put literally a div, right like we put an HTML object into the the ref so that we could reference it later so that we could remove it from the DOM.