‫It's time to introduce yet another React hook.
‫And this time is the useRef hook.
‫And, fortunately for us,
‫this is one of the easiest hooks of all.
‫And so let's now take a look.
‫So we use the useRef hook to create something called a ref,
‫but what actually is a ref?
‫Well, ref stands for reference,
‫and essentially,
‫it's like a box into which we can put any data
‫that we want to be preserved between renders.
‫Now, in technical terms, when we use useRef,
‫React will give us an object
‫with a mutable current property,
‫and we can then write any data into this current property
‫and, of course, also read from it.
‫In this small example, the current property was first set
‫to the initial value of 23,
‫and we then changed it to 1000.
‫So, as you can see,
‫this current property is actually mutable,
‫so unlike everything else in React.
‫But what's really special about the refs
‫is that they are persisted across renders,
‫so their current property value
‫stays the same between multiple renders,
‫so just like state.
‫And this gives us two big use cases for refs.
‫First, as we just said, we can use refs to create variables
‫that will stay the same between renders.
‫And useful examples of this
‫are preserving the previous state
‫or storing the ID of a setTimeout function.
‫Now the second use case is actually far more important,
‫which is to select and store DOM elements.
‫So this is what we attempted to do in the last lecture
‫and which actually brought us to this lecture.
‫So, just like the ID of a setTimeout,
‫a DOM element is also a piece of data
‫that we want to store and preserve across renders.
‫And so refs are perfect for this.
‫Now refs are usually for data
‫that is not rendered individual output of the component.
‫So usually refs only appear in event handlers or effects,
‫but not in the JSX.
‫Now, of course, we can use refs inside JSX 2,
‫but usually that's not the place for them.
‫If you need data that participates
‫in the visual output of the component,
‫that's usually a good sign
‫that you actually need state and not a ref.
‫And, speaking of state, just like with state,
‫you are not allowed to write
‫or to read the current property in render logic
‫as that would create an undesirable side effect.
‫Instead, we usually perform these mutations
‫inside a useEffect hook.
‫Okay, now, I've hinted a couple of times
‫at all the similarities between refs and state,
‫which is because these two are in fact quite similar.
‫So let's now analyze what they have in common
‫and what's different between them.
‫So, in a way, we can say that refs are like state
‫but with less powers.
‫So what they have in common
‫is that they are both persisted across renders.
‫So the component remembers these values
‫even after re-rendering.
‫The big difference is that updating state
‫will actually cause the component to re-render,
‫while updating refs does not.
‫So the big takeaway from this
‫is that we use state when we want to store data
‫that should re-render the component
‫and refs for data that should
‫only be remembered by the component over time,
‫but never re-render it.
‫And this is basically, also,
‫what we already learned back in the lecture
‫on the "Fundamentals of state management."
‫So, remember, that this diagram is taken from that lecture.
‫Now, back then, we didn't know what a ref was,
‫but now we do.
‫Now, going back to the examples of preserving previous state
‫and storing the ID of a setTimeout,
‫these are pieces of data
‫that we want React to remember between renders,
‫but we don't want them to re-render the UI
‫whenever we update them,
‫and so that's why we use refs for this kind of data.
‫So this is the main distinction between state and refs,
‫but there are also some minor ones.
‫So, as we also just learned,
‫state is immutable, but refs are not.
‫Also state is updated asynchronously,
‫which means that we cannot use the new state
‫immediately after updating it;
‫with refs, on the other hand, updates are not asynchronous,
‫and so we can actually read a new current property
‫immediately after updating it.
‫Basically, just like any other regular JavaScript object.
‫Okay, and that does it for this video.
‫So see you back in VS Code.