Learn React Hooks: useRef - Simply Explained!

what's up guys Terrace cousin here back with another tutorial in this one we're going to take a look at use ref a very powerful hook that is used whenever you want to reference a value that is not needed for rendering make sure to watch until the end of the video because I'm really going to be covering everything there is to know about userf and also some very important points that if you do watch until the end I can promise you that you're most likely not going to have to need to watch another video on use ref ever again sound good cool let's jump on my computer screen and talk about use ref cool so use ref honestly I've thought about this quite a while and I think the best way and the simplest way to really think about this is think about ref as state something similar to state in the sense that you can hold and mutate values that are used in your component but the main difference is that unlike State ref does not trigger a re-render of the component and ref values are not used in the return body of the actual component it's not used for something that you're rendering it's a hook that is used for values that are not needed for rendering so the best way for us to really understand this is to look at the simple example that I have here and compare state to ref and see how they both behave and see the differences between the two so this application here as you can see is really simple it has a count from state right a discount variable here uses use state it is initialized to zero we have the set count of data function to update it and by the way if you're not familiar with ustate I have a whole video about that it's in the same playlist that you're watching this video now so if you're unfamiliar you want to learn more about your state make sure to go check out that video first then we have another count but this one through use ref and this one as well is initialized with a value of zero then we have this handle increment function which is attached to this button right here and when clicked it will first set the count to count plus one so update this State count to count plus 1 incremented by one and then it will do the same thing to the ref it will increment the ref by one now this dot current thing here is actually how you access values and how you mutate values in your ref the value of a ref is always going to be inside of this dot current property whatever the value is in our case it's zero it's a number if it was an input if it was anything else you would always access and mutate it with the dot current property so this line here 11 is just taking the value and it's doing plus plus which is Javascript notation for incremented by one so these two lines are doing the same thing just for both pieces of not state but both counts essentially and then we are logging the state count and we are logging the ref count right so let's see what happens if I do this if I open up the console and then clear everything what will happen when I press increment so I press increment and first of all the count has been updated to one because the count here is used in this return function and it's displayed here this is the count from the state so the state count we know that is now 1 as a result of me pressing this increment button if we look here at the console we're going to see that state logged as 0 and ref locked as one now this is very interesting and I want you to pay attention because this is really important that you understand why State logged is zero and why ref log this one so looking at this function here let's first talk about the state right we are incrementing the state and then we are console logging the state after it has been incremented just like I talked about in the video that I did on you State State updates one particular property that they have is that they happen and they trigger a new render a new render of the component and the updated value is only accessible in that new render so what react is going to do when we do this set count count plus one is it's going to update the state of count to count plus one it's going to then continue running the body of the function running any other hooks or anything else that we might have in this component right it doesn't stop rendering altogether just because we're updating the state it's going to continue to finish the work and then once all of the work has been done it's going to then trigger a re-render and that we render is going to have access to the new value which is how we're seeing it here on the screen right this is because the component has re-rendered since we press this increment button and in that next render we have access to the new updated value which is one however this console log here is not running in the next render it's still running in that first initial render when we click the button so when even though we did set count here that value as we said is only accessible in the next render and so this console log here is going to reference the old value which was zero right that is how you state Works only in the next render which in our case only when we press this increment button again will we then have access to the new value of that previous render so if I do this you see that now we have access to State one right that was the updated value of the previous render however as you can see now we're at count two right we're always lacking behind one render that is okay that is normal that is how you state works right but now if you look at ref it's different ref right logged one right off the bat and then I press the button again and it logged two right off the bat so it functions very differently than you state and that's okay that's expected ref will allow you to make updates and to read the updated value instantly without waiting for a re-render and the reason you don't wait for a re-render is because use ref doesn't even trigger a new re-render in the first place that's not what it's for if you need a new re-render then you have to use state if you don't then you use use ref that is what I meant in the beginning of the video when I said that use ref is a hook that is used for Value that is not needed for rendering that is how we're able to have access to this new value right away so when you increment the count of the ref here you can console log it right away and get access to the new value right away that is a property of ref of use ref now let me drive your attention to what happens if instead of discount here instead of the state count in our return function what happens if I replace this with the ref so I'll do ref.current counterf.current and then in the increment function I'm just going to get rid of anything about State because I don't want to trigger a re-render through state right I only want to manipulate the ref and see how our component behaves now so I'm just going to refresh so we have a clean slate and if I press increment the count stayed at 0 but the ref logged as one I press increment again the count still stays at zero but the ref locked at 2 right this is interesting but by now hopefully it should make sense refs do not cause a component to re-render and so if you were to use it inside of this return function you would not get the updated value because that does not trigger a component to re-render you would only get the updated value if you have something else that triggers the component to re-render for example if we re-added the set count here and then just refreshed we would increment again and now we would see ref1 and count one increment again ref2 and count two we're getting the most up-to-date value but not because of ref we're getting it because of State because of this set count here that is what is causing the component to re-render to trigger a re-render so that we get access to the most up-to-date value and so that's what I meant that you should never use ref inside of this return function because your application is not going to work as expected and you're going to use ref for something that is not intended to be used for and now let's talk about another use case of ref one that you might be more familiar with which is using it with input elements or any other HTML element in this case I just have a simple ref which can be of type HTML input element or null and then we are passing it here to this input element inside of the return function so this is fine right we're not using dot current here we're just passing the reference of the ref to this input opponent and this is allowed this is one of the only use cases where you can use a ref directly in the return function and the reason you do this is because if you do that react is going to handle setting the dot current property of the ref to the input as long as it's mounted right the moment that the input becomes unmounted whether the component unmounts or some other reason react is going to automatically handle removing the dot current from The Ref right so you get that benefit if you do it this way and doing it this way right you have a ref you pass it here to the input you can then access some of the functions from that input like for example this Focus function right here this use effect what we'll do is when the component is mounted and everything else is rendered because hooks always run after things are rendered this input ref will be set by react automatically to this input and then you can call input ref.current question mark right because we've defined it as a type that it can't be null right so typescript does doesn't know that react will automatically handle this for us but you can call the focus function on this input on Mount right which is going to focus here if I just refresh the page it's going to automatically Focus the input on month which is a very useful thing to have in an application perhaps you have a form right and you want to facilitate the user experience by having the first input that makes sense be automatically focused on mobile that's also going to trigger the keyboard right this is a feature that you would want you would have to use a ref to accomplish that feature so refs beside using values that are not needed for rendering are also useful if you want to access directly HTML Dom elements and call functions on those elements you can also use it perhaps you've used it as well with third-party libraries that create a ref and then expose that ref along with some functions so that you can access from anywhere the functions of inside of that component that is also a use case for ref although that's not usually one that you would write yourself you would just more generally create a ref and pass it and then by the documentation to Sweet of the different functions that you can call and work on it that way still refs are a very powerful feature in react and you really have to spend the time to understand how they work what they're used for what's the difference between ref and state and how you can use it with elements and also in third-party libraries please take the time to really focus and pun intended right Focus really focus and understand what ref is and how to use it and you will be a much better react developer cool so there you go another tutorial in the books this was used buff I really hope that now you have a better understanding of this hook and how to use it and you can now go and work on it in your own applications try it out try the difference between that and state and like I said you will become a much better developer spend all the time that you need and that is required to really properly understand this if you've enjoyed this video if you got any value from it whatsoever please do make sure to leave a subscribe leave a like because it really does help me out a lot it shows me that you enjoy this type of content and that you want more and trust me as you can see I'm publishing a lot of these tutorials and there's a lot more coming I love doing this also if you want to learn more about react and just be part of a community of react developers and also have access to me to answer your questions look at your code help you become a better developer I've created a Discord for react developers there's a link in the description you can join it's completely for free we have about like a hundred members and growing and I'm there every day answering questions reviewing code and I'm trying to create the best community of react developers on the internet so if that's of interest to you there's a link in the description make sure to go there and join and I would love to see you on the Discord with that being said my name has been there as cousin this is cousin Solutions it's been an absolute pleasure and I'll see you all in the next video ciao

Channel: Cosden Solutions

Views: 56,156

Keywords: react tutorial, react crash course, react developer, learn react, react hook, react hooks, react hooks tutorial, programming tutorial, react hooks explained, computer science, tutorial for beginners, react component, learn programming, web development, frontend development, coding for beginners, simple code, easy programming, useRef hook, useRef tutorial

Id: 42BkpGe8oxg

Length: 12min 42sec (762 seconds)

Published: Thu Jun 01 2023