Django & React Tutorial #17 - Functional Components (useState, useEffect)

Key Takeaways

[Music] hello everybody and welcome to the final video in this django and react tutorial series now before we dive in here what we will be doing is working on functional components so i will be teaching you react hooks and i'll be showing you how we can make a new component that actually does a different thing and use kind of the functional style this is not very difficult and you pretty much already understand how all of this works is really just about learning the syntax and what a functional component looks like anyways i just want to give a thank you to everyone that is still here who likes the videos who comment who has subscribed to the channel you guys are the reason that i post these videos as you can see going through this series they get less and less views as we go on and on but every single time i see a comment from one of you guys it motivates me to want to make another one and to just continue posting more videos in the series so anyways this will be the final video i hope you enjoyed up until this point but we are not done let's get into the functional components so what i'm going to do in this video is i'm going to build a functional component and this component is going to be responsible for giving the user information about the app so you can kind of think of this as just like a help button you know you press it and it tells you like what it means to join a room or how you create a room or how you authenticate with your spotify or whatever it may be we're going to keep it really straightforward this was just really the only thing i could think of to add to this app that made sense in a separate component so anyways let's go ahead and do that so i'm going to make a new component here inside of my components folder i'm going to call this info.js now inside of here we're actually going to start by doing something a little bit different we're going to say import react comma and then we're going to import use state which is a hook which we'll see in one second and use effect which is another hook which again we'll see oops in a minute and we're going to import that from react like that in let me just zoom in a bit so we can see this all right so import react i use state and use effect from react next we're going to import some things from material ui so we're going to say import and we're going to import the grid we're going to import the button we're going to import typography and we're going to import the icon button and that is going to be from at material hyphen ui core like that now just to give you some idea of what we're going to build here essentially it's going to be a really basic page it's just going to have two pages on the page if that makes sense so there's going to be like an arrow to view the next portion of the help page and then an arrow to go back to the previous portion the reason we're going to do this is just so that it's like you're kind of going through different pages of the help and then that way we can actually use some state and use some effects and you'll see for the purpose of the example that's why we're doing that anyways the page is going to be super straightforward it's just going to have some text that gives some information there'll be a little arrow to say go to the right you can view the next piece of information then you can go back and view the previous piece of information and then of course you can return back to the home page so anyways we're going to import some arrows here some icons we're going to use that are like the arrows for navigation so we're going to say import navigate and i believe this is before icon from and this is going to be at material ui slash icons slash navigate before and omit the icon at the end of that then we're also going to import navigate after like that or i spell navigate correctly no i did not navigate after icon from and then at material ui slash icons slash navigate and i actually am incorrect it's not navigate after it is navigate next okay so navigate next like that okay so there we go we have our icons the last thing that we need to import here is a link so we're going to say import and then link from at material oops so actually not from app material ui from at react hyphen router hyphen dom and now we are done with our imports so now let's start actually creating a functional component to create a functional component i mean it's pretty straightforward or pretty self-explanatory we're going to use a function rather than a class now you're actually going to see why this is better it just really makes the code a lot cleaner it's a lot easier and it just is a more natural way to do things at least in my opinion so i do apologize we didn't use these but again this will teach you everything you need to know so we're going to start by saying export default just like we did before with our classes and then we're going to say function like this we're going to name the function so i'm going to name it what i would have named my class right in this case is just info so the name of the component then we're going to put inside of the brackets the props and then we're just going to open the curly braces like this and that is our component now all you need to do to actually make this a react component is to simply define a render method inside of here or sorry not render simply to return something inside of here and all we're going to do is just return jsx like we would have returned previously so this alone is a functional component if i go inside of here and i put like say an h1 tag and i return let's just return hello this is a component and if i want to use this component i use it the exact same way i used my class based components i can just put it inside of one of the classes i can do info and then i can pass whatever props i want i could pass like you know title equals i don't know let's just go with a string hello or something like that and this would be totally fine then we would access title from the props so from props dot title we could use that inside of our function now of course i'm going to show you how we do things like life cycle methods how we have state and how we actually have kind of like methods inside of here but that is the basics of functional components so already you can see this is a little bit cleaner we don't need to call the super or the parent constructor and yeah it just looks a little bit cleaner and nicer so anyways let's actually start by returning a little bit of jsx so i'm just going to return a grid inside of here so let's say return grid this is going to be a container it's going to have the spacing equal to 1 just like we've done previously inside of this grid we're going to have some grid items we're going to say grid item xs equals 12 like that and we'll say align equals center we can end that grid and then inside of this first grid item let's simply put a typography um i guess component here so we'll say typography component is going to be equal to h4 this will just be the title and then we're going to say variant equals h4 and inside of here we'll just put what we want to label this page so i'll just say what is house party question mark like this is kind of the info page now before we go any further let's actually just render this component so we can kind of see how it works so let's go to our home page which i already have open but you guys know where that is and now what we're going to do is import this info component so we're going to go to the top of our program we're going to say import info from and then dot slash info like that now just like we've shown the cr join a room and create a room button on our home page and in fact let me just go here and i'll show you we have join a room and create a room in the middle of these two buttons what i'm going to do is put an info button and that way now you can press info and it will bring you to a different page which also means we're going to have to set up a route for this page but we can do that in a second so inside of our button group here let's create another button we can simply just copy this here and we'll put it right in the middle we'll call this one info we'll change the color to default which is kind of like a gray color and then we'll say rather than going to slash create let's go to slash info like that awesome now we have our info button so now we need to go down into our render method and we need to make a route for our info page or info component so right underneath where we have join and create in fact maybe it makes more sense to go right in the middle because that's kind of where we place the button above we're going to say route or route whatever you want to call it path equals slash info and then the component you guessed it is equal to info and that's all we have to do we're not going to pass any props to info but again if we wanted to pass props we could just do it like we had done right here then we could access the props inside of here using props dot and whatever the prop name was all right so now that we have that let's just add our url in the back end for slash info and then we can visit this and see what it looks like so far so let's go to front end let's go to urls.pi now inside of here let's make a new path so let's say path and i guess inside of here this is going to be info and this will just render index like all the other ones add our comma and now we should be good to go so let's go here let's refresh the page i'm going to have to empty cache and hard reload now we see that we have the info button showing up let's go ahead and press on that info button and there we go it renders this functional component for us which currently is just showing what is house party now obviously we need to be able to go back so now let's make a back button on this page so we can return back to the home page so this will be good this will show us how we actually deal with kind of like methods and stuff as well or in fact we won't need that for the back button but later on we will so now let's make a back button so let's just copy our grid item here and inside of here we're going to make a button i guess we'll say that the color of this button is going to be secondary we can say the variant is equal to contained and then 2 will be equal to we just want to go back to the home page so we'll just do a slash and then the component is going to have to be equal to the link because we're doing a redirect so we'll put link like that i think that's actually all we need for our button and oops sorry we need to label our button so let's go slash button and then inside of here we can name this one back awesome so now we have two great items we have our one that has the title and then we have the one that has the back button and this should redirect us back to the home page let's give this a quick look so let's refresh the page here now we see we get a back button when we press that boom brings us back to the home page awesome our info page is working well so we will continue in one second but we need to take a quick pause to thank the sponsor of this video and this series which is algo expert algo expert is the best platform to use when preparing for your software engineering coding interviews and personally helped me land a job at microsoft and get an offer from shopify even today i use algo expert just to practice my coding skills that the highest quality coding interview questions and really are just the best prep platform when looking to get a job as a software engineer so that said check out algo expert from the link in the description and use the code tech with tim for a discount on the platform all right so now we're going to start talking about how we can implement state inside of our functional components so inside of our class-based components we saw that we needed to define some attributes or we needed to define the set state variable or whatever you want to call it inside of our constructor and then inside of set state we put all the different names of the variables or piece of information that we wanted to hold and then we were able to update that state by using this dot set state now it's actually way easier to use state inside of a functional component i'll just kind of start doing it and then i'll explain what's actually going to happen or how this works so we're going to start by defining const so this is just like we're defining a variable essentially and then inside of here we're going to have an array we're going to put two things we're going to put the name of our state so whatever piece of information or whatever variable we want to hold our state is what we put first then we put the name of the function that we want to use to update this state variable so what i'm going to do is call this page the reason i'm calling this page is because i'm going to have two pages i want to have the first page which talks i guess about joining a room and then the second page which talks about creating a room so we need to keep track of which page that i'm on this is very similar to what we did when we worked on the settings page uh where we had you know it's either showing the settings page or it's showing the music controller whatever it was that was there but this is kind of a similar idea of what i'm trying to do here so i'm just going to say const page and then comma set page is equal to and we're going to use this hook which is called use state which we import above we're going to say use state and then inside of the brackets here we're going to put the value that we want to initialize this page variable or state variable to so in this case we can just initialize it to something simple like 1. i will make this a bit better in a second but this is how we actually set up state variables so now whenever i want to access the state i use the variable page and that will start by giving me one right because we used state and what use state returns is an initialization for this variable which is equal to whatever we put inside of the brackets and then a function which allows us to update the state for this variable now whenever we call this function we simply put inside of the parentheses so if i call set page like that and i set it to say page zero or page two this will force the component to re-render and then it will set page equal to two so hopefully that's clear but this is what you do whenever you create a state variable you wanna you know store some type of state so if we have multiple states that we want to store or state variables we would just do this multiple times with different default values inside of the use state i guess you could call it constructor or you call it parentheses or initialization or whatever you want but anyways that is how it works for state so now we're going to initialize the state to 1. but i actually don't want it to be 1 because that's kind of ambiguous right i want something to tell me what page i'm actually on so i'm going to do something which is kind of like creating an enum here which is going to make this a little bit more clear so i'm going to say const and then pages is equal to i'm going to open up some parentheses like this and i'm going to say join in all capitals and this is going to be equal to the string pages.join then i'm going to say create and this is going to be equal to the string pages dot create now the reason i'm doing this is i want to have this variable pages which has access to two things join and create join stores pages.join and create stores pages.create now it doesn't really matter what you make these strings you can make them zero and one so long as they're unique but this is kind of the convention you do whatever the enum name is and then whatever the value is in lowercases so that's what i'm doing for this and now what i'm going to do inside of use state is i'm going to say pages dot join so now what that's doing is accessing this pages.join string so page will really be equal to pages.join this string and then what i can do is when i want to update my page to be equal to create it'll just be a lot easier to read and i can say set page pages oops pages dot create like that and now it's really easy for me to tell what page that i'm on i'm on the join page or the great page i don't need to use zero or one it's not ambiguous and well i just prefer to do it that way so anyways now we have our state set up so what i want to do now is i want to show different things based on this state so if the state is the join page i want to show text related to the join page if it's create page i want to show that so let's make another grid item here let's do this so grid item we'll put this right underneath the typography or i guess above the button as well and inside of here now i'm just going to have another typography tag because we're going to have some text here so i'm going to say typography and we will say that the variant is going to be equal to body one you'll see what this looks like but it's like pretty equivalent to just your standard p tag in html then inside of here i'm going to say the following so i can never remember what this damn thing is called and you guys have told me so many times i think it's like the ternary operator or something i'm going to say page equal equal equal to pages dot join then what i want to do is show something otherwise i want to show something else so i'm just checking whether the current state is equal to pages.join or i guess in the other case pages.create now i'm going to show you how we can actually implement methods or quote unquote methods inside of our functional component all we have to do and we don't have to do this inside the functional component we can also do it outside is just define a function that's nested inside of this functional component so i'm going to say function and then i'm just going to call this first one join info and inside of here i'm just going to return join page we'll make this more complex in a second but just for the example i'll make another function i'm going to call this create info and inside of here i'm going to return create page now this is totally valid you may not have seen this before but you can definitely define functions inside of other functions and well that's exactly what i'm doing right here i've just defined two functions so here what's going to happen now is that we can use these two functions so i can use them inside of this ternary operator and they'll just return create page and join page but we also could access the state inside of these functions right because they're local to this um what do you call it this component now for these specific functions there's no need for me to really put them inside of this component yes it makes sense for me to do that but i also could fully just take them and place them outside of the function and that would be fine i could still use them from inside of here because they're defined within the same file now i know i'm going fast but hopefully that's clear that's kind of how you make methods quote unquote inside of your functional components of course if you define them inside of here they have access to the states and the props and everything else you might need so anyways let's go down here where i just started this ternary operator we're going to say if the page is equal to pages.join then we're going to call the uh not create the join info function and what this will do is just return some text to us and we'll just put that inside of this typography tag otherwise we'll call the create info page and this will do the same thing return some text and we'll put it inside of here all right so i think that's all good in fact let's just check this and make sure all is working so let's go here let's refresh now let's go to info we can see that by default we are on the join page now what i want to do is add a button that allows me to actually change my pages or update the state so to do this i am going to create an icon button inside of another grid item so i'm going to make another grid item here and then i'm going to define an icon button like that this icon button will have an on click so i'm going to say on click is equal to and then we'll just put an arrow function inside of here and in fact we can actually just write this arrow function out right now so icon button on click we will put the icon here in a second but what's going to happen when we press this button is we are either going to change the state of the page to be equal to the create page or the join page based on which one it was on so i'm going to say page equal equal equal to pages dot create question mark so if the page is equal to pages.create then what we're going to do is set page so we just use this set page function which again is defined in the state right here and you can call this anything you want by the way it doesn't have to be called set page uh and inside of here we're going to set this to be pages dot join and otherwise if it's the join page we need to go back to the create page so we're gonna say set page and then pages dot create like that awesome so now we just need to actually put an icon inside of this button now this is kind of repetitive but we're literally just going to do like the same thing that we did before i'm going to copy this ternary operator here i'm going to put it inside of squiggly brackets and now i'm just going to replace set page with what i actually want to show here instead so essentially we have two icons we either want to show the icon going forward or the icon going backwards so these two right here so if we are on the join page or on the first page so we should show the next icon if we are on the create page we're on the second page of the last page so we should show it the backwards icon or the before icon so if we're on the create page then we want to go back so we're going to say what is this one even called navigate before icon and then just close that one off like that otherwise we're going to show the navigate next icon like that awesome so that is actually all we need for this component again just to quickly go through what we did here we just have the icon button we have the on click to update the state it's totally fine that we're updating inside of here we don't need to call a function or method then right here we're just showing the different icon based on what page we're on and same thing here for showing the different type of text so let's refresh this page now let's go to info now we see we have this little forward icon when i press it we see create page icon changes now we go back now of course we could put some more meaningful text here i'm not for the purpose of this tutorial because there's no really need to do that but you guys are welcome to change this and mess around with that alright so the last thing that i'm going to show you is how we use the use effect hook now this is actually how we replace the life cycle method so component did mount component should update and i think there's another one i don't remember the exact name of it but anyways the three methods that are called right after your component for the first time is rendered that's what this use effect method will do or that's kind of the functionality that it's replacing so to make this more clear if i go to say musicplayer.js i believe we have oh actually it's not inside of here i guess it's in room.js inside of room.js we have these methods right component did mount component will unmount now i'm not going to be showing this one in this video but i will show you how we replace this if we want to do this kind of things we want to have some kind of activity that happens immediately the first time the component is mounted or when the component is updated then what we need to do is use the use effect hook to replace this function so if we go inside of info.js what i can do now it doesn't matter where i do it is i can define the following i can say use effect like this and inside of use effect i put a function that i want to run as my component did mount or my component should update or all of those kind of initialization methods or life cycle methods in react so what i'm going to do is i'm just going to put an arrow function inside of here and now i'm going to start coding out what i want to happen so i don't really need to do anything in particular in here there's nothing that makes sense to do in this component but this is where we would call any uh you know api endpoints or whatever we need to do to kind of update or initialize the component so anyways i well i guess i'll just do kind of a console.log so i'll just say console.log ran and now we can just see that this is going to run every time the component updates and every time that we first mount the component so let's go to info we can now see that rand pops up here now when i go to the next page rand pops up again and every single time the component updates or something changes whatever happens in or whatever's stated inside of use effect is going to run so whatever function we give here will run all right so i lied i actually am going to show you how we implement component will on mount because that's important and i just forgot that i was going to show that but anyways i just want to clarify again the use effect all of the stuff that happens inside of the body of this function is what would happen if we hooked into the lifecycle methods component did mount component will mount and component will unmount now i don't know if i showed all of those but essentially if you want to perform any of those types of operations or you would want to hook into any three of those lifecycle methods you just use use effect and it's equivalent it just does all three of them for you hopefully that's clear i'm having trouble really articulating that properly but it does all three of those kind of you know initialization operations for you it just takes care of all of them now if we want to do a component will unmount we also need to use use effect but in a different way so if we return a function from use effect so if i just return an arrow function like this and all it does is just simply console.log cleanup like that then what's going to happen is when this component unmounts this function that we returned from use effect will be called and in fact after the component updates uh this function will be called as well so what this does is essentially implements a cleanup operation so use effect allows us to return some function from the function that we pass it and by doing that it will automatically call this function for us in turn for component will unmount right so it's kind of implementing that component will unmount functionality because after the component unmounts well we need to do this behavior so this is kind of the same thing we're just returning a function that function will be called when the component unmounts so hopefully that's clear but that's kind of how you use use effect to implement those four life cycle methods i would encourage you all to kind of look up the documentation for this because my explanation is not as good as i would like it to be but anyways let me just show you how this works so now i'm going to go back to my app here i'm just going to refresh and now you can see it says ran cleanup and then ran now when i go back you see the cleanup operation happens that's equivalent to component will unmount or component did on mount or whatever now i'm going to go back to info we see that ran runs now after i update the component cleanup will run automatically then ran will run then when i go back the cleanup operation will run so hopefully that's clear on how that works but we're not cleaning up when we initially mount the component we're only cleaning up every time we update the component and every time the component unmounts so that is what happens when you return a function from use effect it gets called kind of in that order so anyways i think i'm going to end the video here hopefully this was clear this was kind of a quick overview of how you use functional components there is a lot more to get into with this but again this is not the purpose of this tutorial series just wanted to show you guys how these work hopefully you found it valuable and again hopefully you enjoyed this series so if you did make sure to leave a like subscribe to the channel and i will see you in another youtube video you