ReactJS Basics - #14 Component Lifecycle

welcome back to yet another video we learned a lot about components and react chess in general how to output data how to work with the HTML like code in our components and how to use state how to change the state of our components and how we to re-render the UI when a state change appears we all rather look at cross component communication how to change to exchange data between components now components in react js' follow a life cycle for all these tasks based basically so each component has a life cycle and different hooks or events or phases in this life cycle get trigger upon different un's now let's have a look at this life cycle it's slight time again but slightly make sense here when you create a new component and with that I don't mean encode but when it gets loaded in your running application the very first method which gets called provided that you implemented it in your class otherwise it gets ignored is component well mount so that's a protected method name and you can implement this map if you don't have to and if you have it then it will get executed and component will mount will get executed right before the initial rendering so right before your render method gets executed then component will mount get in it gets executed component dip mount is the next method in the life cycle this method here is being run by react.js after the initial rendering immediately after the initial rendering thereafter we're each component will receive props this will be executed whenever the component is about to receive new props so with the props changed because a state changed happened or something like that then this hook here is executed then we have shift component update it sounds like a question and it really is because this is executed before it rerender said Saudi react.js recognized that there is a reason to re-render the component and now it's figuring out should i re-render and i told you that a dust is with the virtual dawn but it also executes you should component update method and here you can return false to prevent it from rendering so if you know that you don't want to re-render because you may have some logic in the should component update method where you check something and then you know nope no reason to reread err then you basically take this task off react.js and just tell it don't we render this component no matter what your words will Don thing says so then component will not get rear-ended well we also have component will update which I think that make sense gets executed after should component update return true or didn't return false at least then component will update as run this component is called before rendering but after new props or state were received and after should component update well they didn't return false at least then we have component did update which is executed after reread routing the component so after it actually has been rear-ended and Dom the actual Dom has been updated and then we also have component will unmount which gets executed whenever you're removing this whole component from the Dom for example through routing or as you will see in an upcoming sample some other ways of basically removing it so that's the theory let's see all these hooks in action now I'll go into my home component once again and I got quite some logic in this file already but shouldn't be an issue and here I will add console.log to my constructor well just say constructor so that we see where we are at we then will be able to see the whole lifecycle in our JavaScript log so the next after I add is component well mount you learn to this is the first method in your lifecycle hook which gets executed and I will keep the order from the slides here so component will mount execute this component will mount we're at this point now if we call this set state in component will mount then the render method will already take this new state into account so only one rendering will be executed because we haven't rendered yet so changing the state doesn't trigger a rerender the initial rendering will be changed instead so we only have one rendering phase still so then we have component dip mount next which is executed after what our rendering occurred so here we can execute console.log component dip mount like that then we have component will receive props whenever some properties get updated and therefore this map here actually gets these props next props so here i will log component oops as a string maybe component will receive props and then also print these props to the console then we have component excuse me should component update where we get our upcoming props and the next state because of course the update only is something which may happen with new props or a new state so it should be component update well let's first print that we are at this point should component update and then i want to print props and next state and I will return true so that we do continue here then I have component will update so we know that we want to so now we're right before doing it again here we have the next props and the next state available we do have this as you can see in all the update related hooks so component will update is to place where we are now component will update pasty next props and state here to there after we reach component did update of course here we get the previous props and previous state because now we don't have next props the next state because the update already happened so the old state is the current state we don't have an upcoming state or properties props so component did update let's lock this to the console component did update and then previous props and previous state like this and then finally almost there component will unmount so here I log console log component will unmount like this so all the states are setup here now I want to make some additional changes so that we can well as that some of these states get triggered or a some of these hooks get actually triggered for example we'll add mount currently wouldn't get triggered so let me change something so that we do see all of these you web is getting over all of these hooks getting executed for that I'll go to my index dot J's file and I'll add something to the initial state here to the state of this component I'll name it home mount it and this is true this will decide on whether this home component should be mounted or not I'll then add you manicure on change home mounted where I want to set the state this set state and change the state of this home mounted key or property and I basically want to reward it so if it was mounted before it should be unmounted and vice versa with that in my renderer function urine well to make this a bit cleaner to see I'll create a new variable home component here which is empty string by default so nothing basically no component will not get added to the dawn but if this state home mounted if that is true that's what I'm checking here it's a boolean in the end right then home component should equal this remember you can write stuff like that because it's all JavaScript here that's really important to keep in mind it's all JavaScript it's not HTML even if it looks like that so here I'm creating home components setting it equal to this now just to make it look a little bit nicer I'm going to restructure it like that would have worked the other way too but now it's a bit easier to read so that doesn't change that's still my home component but down here I want to render home component and keep in mind that's either an empty string so nothing or it is my home component and it will only be my home component if this state home mounted is true so all that's left to do for me now is to add a button which allows me to change this state whoops didn't mean to cut this on copying this row add a button Europe where I say unmount home component and in parentheses because I could also mount it if it was unmounted give it some styling as always should look nice and then of course at the onclicklistener or event handler to execute this on change home mounted without parentheses but since we use this in this method we have to bind this so make sure to add bind this with that in place let's head over open the console so that we can actually see something I'll clear it and now I'll reload this page so we see we reached a constructor here I'll actually increase this in size a bit we reached a constructor then we reached component will mount then we reach component dip mount just reloading it so that we can clearly see it component will mount component dead mount right then we get the ship component update hook here getting executed we'll update dead update why does this take a couple of seconds look again I reload we only see until dead mount we don't see anything related to updating well the reason for all these update related routes your of course is that this state has changed remember we still have this counter in our home component here and this changes the state which of course then triggers all the update related hooks which is should component update component will update component did update now here if I were to say in short component update if this state status excuse me if next state if next state status equals 1 in this case return false now if I save this reload is reload the page well now you see only ship component update gets executed not the other two methods and the status isn't changed because now we returning faults I'm overriding the default behavior off react yes and I'm telling it nope don't update I know what I'm doing I don't want to re-render it if the view even though we know the status has changed to 1 nothing is rear-ended if I click on make me older button here we see we reach should component update but since these net status in our next status is still 1 we're still blocked and we don't see that change to so that's important to keep in mind next state is also affected here or that also has in fact if we then change something else since the next state is the overall state object and if status there still is zero well then we're still getting blocked even if we now change something else I hope that makes sense next state is your state object here and your next state of say this is one so now we're dead for all the future doesn't work I can show you by reloading and hitting make me older instantly now you see where we word with that action before the three seconds expired before status was changed to 1 therefore we see the change and we see that we executed should component update status is zero therefore we were successful then component will update was called right before updating and then component did update after it updated to Dom so that are all the update related hooks and thereafter we're again at should component update because the state has changed it changed to 1 therefore everything was blocked now I will comment out this check here because I don't want to block all the updates so reload the page again and now we can see it successfully updates free so that was a lot of talking about the update related stuff but of course it's key to understand what's happening there and how you can control the updating behavior so we saw the constructor which technically is not a life cycle hook but just the constructor of this component then we see component will mount dead mount and then the free update related hooks if we have a look at our code we saw will mount dip mount and the update hooks so we didn't see well unmount and we didn't see well receive props well let's change something about that I emptied the console here again and now let's change this to changed like that now a whole lot of updating going on because we're changing your state with every keystroke so emptying the console again and now I'm going to click on change header link what do you expect to happen now probably you should get you should update stuff because the state changes right indeed we see should component update will update that update but before that we also saw component will receive props now why step the case what are these props were getting here well as you see we get the name and the age and both certainly didn't change but the initial link name changed to changed change to changed yeah that which is a great example by me but it changed to changed and the reason for that of course is that when we click on the change link change header link button we're executing this on change link remember which is in my index chairs file on change link name here I'm then changing the state and then I'm passing here I'm passing the initial link name so this changed State at state as prop to my home component again which is why as he received props first now you might say the state changed first why do AC receive props first well the reason is because just as the order of your live site logs yes the state changed first but short component update isn't even connected to the state change not directly at least it's just the hook which gets executed after will receive props so we really received new props because we changed the state in our parent component and then we execute all the aberrant components hooks here so the last missing hook is the unmount or the component will unmount hook so let's see this hook by clearing the console and clicking on unmount home component or unmount home component component will unmount what's called just like that so now we had the final change if I click on it again we see again component will mount dip mount and after three seconds to say that's changed again so that is how you can play around with that and how you can play around with the states and just try them out change some code in each hook and see what you can do there to which you got access and how the overall application behaviors behaves when you do so whoo so quite a big video again a lot of cover not only that video holds and all the other videos still get some upcoming content on the react channel before then moving on to react KS and redux see you there bye

Channel: Academind

Views: 179,749

Keywords: reactjs, react, tutorial, lifecycle, component lifecycle

Id: Oioo0IdoEls

Length: 18min 59sec (1139 seconds)

Published: Wed Sep 07 2016