React Hooks useRef Tutorial

so we're gonna be taking a look at the use ref hook now this one we're gonna start with the most obvious use case which is storing a reference to a component say an input field or div or something and then being able to reference that node in your application so for example what we're going to do is I'm gonna make a button and whenever I click the button it's going to focus the input field here and so we can use a reference for that and then we're going into some of the other use cases you can use user f4 alright so let's start with the thing that you're going to use it pretty much the most for so I'm gonna say Const input ref so we're going to create a new variable and I'm going to say use it ref here so this is our new hook and I'm gonna say use ref and import it from react so now what I do with this is I can pass this to whatever component I want to get the reference of it so in case my input field here and this works pretty much the same as create reference if you're used to class components that react so I pass it in here and then I have reference to this input field now so what I can do you have a button that says focus and we're due on click and I'm just going to start by logging what the input ref is now you'll notice we have to say dot current to get the current value of the reference so I'm going to say click and you can see I have reference to the input Dom node if you will and we can do whatever we want with that we could call any methods on there or read the values of stuff what I'm going to do is I'm going to say dot focus on it and so I'm gonna come over here and when I hit focus you see my input field is focused over here so that's the main use case I would say for use ref or the one that I used most is getting reference to some kind of react component and then being able to use that somewhere in my application where I need to like comparatively call stuff and this will not cause a rerender for example just focus or if we need to do any getting value like get the bounding get bounding rectangle I think I forget the name of it we're not gonna be able to call it but you can do all kinds of stuff with that the next thing I want to go over is and then I just keep the dot focus there is the other stuff you can use the reference for this is basically anything you want to store a reference to it doesn't have to be a Dom node or a react component I guess we can store for example integers in here so what I'm going to do another use case I use for it it's to store the number of times a component has rendered so while we do this for the Hello component let's bring this back so I'm gonna say renders and I'm gonna store a integer inside of this reference so let's import it and then all I'm going to do is just console.log and I'm going to say hello renders and I'm gonna say this will just render I mean just say dock turn to get reference to the zero there this is just gonna render zero every single time what I'm gonna add is plus plus so it increments every time the console log is shown now the thing about this current is we can update the value of it whenever we want to and it's not going to cause a rerender so if you were to have like instant variables on your classes this is the same use case you can put stuff on there like that which is not tied to react tree rendering for example instead of putting in your state you can store in a ref if you want to all right so let's just uncomment this right here oops and take a look at that all right I need to just uncomment these one at a time I think there we go let's add a show hello back and we're gonna say you state true all right so we can clear all this stuff and of course as I'm typing here we can see how many times Hello is rendered we can toggle it off it's gone tall it back it restarts there and again we can sort every one this so it doesn't have to just be numbers it can be objects it can be functions whatever we like so another use case that I use for this is with you use fetch so it's helpful to know whether a component has unmounted and so we can prevent an error when we try setting State on a component that is has been unmounted so what do i mean by that well let's basically cause an error real quick so I'm gonna move the logic of calling the API and displaying the numbers over here I'm gonna move it over to our hello example so I'm gonna just move this right here and copy this all over and let's import use state use effect and we can import our use fetch and I'm going to just bring that over to my hello example oh dang it I undo copy again okay so now I'm basically just put all that code inside of hello here and the reason why I'm doing that is I want to unmount hello while the data is loading and then we try updating the state and that's going to cause a problem so I basically want to make this extra slow so the way I'm going to do that is I'm gonna say set timeout and we're gonna wait for some amount of time let's make it two seconds and then we are going to update the state all right so let's let's take a look at our example here so now if I increment it's just gonna take a second and then this should update and let's go to our hello we're kind of done with this example here I'm gonna comment out the use ref for that alright so let's go to our problem now so the problem it occurs is if I increment and then I toggle this off well also if this fails so let's refresh and try that again all right so we're gonna increment toggle this off so you'll notice what happens is it's going to try updating the state when the component is gone and we get this little warning and react so if you've seen that warning before that's why you tried calling set state when the component is gone so we can use references to help us solve this problem so now what I can say is I can say Const is current is usually the name I'll give it use ref and we're gonna put the sign inside of our use fetch hook so by default I'm gonna say it is current so I'll say is current is true and then I want to say use effect and I'm gonna say empty bracket here and I'm gonna return a cleanup function so this function is only going to be called called when the component is going to unmount and so we're gonna just say is current dot current is equal to false and so whenever this value is false we know the component is about the unmount so in our code right before we set set state we can say if is current current then we call set state so what's gonna happen is it's gonna load the value just fine when we increment here but now if I increment and I toggle it off what's gonna happen when the data loads is it's no longer going to call set state because the current value is false now you could also go about trying to cancel the fetch statement but this is another way you can know whether the value the current component has been unmounted yet is you can store that in iraq so that's basically the basics of user F you can store whatever value you want in here and then you access it with dot current we didn't do an example with functions but again I could store a function here that I like we can console let's do is let's just make a function real quick and see what that looks like let's go to our app here and we're gonna say V the hello function and we're just gonna console.log hello and so there's some use cases where you want to put this stuff on a ref that comes up so we can say hello doc current and call it like that so now when I push focus it's going to say hello and focus at the same time and again we can store objects whatever you like treat it as you would for example on a class component fields or instant variables that you would store on the class as opposed to stuff you'd store in the state but there you go that is an introduction to use ref you

Channel: Ben Awad

Views: 76,116

Keywords: useRef, useRef Tutorial, Hooks useRef, React Hooks useRef, React Hooks, React, React Hooks useRef Tutorial

Id: W6AJ-gRupCs

Length: 9min 22sec (562 seconds)

Published: Mon Jun 24 2019