useRef hook in reactjs | Easiest way

hey there everyone hitesh here back again with another video and in this video the simple goal is to make sure that you understand use ref hook in react now you might be using this hook already in your production apps or your fun apps but the goal of this video is to make sure to give you full rundown of this used ref hook so that you can actually decide that what is the correct and optimized way of using it or not using it by the end of this video you'll get a full clarity of why this hook was designed and how to use it properly and what to expect with this hook now obviously this video is going to be a little bit longer than tick tock videos so to all my goldfish friends this is going to be a little bit longer video so stay tuned [Music] now in the first part of the video i'm gonna give you some rundown of basics and theory and a little bit of discussion and in the second half of the video i'll take you to the computer and we'll design a very simplistic user f implementation so that you can actually understand that why this hook was designed and how you can use it so let me first start by a simple thing here that i can totally understand that no matter what tutorial you watch or what article you read everybody compares use state and used ref hook which is not an ideal condition state because if the used state hook is north then use ref hook is actually south they can be considered quite almost an opposite and i'll take you on to that and again remember i said almost opposite not entirely so i'll come back on to this a little bit later in the code part now before we move there first thing that you need to understand is a little bit of history this history will help you to understand this use ref hook so history lesson so in the time when this react thing was not even present on the internet still applications were being designed in the javascript now one of the core concept in case you have followed my javascript series on youtube as well one of the thing we used to do and still do in the javascript is that there are so many elements on a web page buttons input forms list item and bunch of other things as well now sometimes we might want to manipulate these item so we use something known as getelementbyid getelementbyclass and getelementxyz and we used to take a reference of those particular elements from the web page or dom elements and store them in the variable now these variables were later on being used to change css to add siblings to a child to that component and a whole lot of things now this practice is really really deep rooted and still a lot of developers take advantage of this quite a lot now the only issue with this approach was that whenever you do any manipulation or something it just re-renders the entire dom element and there were so many issues that use we used to handle why other variables and stuff now with the k when the react came into the picture a lot of things got changed and that is why this used ref hook was designed because so far there is no easier way of giving a reference of that element and holding that in a variable so that you can manipulate it or pass on to another component so the core ingredient of this used ref hook is to store the reference of an element remember i said element not the value for the value we use this use state hook now another major thing that you need to make sure that you always remember is that use state hook is responsible for re-rendering that particular dom element but in the case of user f hook your dom element any of the dom element no matter how many changes you are making in user f it never re-renders it and i'm not saying it this is right here in the documentation and you can see it says that keep in mind that user f doesn't notify you when its content changes mutating the dot current property doesn't cause a re-render i'll come on to this dot current in a minute but you get this idea of how and what it is saying now other thing that you need to understand is let's compare it with the use state in the use state hook you can actually create any initial value null 0 any string any object not in the case of use ref just remember this one more thing that user f returns a mutable reference object object very important and this object has just one property in it dot current which you can use it to initialize it and do a whole lot of things so hold to a summary of this whenever a user f hook comes up you need to just remember two things first that it is an object and that object has a dot current value that you can access simply dot current second thing that user f never never ever re-renders the dom element no matter how many time you manipulate it just do anything with that although you can use user f hook to store values and stuff but that is not what it is designed for for that we have already got state use state and that is why we actually do all the manipulation with the numbers and values basically variables in that hook now that you understand these couple of things now let me take you on to the computer give you a simplest and basic example now one more thing before we go there you're going to notice that in the documentation they say input element.current.focus so just because in the documentation they have shown you oneproperty.focus doesn't means every tutorial need to talk just about the focus every article on medium dev all just talk about focus but i'm going to give you a different example so that you can get more open eye view on why this is here and what actually you can do with it so now let's go ahead move on to computer okay so this is the bare bone react app whenever you create npx create react app this is what you get absolute basics i haven't even touched it yet now let's move on to the code file and this is all running up and running so what we're going to do now is if i open my index.js this is where an app is being imported and is being rendered so this is kind of a very basics we have seen i'm not going to be creating too much here to make sure that we focus on just the used refs so i'm going to go ahead and just comment this out and instead of bringing up this i'm going to go ahead and simply say hey you're going to get this app variable directly from here and i'm going to go ahead and say i can just go ahead and say return and there we go in the return let's go ahead and put up a simple h2 that says lco and i'm also going to go ahead make sure it doesn't collapse on itself i'm going to go ahead and say span and i'm going to say hi just add a space let's save this one and see how is it looking like so probably i need to do a refresh and we see lco high so this is working fine there is nothing too much we have done now since we're going to be talking about used ref and use state just put a comma and bring them up right up here so first thing we're going to talk about is use date the second one is use ref okay now how we're going to talk about them in order to talk more about them we need to create a specific scenario because otherwise talking about it just would be theory so let's create a specific scenario we're going to create two inputs here so rather than have this let's create an empty element here there we go nice and easy and in here first i'm gonna go ahead and put up a simple h2 and i'm gonna just put up any text up here doesn't matter and now we're going to have an input box now notice the scenario the first input box is actually a number so we have got this we actually technically don't need name and id since we won't be doing much up here so that is the most basic but there's going to be few things we are going to enter here the first thing is that there is going to be a value here so what this value actually is going to hold up right now nothing whenever we need to hold value and to manipulate those values this is where the use state hook is being used so let's go ahead and create a simple uh state up here and as i mentioned these states are really simple so we go ahead and create an array and this is how we use state so we're going to simply say use state we provide an initial value let's say a number probably zero the first argument in this array is actually my num which can be any variable and the second argument is a method you can call this one as superman nobody is going to be bothering you but the ideal good practice is to call it as set my num but again feel free to call it anything now what is going to happen is whatever the value comes it into this i just want to go ahead and use state for that and that is usually the ideal case that is how you should be doing the things okay now we're going to go ahead and just use two input boxes up here first so that we can talk more on to this later on so go ahead copy this and we are going to have another input box up here okay no problem we can have the input box now we are also going to go ahead and have a simple h3 here so let's go ahead and have an h3 after this and we're going to simply say value is and just after that we're going to inject available and the variable name is going to be my num so whatever we are going to change the value in the input box will be displayed up here but there's a little bit more to it we are also going to need two buttons here so we're going to go ahead and say i need to button button and the first one is going to say rupees i'm really running out of the names here so i'm going to just name them as rupees and dollars okay no problem now obviously we have buttons so bear with me a little bit more we are going to need two of the methods as well so let's go ahead and manipulate the things now this was an input for number this is going to be input for text okay interesting now let's create two simple very simple methods up right at the top the first one is going to be saying get num box and this is going to be a simple method just like this we have created this so many and in all of them we are going to simply go ahead and simple let's just say hello and there's going to be another one which is going to say get text box and this is going to say probably world okay now just bear with me here we want to have an on click so we're going to have an on click there we go just like this and we are going to go ahead and say that i want to run one method on one another one here so we're going to simply say get num box and there we go we run that we can actually go ahead and copy that again i get you there are a couple of other ways of handling the on click feel free to use the other one if you like that okay quite a lot of manipulation that we have done and we are not using this input values but still we are going to get there in a second first let's see that how this is looking like on the web page so on the web page you can see that this is a number box so i can go ahead and increase that value or decrease that value but it's not working it will work in a second just a minute this is also a string so i can just enter 0 or 1 or anything but this is also not working and let's open up the console log as well so that we can see that and here we are going to go ahead and say rupees and dollars so these are working why these are not working because we haven't assigned a value to them yet so how we can actually go ahead and do that we can assign an onchange property on them so we're going to say on change what should happen on the change you are obviously going to receive an event and whenever you're going to receive an event you're going to run the method this method is responsible for manipulating this variable which is my num so i'm going to go ahead and say i'm going to simply say my set my num and inside this method we're going to take this event which is going to have a target dot value so once i have this one i can actually go ahead and use the exact same thing on to this input as well now you might be wondering okay okay this is getting intense wait a second so save this and now we have a very simple example up here i can actually go ahead and manipulate this and this is not working and this is not working because we probably need to hit a reload and let's just see yeah now it's working somehow this is not getting an auto reload but not to be bothered much now we are able to change that and notice here one text box is number one is string still both of them get our values because they are both controlled by single state importantly the thing that you should understand that whenever there is a value being changed use state is actually responsible for re-rendering the element and that is the biggest difference here now coming up on to the meat part of the thing that now let's use the another hook which is use ref and see what actually does so i'm going to go ahead and say i'm going to say input 1 is going to have a use ref and since we have two input boxes this time we're going to go ahead and say input 2 and that is also going to have a use ref and you might be curious to know and you should be curious that what is inside this input in case you noticed on the dark page documentation it was clearly mentioned that user f returns a mutable object whose dot current properties in the slice but i'm not bothered about current i want to see what is totally there in this input so i'm going to go ahead and say that whenever the num box is being clicked on i want to have a reference of this so i'm going to go ahead and console.log this input one here let's see what happens okay nice since it's not auto reloading i'm going to hit a reload and now let's click on rupee and i notice that it gives me an object here which says current and there is only one thing and it says undefined if i open this up it says hey this is totally undefined there is nothing up here okay that's okay the reason why it is totally undefined because you have created the variable you are using it but there is one more thing that you need to worry about userf is actually designed to store the reference so it can be actually attached to any input form any button any heading whatever you like so let's go ahead and now use this so we're going to simply say that there is a ref and now this ref is going to be for input 1. okay this is being done interestingly now let's see what manipulation it does when i click on the button this time i'm going to click on rupee and now it says hey now we have some value onto this one the current value is input if i open this up and i can see there's a lot going on in here so rather than kind of destructuring up here i'm going to go ahead and say that i want to display the value of input 1 dot current this restructuring is going to make much more sense let's go ahead and hit a reload and this time when i click on rupee now we can see now this is the most important part of this entire video when i click on this i now hold a reference of this entire input element and i can do all of my manipulation that i'm supposed to do in my javascript world earlier and i can do all of this up here so this is the most important thing to notice down here but i can understand that this is not going to give you much clarity so let me give you more clarity on that so now we have input 2 as well so we're going to go ahead and take this one that hey this reference is going to be holded by inside this input so we're going to go ahead and say this is my reference for input 2. so i have two input boxes two references being hold up by that and this this time we're going to go ahead and say let's console log this one up here but instead of input 1 we're going to go ahead and say input 2. quick summary now we are having two references each reference goes for each input box and they are being controlled by two different buttons so when i go back up here and hit a quick reload whenever i say rupee the input type is number which is holding a reference in the rupees and when i click on dollars the input type holded up here is the text and i can do all the manipulations up here just to give you a brief example and not to give you example for the focus let me tell you what additionally you can do i can go ahead and say that let's go ahead and do some styling here because that's going to make much more sense so this is my input box it doesn't have any styling yet here i'm going to go ahead and say that you're going to have some styling so styling nothing much but your width is going to be a hundred come on like that 100 pixels and i'm going to remove this input for a second and let's see how this is looking like so i'm going to go up here hit a reload and notice here the box is a little bit shorter i do hold a reference in this button so what additionally i can do since all the reference is stored up here i can use my regular javascript up here to say simply input dot current and i can go ahead and manipulate my styling append child whatever i really want to do i can just go ahead and do that but in this case i'm going to simply add a styling of width and this width is going to be let's just say a little bit more 400 pixels so you get the idea that why this reference is being done so go ahead and hit a reload up here and it says input yep it should be input one save that and there we go now what's going to happen currently it's having a 100 pixel of width when i click on rupees since i store this reference now the width is actually 400 i hope you can understand there can be more use case scenario but the most important thing is since this hook is saying on to the docs that this actually stores the current but as well as the most important thing it doesn't cause a re-render so you can do a lot of things here let me summarize the things here user f is actually designed to store the reference of the element you can store the reference for input elements for button pass them into the component as a child and also the most important thing it doesn't re-render you can actually use it to store the past state and past values that's possibly a use case but that is not why it was actually designed for this was designed to pass on a reference do manipulation based on the reference add childs append childs whatever you really want to do and that is my friend a classic example of use reference i know this was a little bit longer but creating these two input boxes two separate buttons will give you much more clarity about what kind of reference we are holding and why and how we can use it i know the video was little bit longer but i hope it gave you much more clarity and now you will be able to use this use rev in the production much more optimally so in case you enjoyed this video consider hitting subscribe otherwise no problem you can hit it later on as well and we're going to catch up in the next video [Music]

Channel: Hitesh Choudhary

Views: 16,704

Rating: 4.9186692 out of 5

Keywords: Programming, LearnCodeOnline, python, javascript

Id: yviJikU4gwk

Length: 19min 44sec (1184 seconds)

Published: Mon Mar 29 2021