ReactJS Course [6] - Component Lifecycle | UseEffect Tutorial

hey guys how's it going i'm back here with another video and today this is the sixth episode of my react.js course in this video we're gonna be learning really important stuff the first thing we're gonna go over is um a lot of conceptual stuff related to what exactly the react.js component lifecycle is and then i'm going to explain to you guys how to use the use effect hook to manipulate components depending on where in their lifecycle stage they are right so i'm going to go over all of this in the single video and i'm really excited to show you guys the examples if you're interested in checking out the code for the video it's going to be all in the description and yeah that's basically it so let's get into the video [Music] [Applause] [Music] [Applause] okay everyone so in order to start explaining how life cycle works in react and how um the use effect hook works in react as well i want to first uh i created this example over here that is going to be able to explain to you guys exactly how everything works but i also want to give you guys some terminology before we start working with this so life cycle like the word says it's basically a description of how a component uh like the collide check over component just explains how uh everything happens from the birth of a component to the death of the component obviously that's an analogy but um everything that happens from the beginning till the end so there's three different stages in the react life cycle there's the mounting stage there's the updating stage and there is the unmounting stage so the important word to know here which you might not know is mounting and mounting basically uh just think of mounting as the component appearing in the screen or the component um starting to exist in your project um and then mounting being the opposite of that so the components stop appearing in the screen so in in a website uh that would be the an element a component that represents a bunch of html elements or jsx elements suddenly appearing in the source code and then unmounting would be basically that disappearing and then updating you guys might know what the word means it just means that um that component it is changing the ui and and whatever it's returning inside of the component is changing depending on something such as for example a prop has changed or a state inside of the component has changed or something like that right so those are the three words that we need to understand because those are the three stages of a react component life cycle now we can see this existing and working very easily by creating a simple project that showcases this so there's many different projects that you can just create to to showcase that this one over here i find it to be pretty simple and it just uses stuff that we've done in the previous episode so i find it to be really cool um basically we have over here uh our app component and inside of it we have um a state called show text which is just a boolean true or false and a button which when we click on it it should change the value of the state to the opposite of what it is right now so if it's false and we click on the button now it will become true and the state is used to determine if this other component called text is being is appearing on the screen or not now this other component called text is pretty simple as well all it has is this other state called text which is a string and we're showcasing it on the screen over here inside of a header tag but every time we type on an input it will change the value of that text and you can see this working over here because um basically we have the show text button and show text state is false when i click on this the text component appears and i can start um changing the value of the text state right and if i want to basically turn it off i can just click control text again and it will disappear now you can easily see here the three stages of a react component life cycle because if we inspect element which is something i would recommend you guys get really familiar with because it helps a lot with any kind of web development not just react um and we open our screen over here we try to navigate through our app we see right now inside of the div with the class app which is where our whole app exists there's only a button right so this stuff over here all of this ui over here is not currently in our code and that makes sense because it's not being shown right but when i click on this now this div appears so this div represents the text component which means that right now what happened is we just mounted this component into our project so this component was not existing inside of our project or inside of our instead of our web page and now it is existing now if we open this up you can see there's an input and there's an h1 tag the h1 tag is obviously empty because the text state is empty initially and the input is over here just chilling nothing is happening to it so what we can do now is we can start typing on this and you'll see immediately that the code inside of this component over here is changing right it's updating in real time because we are updating our component so this is the second stage of the react life cycle you can see it is literally updating as we go now we want to see the last stage right so unmounting if we click on this over here it's going to go back to what it was before now we don't have that div anymore which means we don't have that component anymore now this is extremely important to understand because in a lot of times you want to make your components as efficient and um make them just work exactly how you want them to work so understanding um how a component exists and and the life cycle stages of it is extremely important and there is one specific concept that will encapsulate all of that in react and it's called the use effect hook so back in the days there was actually three different methods that you might have seen if you're digging up react code you might have seen something like component did mount something like this ignore this kind of stuff if you see it in the internet that's all like old react that's when class components was a thing um so if you see that don't worry you don't need to learn that what you need to learn is that there is a hook in react called the use effect hook this is one of the most important hooks in react in my opinion it is the second most important one before the use state although i can argue that you can have a project without a u-state hook but you cannot have a project without a use effect hook so the use effect hook is a hook that is used to basically control what happens depending on which stage of your component's life cycle it is so with this hook over here the simple function over here we can we can create some sort of action that will be triggered when the component is mounting or when the component is updating or when the component is unmounting so that's something extremely cool because it all exists um and you can do all that inside a single um hook inside of single function so i know that might seem a little bit confusing if this is the first time you're working with a use effect so i'll give you guys a very easy example just continuing with whatever we have over here and i'll show you guys exactly what i mean so i'll come over here and if you want to use the use effect hook all you have to do is you just have to say use effect and just open and close parentheses and then put a function inside of the use effect so like this just a function that exists inside of this now the use effect by default what it does is whatever you put inside of here as of right now it will call for example console.log a message over here saying component mounted like this component mounted and when the component mounts this will be console logged that's all it will do right now you'll see that this happens because if i refresh my page go to my console and i click on this button it will say component mountain now there's a thing you might be wondering why did it console log twice now if you watch tutorials about the use effect before early this year which is 2022 you might know that people might say that this only console log once it's because react updated i don't want to get too in-depth about what happens here but i want to emphasize that because that can confuse a lot of beginners what's happening here is now what react does is if you have this thing over here called the strict mode it is supposed to help you write better code that's the whole point of it so if you have that currently in your project it will do it will console log twice um and you see i just removed it and it will only console log once um because what react does is it's basically checking to see if you're handling your use effects correctly again i won't explain that right now i'll explain it at the end of the video for only for those who are interested it's actually a pretty interesting topic but for now just imagine that the use effect only runs once let's just imagine that i'll actually keep this console logged because it's better for for you to understand it this way so as of right now the use effect only is calling itself when the component has mounted and you'll see that i need to save this like this i need to do this so as of right now you can see that when the component mounts it says component amounted i will um i'll unmount it again and then i'll mount it again and you'll see it will contour log again so the user effect right now is allowing us to execute an action exactly when the component mounts which is something we have never done before so what what kind of action could we put over here well in the beginning this is very useful for when you for example have a page where you need to make an api call to get data from somewhere immediately when you go into the web page you just put it over here and what happens is when you go into that specific page it will fetch the data immediately and display in the screen that's a very very easy example on why you might want to do something like this right why you might want to execute some sort of action when the comp when the component appears or when the component mounts now as you can see over here this is as it is right now it's only executing an action on one of the three stages of a react component's life cycle so how would we make it so that we can console log when it's updating and we can console log when it's unmounting we want to see if we can actually detect and trigger some sort of action when those two stages are occurring so for actually updating it's actually pretty simple so with the use effect over here this will be called every single time there's a state change so what i mean by that is whenever this component re-renders whatever is inside of here will be called again so what happens is if the component itself updates in any way it can either be a prop that is receiving changes or a state inside of it like this one over here changes then this will be called again so let's see if that actually happens so you'll see it will be called once because it mounted and now if i change a state inside of this component it will keep calling itself meaning that over here whatever we put inside of here as it is right now will also be called when the component is updating so the two stages are now being triggered now there's a caveat what if we only want a console like this if it's mounted but not when it's updating well the use effect hook allows us to put an array over here and this array basically tells us we can specify what props or state changes we want to trigger the use effect so if i put the text over here then what will happen is the same thing would happen right it will console log and trigger the use effect hook whatever is inside of here every time the text changes so the same thing was happening but if i remove the text from here you'll see that now it doesn't trigger it anymore only the mounting triggers so if you want to execute an action only once when the component mounts you put an empty array over here but most importantly if you want to trigger an action every time a specific state changes or many different state changes you can just put them over here for example putting the text over here this is really cool and it comes in handy in so many situations so it is extremely important for you to understand how this works however i know that since this is the first time you're probably seeing the useful tuck it will be hard to come up with examples in your head and see the how useful this is but don't worry i have that in mind we're going to be using this a lot especially in the next video now we've done two different stages what is the third stage of a react component's lifecycle well it's unmounting how do we execute an action when the component disappears so with a use effect we can return a function and this function over here will be executed when the component amounts so if we want to console.log for example something saying component unmounted like this so now if we remove this over here i want to remove it just so you guys can see this working better what will happen is immediately when we show the text the component it should console log that the component was mounted and if we decide to not show it anymore it will contour log that the component was unmounted so i'll come over here refresh the screen show the text it will say component mounted and then remove it and you'll see you'll see that it says component unmounted so we are triggering both things immediately so how can this be useful there's many different situations imagine that you're you want to make a i don't know a request to a service an api when you render a component so when a component mounts you want to make a request for an api and continuously make that request but then when the component disappears you want to stop that request well you can put the the logic for making the request over here and put the logic for stop like the logic for stopping to make that request over here so this serves for you to kind of clean up um the mass you made um not the mess you made but like whatever logic you put over here if it's a logic that might cause leaks after this you you might want to fix it over here so that's basically it for the use effect hook now again i know that um it might not seem that useful right now because i'm just using console logs but the next episode is where i show you guys the first major example of using the use effect inside of your project it is my opinion the main one you use in the beginning um afterwards you'll be using this all the time when you get more advanced in react but um i just needed to make this video first so you guys could have an idea now i want to explain to you guys the whole uh streak mode thing so if you're not interested in that you can just go to the next episode if you're interested i'll go over why um this thing makes the request in the use effect twice or makes the use effect run twice so stick around for that so basically we have over here what is known as strict mode so i mentioned to you guys that strict mode over here is a way for react to kind of help us write better code right so what do i mean by that well react has certain roles um inside of their project that a lot of people like not following and streak mode will make some checks for you um while you're writing your code and prevent you from making those mistakes i would always recommend keeping this on because if you're make if you're writing some code that um strict mode is not allowing you to you should probably not be writing that code um so just removing it is kind of redundant because you're literally doing something that is an anti-pattern something that react doesn't recommend and it doesn't matter what use case you have you're running into there's always a solution and strict mode is just telling you that the one you have right now it's not the best one so that's a little bit of a rant for those who don't want to use trick mode in my opinion you have to and what happens over here with the component mount running twice is that if i go over here right now into our project right with strict mode and i show the text you'll see that what happens is the component mounted once the component unmounted right after it and then the component mounted again so that's something interesting to see right we thought it was running twice but what is really is happening is with strict mode react forces the component to mount once then unmounts immediately after and then mounts again so that's just to check to see if your user fact is running correctly because if you messed up over here like i said you messed up and you wrote some code that can cause some leak so if you wrote some code over here that can cause some type of leak or some some type of memory leak then you react you will know because uh what happens is uh react will force the component to unmount meaning the leak will will become evident and then it will mount again now what happens is if your code is running correctly meaning that whatever logic you put over here you're cleaning up on the unmounting stage then it shouldn't have any issues with it because what it's going to happen is it's gonna mount for a sec for like a small amount of time then immediately unmount so if your component is running correctly um everything should remain the same and then it's gonna run mounts again to actually run the use effect like you intended to so this is just a way to check to see if you wrote your code correctly if you didn't then immediately you'll see everything will be breaking there's infinite examples of this but um like i said since this is the first time you guys are learning use effects um it might get kind of confusing if i just went on a rant about um different use cases of this when you guys might have never used the use effect before this video so um this will become really more evident as we go on to the series there's actually a really cool video um from another youtuber which goes over just this specific topic um meaning the the use effect calling twice i'll prob i'll probably tag it up here on the video if you're interested in checking it out um it's really interesting so with that in mind this was it for the video there's no exercise in this video it's the only video with no exercises because it's hard to come up with an exercise for the user effect when we haven't learned stuff like api requests or or something like that but keep in mind that's going to be in the next few videos so i really hope you guys enjoyed it if you enjoyed it please leave a like up below and comment what you want to see next subscribe because i'm posting two to three times a week and i'm really enjoying this course so i would massively appreciate if you guys could help support the channel and i see you guys next time [Music] [Applause] [Music] [Applause] [Music]

Channel: PedroTech

Views: 44,738

Keywords: css, javascript, learn reactjs, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, react course, reactjs course, react beginner course, complete react course beginner to advanced, code ninja, code evolution, learn react, react beginner tutorial, useeffect, use effect, react component lifecycle

Id: yHdX4dCl5CY

Length: 19min 24sec (1164 seconds)

Published: Mon Jul 25 2022