React ref and forwardRef Tutorial

hello guys and welcome back to my youtube channel if this is your first time here my name is dillian and on my space here i simplify topics around the web around tech around software engineering so if these content you would like to see more of kindly subscribe and in today's video we'll be looking at react ref and forward ref we'll get to understand why react ref can be helpful when to use react ref and then also when to use forward drift so let's get started so i have this simple react application built which create react app and let me show you what it looks like so when i start development server it basically has this audio element and i can play and i can pause now the thing with this audio element is i am using the default controls of the audio which you can see here by when i specify the controls prop so it's using the default controls but when i want to specify custom controls for that audio then i would need to create my own custom handlers for the different operations i would want to do on the audio i have to create my default handlers and then also i'll need to have access to the dom elements for the audio such that i can call the play method the pause method and several other methods that the element has so when i remove this now this is something i have built already i'll explain the code in a second let's see what it looks like so this is here i have my own play button and i have my own pause button now over here in the code like i told you we needed to have access to the audio elements and when you want to have access to an element on the dom you use dom methods like get element by id query selector by class names there are several there's a lot of them so here i'm using the documents the get element by id i have the id here to be audio alarm and i have this audio lm states here which by default is null i have a little type script here you can ignore the typescript annotations and when i get the elements i'm using use effect to ensure that the component has mounted before i'm trying to get the element by id and after getting the elements i update my states of the audio elements and this is it here then i have this on toggle playpos method such that if the audio when the method is called and the audio lm states is not null or it's not undefined is true t then i check if is playing which is another state for keeping track of the audio plane if it is true then i call the pos method on the audio element and i set the display into false else as i call the play method and i set the is playing to true so that's basically how it works and this is where ref's coming so over here i'm using document.getelementbyid i had to go through the extra process of having to create a use effect to ensure that that component has mounted of course this is this is just how you do it in playing javascript but react offers a more effective approach or a more simpler approach which is using refs so by using refs i don't need to keep track of the audio l i don't need to update that state i don't need to have this use effect here and [Music] my og my toggle play pause would look something like this and this is the audio ref here and then over here i think i need to comment these two and then over here i add the audio ref which i created up here use ref which is an html media element this is also typescript you can ignore that and then null and then over here i have the audio ref variable assigned to the ref attributes now using this provided by react i have gained access to the audio element this is basically creating a reference above here the audio reference and you are attaching that reference to this element over here so now you can this will give you access to the dom element and the dom properties so here it's going to have all of those it's going to have the dom elements in the current property of the audio ref so in the current property i check when you're trying to toggle play pause if the current property has a truth value which means it's um the the reference is actually attached to a component or to an element then i can i here i just give it a different areas i change the current to audio lm and then i call the pulse method and deplay method and let's check if our code still works and yes it still works that's basically how it works we create our ref here our reference here and then we attach it to this audio element and then we can using the current property we can call the pos method the play method and then every other method that the element will be exposing so that's how we do it with refs and this is when to use ref so instead of using the dom method instead of having to create a use effect to ensure that the component is mounted having to manage extra state you can just use the refs directly so when exactly do we use forward refs as we can see in this audio component here this audio component has the direct access to the reference it calls the play method the pos method it manages the controls on its own but then what if we wanted to give this app component which in this case is a parent component of the audio components if we wanted to give this app components access to this reference so that the app component here could call the play method depos method that's where we do a forward drift so four draft is basically a way of passing ref from parent components to a child components so in this parent components here we have the we create the ref using user f i'm going to add my typescript you don't need to worry about this for now i'll just give you a default value of null and we'll give this audio components we'll pass the ref into this audio components and then let's see how we use the forward ref passing the ref into the audio component and then over here this way i use the ref so i'm going to change this function components e2 and then this is what i call the forward ref it's a method and it's going to receive a callback function and inside our compact function is going to pass two arguments the first is props and the second is ref and i'm going to move everything from here to here and i don't need all of you and boom so i also want to add some typescript here so it is going to be the html media element and my props so this way i am sending the ref from this point here to this point here and then i can remove this audio ref and i can call this audio ref and i can move all of this to this place here i can move the toggle play pause to this place here call this audio ref i'll call this the audio ref for this audio right here i'm going to come to this ref here and i'm assigning it to this audio ref and i can move this is plane from this place to this place can get rid of all of this and i can move these buttons from this place down to this place here and for the src okay i need to destructure this i'm going to get the src and export default audio so as you can see now the all of this the parent component created the ref and the parents component passed the ref into this audio component and then now these parent components can manage the controls it has access to the ref and let's see that i think there's something missing here okay there's an extra bracket here so now let's see if this still works so here's our app and then when you play and when you pause you have that there you have it there's so many other advanced things you can do with refs refs don't always have to be dumb element you can assign you can create refs for numbers for objects but here was we have seen how to use it for dom elements so that's basically how you use rep and that's how you create a forward draft just to reiterate the forward drive here you create your reference here and then you pass it into the audio component here which expect it by using the forward ref method for creating the function component and that's how it works and if you found this video helpful kindly like kindly subscribe and kindly share

Channel: Dillion Megida

Views: 435

Keywords:

Id: CDTwyh4XE0U

Length: 8min 54sec (534 seconds)

Published: Sun May 16 2021