React Hook useRef and forwarding refs with forwardRef

ladies and gentlemen today we're gonna talk about another hook called u s-- ref we're also going to talk about forward ref so what does usually F do usually F allows you to access a particular HTML element there are a lot of people who do give an ID to an element and then you get element by ID you know use your SAP yer JavaScript to access the element I think that is a wrong way to do it react provides a right way to do it which is using use ref so you provide a reference to a particular element and you can access it using that reference and welcome to check see tutorials alright so let's get started here I've created an empty project using Create react app and make sure you install the latest version of treated react app if you want to use the hooks because previous to 16.8 version of react the hooks are not available so your code won't run all right so to use this we are going to create couple of elements here so we can access it so I'm going to create an input and inside I would have this would be lets say type equal to text and we can have some placeholder which says enter first name okay so I have this here and similarly I can have another element which we can access and this would be enter last name and let's also have some button and this would say submit so imagine this is a form you enter something here and what you want to do is when you load the page the focus should be at this location on the first name because that's the starting of the form and then when you enter something and click enter the focus should go to the last name and then when you enter something and then again enter the focus should go to the submit button and you should automatically submit the form you don't really have to use your mouse at all this is often an accessibility requirement so you can navigate using your keyboard so first we need to have something where we can actually focus on the first name when we load the page so for that we will use an interesting hook call to use effect because we want to know when the page is finished loading then only we're gonna focus on that first name so here I can use that whole call use effect and use effect always takes a callback function and the second argument is some dependency when do you want to run this if I provide an empty array that means I'm gonna run it on the initial node if I don't provide anything that means I'm gonna run it every time and if I provide some dependency Mint's when this particular variable change running in this case we just want to run it on the initial load so I'm just gonna leave this empty so what are we gonna do it inside here I'm just gonna print some alert here let's say page loaded or something so we would know this okay so when the page is loaded it runs this and after this I do something nothing would happen okay now we need to access this elements so we can focus on them so for that we're gonna use another hook call used ref alright so here I'm gonna create ref for all three so the first one would be Const let's say first name ref equal to use ref and I'm just gonna provide null inside and let's have another one call last name ref equal to also use ref and this will also have no this means not pointing to anything and the last one would be submit graph this will also have use ref and no so I have not three references so I can create a reference to each element by simply doing this ref equal two the second would be ref equal to lastname ref and here I would have ref equal to submit ref now let's format this so it looks reasonably good so now when I initially load and within this use effect when the page is loaded all I can do is use this reference to the first name and I can say okay focus on this particular element because first name a reference holds the reference to this element now because I provided it so all I have to do is I can say first name reference dot and every use ref reference would have a property called current which holds the the reference and then I have to say okay now focus on that so if i refresh it now a focus is on the first element if I say let's say last name ref and I run it it focuses on the last name okay so every time i refresh it it focuses on that one okay so this is cool but also what I want to do is when I enter something and then click enter that should actually move the focus it in the last name again if I enter something and enter again it should go to submit so for that we need an event and that event is on key down so let's add an on key down event equal to I'm gonna call it first key down I haven't created this yet but we'll create soon and I'm gonna copy base here the last key down and then this one should say submit key down okay it's gonna give you an error because it I haven't created them yet so let's format this and now it looks reasonably good let's create this three handles so the first handle would be so I would have function and let's call it first key down then I would have a second function call last key down and then I would have a third function yeah it's for whenever you pick something it just imports time so let's clear it function submit key down okay so what should happen when I key down so what I key down I want to do the same thing so after the first key down I want to focus to the last name the reference right so now if I enter something well it goes because I'm not key down means any key which means I need to say okay when I click enter right now as soon as I type it moves so I need you check if the key is enter so I can I need to get a synthetic event from here now I'm not here here and then I would check if the a dot key equal to let's say enter and then I want to do this let's format this again and now it doesn't do it as soon as I enter now it goes to the last one and I can do this similar for the last key down in this case I would want to go to the submit reference so let's do this enter do this enter now it go to submit what do you want to do on the submit key down I'm gonna say is I'm not gonna go anywhere I'm just gonna say form submit it which I will just use in alert don't use alerts but I'm just doing it here because of the tutorial is it just easy to see I'm gonna say form submit it okay let's format this and now I'm gonna go here enter go here enter and again enter that should submit the form I'm not using my mouse at all here this is pretty cool but in most of application you will be using some sort of component which would have input boxes inside you won't have access to the reference directly so how you deal with that so let's create a few components so that we can pass a reference to it and that's where the forward ref comes into picture so here I'm gonna create a folder call components and inside I would have an input just give it a input is the act from react let's hide this here and then I'm gonna create a component called input and then I'll just need to export it all right so what goes inside the input we'll just have a regular input here now here you can have multiple commentable elements but I'm just gonna to to demonstrate this I'm just gonna use something simple which is an input I have multiple things tied on key down ref and place holder so I've got four properties let's first import our component so we can use it import input from components slash input now I can replace this so difference between those who don't know they're different difference between the component react component and regular HTML elements is the capitalization of it so let's replace both of these with this and here it's actually returns it however this would create problem because now I'm passing all these props but that needs to go inside here so type is fine we can pass it in on click down we can pass it and placeholder we can pass it in but reference we need to use a different way of doing it so first argument here would be my props and then I can simply pass those props here and the reason they should supposed to be regular input and now it gives me the error that this is not the so the refs are actually not working and that's why we need forward graph so for that what do you have to do is let's do one thing so let's say props I am getting three props right so I'm getting the pipe on key down and placeholder so let's destructure them so type on key down and place holder so I can say type equal to type Anki down is equal to on key down and placeholder equal to placeholder but for the reference what I would need to do is I can pass the reference here so I can say a ref and here I would from the react I would get forward ref and I will wrap my input in the forward wrap and that would give me a forwarded draft so I would say Const input and then I can export this and now I would say here since I have a second argument which is ref so I can say ref equal to ref now let's format this document so again I have three regular props type on key down and placeholder and the ref I'm getting as a second argument here because I'm using this for rap so forward raff is nothing but I'm forwarding the reference into my component and now it would work the same way enter enter and enter so here I don't have to do anything funny it works just like before except now I have forward a ref separately using this photograph by the way if you want to try this out I will upload this to my github site and provide your link so you can actually try it out the link would be in the description and I hope you learned something new from this video and if you did please like don't forget to like like subscribe and provide a nice comment and you can translate this video for me the instruction is in the description thank you [Music]

Channel: techsith

Views: 75,220

Keywords: react hooks, useRef, fowardRef, forwarding ref

Id: ScT4ElKd6eo

Length: 14min 46sec (886 seconds)

Published: Mon Jul 15 2019