Learn useRef in 11 Minutes

in this video I'm gonna be covering the most misused react hook but it's also the most flexible react hook and that is the use Ref look and I want to try to prevent you from making many of the mistakes that I see developers make all the time with the use red hook while showing you everything that it can do also if you want to learn more about react and how powerful react can be make sure to check out my full react course I'll link down in the description where you can learn everything you need to know about react to go from knowing nothing to being job ready let's get started now welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure you subscribe to the channel for more videos just like this now to get started I have probably one of the most basic react applications open we just have simply some state for a name as well as an input that changes that name and when we update that name you can see it prints out down here where it says my name is and then whatever the name that we actually print out is so a really basic react application and in order to start talking about what use ref is instead of getting into the nitty gritty details of the implementation of it I want to talk about what you would want to do if you wanted to show the number of times a component rendered on the screen so if we wanted to have another div that says I rendered and then some variable and here X x how would you go about implementing this well most people would think okay go I'm going to create some state variable called rendered count and set render count we're gonna you know set that to use state and we're going to default it to zero and then every time we render our component we can do that instead of a use effect so let's just make sure we import use effect here oops use effect just like that so now what we want to do is every single time that our componentry renders which is just a basic use effect we want to set our render count to render count oops previous render count and we want to do previous render count plus one so this would correctly update our render count and we could print that out down here render count sort of correctly update our render count every time we render our component but a huge huge red flag with this is that when you update your state you cause the component to re-render so the first time I component renders is gonna set this state which causes it to re-render and then just gonna set the state again and re-render and re-render and re-render and re-render essentially you're setting yourself up inside of an infinite loop I'm not actually gonna save this or run it because it will throw an infinite loop and I don't want to deal with that but just know that state is not the way to do this because you can't do it with state there is no way to do that because state will just cause you to get into that infinite loop the solution though is to use something called refs a ref is very similar to state and that it persist between renders of your component but the important thing to note about refs versus state is that a ref does not cause your component to re update when it gets changed so instead of using a state here let's do something called a use ref and we again pass it our default just like this with zero but instead of returning two values it's going to return just one single value we're gonna call undercount and the important thing about this is this actually returns an object and this object looks like this it just has a single property called current and it's going to by default to set that current value to zero because that's what we passed in to use ref here so a render count is just an object with a current property and when we update that current property that is what gets persisted between our different renders so instead of here we can take our render count and we can take the current property on it and we can just set that equal to render count dot current plus 1 now if we save you can see we're getting an error we just need to make sure we import our use red hook and now if we save you can again see we're getting another errors saying objects are not valid as react children and that's because as you remember render count is an object with a current property so we need to access the current property of our render count down here now if we say you can see it says I've rendered zero times really we should probably default this to one there we go now if we change our name this will actually update our render count so change that you can see now as I've rendered two times three four five six every time I rerun to that component this number is counting and the important thing to note is that we can change this render count current as much as we want as many times as we want and we'll never ever cause our component to re-render because it's completely separate from our component render cycle so the important thing about ref is it's very very similar to state and that you can store a previous value in it and it persists between different renders but it does not cause you to re-render like state does so that's the basic use cases for using refs but probably the biggest use case that people are going to use rest for is to reference elements inside of your HTML and this is actually so popular that each element inside of your document has a ref attribute and you can set that to any ref that you want so let's just get rid of all this render count stuff now let's created the ref here for our input will say Const input ref is equal to use ref and then we can come in instead of our ref here and say input ref so now whenever our input ref gets rendered on the screen it's going to set this input ref variable equal to this document element right here this input and now all we need to do is let's say that we want to on button click update our input ref to actually focus it this is a really common use case so instead of all this render stuff down here let's change this to a button that's going to say focus just like that's when we click this focus button I want our focus to be put inside this input so we can start typing so all we need to do is say on click what we want to do is run a function we'll just call focus and up here we're going to create that function called focus and all this is going to do is take our input ref remember we need to get the current property of that and that is going to be equal to this input element right here for now let's just console.log bet so you can actually see what that looks like it's going to be just like if you access this from JavaScript so we click focus we're going to inspect our page go to the console and you can see we get that input value here is exactly the same as if you were to use document query selector for example to get this input it gives you the exact same dom node so now we can do instead of logging this out we can just call here focus and now just clean this up a little bit and now we save we click this focus button and you can see my focus gets immediately put inside this textbox to start typing like I said this is the most common use case for refs which is why either is this ref attribute which makes this incredibly easy to do with react and hooks but because this is so easy people tend to abuse this power instead of letting react manage all of your state and all of your values and your on changes people sometimes use refs in order to do this on change stuff so instead of using state and using the on change to update your state inside of this ref they would you know say input ref dot value equals some value and again just make sure this is current dot value and then when you click focus it's going to update the value of your input here but it doesn't actually update your state and you can tell that because the my name is section did not actually update because our name variable in our state never got changed we just manually set the value of this input ref so this is something that you never want to do interact you always want to do all your management through react State or react props instead of manually setting these values same thing if you were to do something like append a child you don't want to worry about a pending child or adding child or removing child's that is all something that you want to handle with react and with the actual JSX and do not do that with refs but this is something I see all the time so I want to warn you because these are mistakes that if you make it's going to make your code so much harder to work with and so much harder to use so we talked about how refs can be used to store values persist them across vendors and also how it's most commonly used to reference input elements such as like this or other Dom element on your page another great use case for refs is to store something like the previous value of your state because there's no way to get the previous value of state it's just always the value of state so what happens if you want to store the previous value of your state well that's actually fairly simple to do we can come in here say use effect and this is just going to be a function and we want to run this every time our name changes because we want to store the previous value of our name inside of a ref so we can just say previous name it's going to be equal to use ref we're going to leave this blank to start with and then here we can say previous name current is going to be equal to our name and now we just get input ref section and we can say my name is name and it used to be previous name just like that and if we save again we need to make sure we do previous name dot current something that I always forget and now we can see my name is blank and it used to be so if we type in a you can see my name is a and it used to be blank type in P you can see my name is a B and it used to be a and same thing here we're always storing the previous value of our name inside this previous name variable and this is really great to use because if you're using State for example when you wanted to set your previous name instead of a state variable it would cause your component to re-render again but by using refs here we're actually not causing that additional rerender which we don't actually need so refs are really useful for not only accessing dom elements but they're really useful for persisting values across renders without actually causing a rerender and that is in my opinion the biggest use case for refs because otherwise inside of a function component there is no way to persist values between renders in a class component you can use class variables and such to persist values between renders both function components you need to use refs in order to persist a value between renders if you're not using state and that's all there is to the used breadth hook if you enjoyed this video make sure to check out my full in-depth react course linked in the description below to learn even more about react and I hope you have a great rest of your day thank you very much for watching

Channel: Web Dev Simplified

Views: 187,444

Rating: 4.9783893 out of 5

Keywords: webdevsimplified, react hooks, react tutorial, react js tutorial, react hooks tutorial, react hooks project, learn react hooks, learn react js, react beginner, javascript, js, learn useref in 11 minutes, useref, react useref, react js useref, useref hook, react useref hook, useref tutorial, reactjs useref, react js useref tutorial, use ref react js, learn react useref, react dom ref, react ref, react useref js, react ref hook, react ref function, react dom reference, ref

Id: t2ypzz6gJm0

Length: 10min 20sec (620 seconds)

Published: Tue Jun 09 2020