React Component Lifecycle Hooks / Methods

hey guys and girls today we're gonna look at lifecycle hooks and react just like in life you're born and you know you'll learn some skills you you get a job you get married you retire and then you die components go through also a life cycle they are born and there they they die also and in between they go to certain things and if you want to do specific things like for example if you want to make an AJAX call when example you do make it in the life of a component if you want to change the state when do you do it so this hooks are nothing but methods where you can you can do appropriate thing things and so we're gonna look at what can you do with each hooks and when they are called and why they are called so we can control things very smoothly and it they're they're very important to learn if you want to react because you can't just call things anywhere you need to make sure that you do it in the right hook by the way this is a part of a much larger series on react and if you're not following it I'll provide a link to the playlist so you can check it out and welcome to Texas tutorials [Music] all right so to begin with I have created a project using create react app I'm inside the APS and here all I have a simple render function it app is my main component so what we're gonna do we're gonna write our lifecycle hooks here when you create a component the first thing that runs is actually constructor so let's write a constructor here and when you write a constructor you have to have super I'm just gonna say console.log it's gonna print down the constructor so we can look at exactly when it's running in the lifecycle of a component there are three things the first thing is initial renner so when you create a component component we'll go through the first time it renders the second thing is if you change something like a state or prop or something the component will re-render itself based on that the change that you have made so that is a second kind of a list of lifecycle hooks that we're gonna look in it and the third thing is when you destroy the component what would happen so here we're gonna look at the initial render and the constructor only runs one time it only runs when it initially renders this is actually a good place to set the initial State and so I can simply say this dot state equal to John however you can also write this outside the constructor state equal to and name and I can call it Peter here so we would know which one really runs first inside here if I just simply do this this dot state dot name that the one that runs the second would override so John gets render that means that this runs first and then this runs we're gonna just remove this usually I I try to put the state here not inside the cancer but it is your personal choice what we're gonna keep the state inside a constructor for now after the constructor there is another method that runs which call component will mount remember the component hasn't mounted yet if I just simply console.log inside and I would say component will mount and we can look at it in which the constructor run first and then component will mount run second alright so what can you do in component bill mount you have already drawn the constructor but the render hasn't happened yet you have the state and initial state and initial prompt you can actually change the state so you can do set state in computer will mount why would you do that why would you set state even after setting up the initial State in the constructor well some time based on the props you want to change the state and this would be in an ideal place to do it because the component hasn't made render so if I change the state right now the component is not gonna read render itself because it hasn't render because you go into the first initial state also component will mount only runs once and that is doing the initial render so what else can you do it so if you want to do something with the global events like a window or document you can set it here if you want to so let's do that window dot let's say inner width I'd say if it's less than 500 then I want to set this into a state so I can say dot set state enervate equal to window dot in a quick print that value here so I can say this dot State DOT inner width so we can look at it I'm just gonna pipe it here in between so this should be so now if I look at it well nothing prints here that is because my window is still greater than 500 pixel so to to see it if I just squeeze my window and then I have to re load it because it only happens during the initial state so now I can see that inner width is 428 I can set state a component will mount hook another important thing to notice is this is the only hook that executes on server rendering and we are not gonna cover it over here but just to let you know the next hook would run is render so which we already have every component should have a render method so let just here if I'm going to console.log vendor here and if I save it in the console I can see constructor then component will mount and then render method happens now when render happens it's basically rendering the component so basically it takes the state and the props and renders our component so what should not be done in render I would suggest not to call the sent state in render but let's say if you could do it then as soon as you do that you would get another render right because render is a is a method that calls called every time you change the state or prop don't set the state in render and also another important thing to notice is let's say your component have a child component and it can have its own children and you know a tree of components right so when you do a render it would go through the cycle of building each sub component and each sub component each child component basically would go to constructor component will mount render and from top to bottom all the way before your your parent component finishes rendering so that brings to our next hook call component did mount which means before render it was component will mount and after render its component dip mount which means it has already rendered component did mount and I can simply console.log it here alright and let's look at it so as we can see constructor component will mount render and component in mount now important thing to notice is since this component doesn't have any children if he add a children then we would we should be able to see how the children gets render so let's do that so what I'm gonna do is I'm going to create another component a new file I'm just gonna say child died GS copy everything that I've done here we're gonna call it child and constructor we're now gonna state here we're just gonna say child constructor and we're not gonna do this here we're just gonna say child component val mount child component bit mount child render we are not going to do anything else here and then in the end we can export the child now in the app dodgiest we need to import the child import child from child and in here I can have child and I can also pass some prop called name equal to this dot state dot name inside the child we can say name this props dot mean okay so now let's see what it renders alright so now you can see that it's rendering the child and if you look at the chronology now so first the app components constructor runs then app components constructor component will mount runs and then render and then it doesn't run the component did mount but instead it would run child's constructor a chance comparable now Charles render and then child's component in mount and then the app component a mount so that the component did mount actually if you have a hierarchy of component the the last one would run first and then it would go up the chain and the app component component big mount run in the end because when you render a component you need to render everything else before you can say I finished rendering right basically I am completely mounted so did a component in mount also is only runs once and only runs during the initial initial cycle so what can you do in component did mount you can make actually if you want to make an AJAX call you can make an AJAX call here this is the right place to do this is also a good place to set up any subscriptions if you want to but make sure that you unsubscribe when there is a method called a component did unmount when the component dies so make sure that you clean it up you could actually call set state in component dead mount but when you do that it would basically read render the component okay so these are the the methods hooks for the initial rendering now let's look at what happens if you change the state when the component re-renders what are the ways to read under component when you change the state it should read under when you change a prop it should read under or you can specifically call all force update method basically saying I don't really care just read under and the situation it would be tender so let's try to rerender so basically we can start with the chained state so in the app what I can do is I can have a button and I can say change and inside the button I can have on click event and when this runs I can simply don change state event which we haven't written so I'm just gonna write here change state and all it's gonna do here is this that set state and just gonna change the name to let's say Jill okay yeah I have to say mind this and now if I click on it when I change the state it only runs render so we don't have we haven't put the any other hooks right now when it rear Enders the only hooks running is a render and then child render so let's look at the hooks when you read render your component so the first hook is called component will receive props lets console.log it to see when does this happen and i can do the same in the child here i'm just gonna say child component will receive prop so here the child will receive pop runs but the main components amount doesn't run i'm assuming that is because I don't have any props in the the main components so what can we do here in the component will receive props we will have a glimpse of upcoming state and the prop right because either you're changing a state or a changing prop you could set state here if you want to but let's say if your change is triggered because of another sad state it should be ignored because it doesn't make sense and philately don't try to change any props in this matter so that's the main important thing to notice all right so the next hook is should component update it sounds more like a question let's say if you want to make a decision that you want to rear ender it or not you can make that decision here based on whatever logic that you want to make a decision on and so this method actually has you have to return something you if you return true which means it will go through the rendering if you return false then the rear end ring would stop here should not further and you would also have argument here it would have your next Pro and next stake here so you can use those to make your decision I should console.log here and I should have the same matter in child I should say child here because it's a child all right so five on this component update and child now let's say if I do false for child so instead of true if I say false then let's see what happens so after the initial state if I click on here it basically stops the event read rendering of it so that's why you would see in the outer the name is Jim but inside I can still I have still the old name which is John because I stopped the read rendering of the child component I say true then I would say both Jim so initially it's John here and here and if I change the state now I see Jill in both places also another important thing you notice is that let's say if you changing a state or prop this method should run and you can make a decision if you want to continue the update or not but if it's if it's happening because of the force update method which means you're really forcing it to update then the method would not even run because if you're forcing it there is no need to make a decision right because you already made it to see you divorce update it so alright so the next method is I know there are lots of methods call components will update alright so and I can also alright so after the initial run if I change the state then after should component update component will update one it's the same thing for the child component will update and what's significance of this method component will update this is similar to component will mount when you do an initial render basically if you want to set some variables based on the state and props you can do it because you have state and prop available what you should not do is run the set state here because if you do that then there will be another component will update and it will take you in an infinite loop so don't do sets stay here so after the initial state when I change the state as you can see it component will update and then it renders here also component will update and it renders so render happens after that right after that you will have component did update so let's do that one so instead of will I have component did update and component data update has previous props a previous state available so what is the significance of this method component data update so let's say if you want to setup some third-party UI elements you can you can do do that here okay so now we have looked at the initial render and the rerender cycle now let's look at the it unmounted so when a component dies there's one method that runs its call component will unmount component will unmask so I can just console.log it here and the same thing I can do for a child for so what do you do when you unmount it if you if you have done something when you have mounted you can undo that when you unmount it so you can do a lot of cleaning up now there is no component did unmount because once it unmounted you don't have any because it's gone that the component is consoling there is no method call didn't man so this is only method now how do you really test the unmount what I'm gonna do is something strange I can have a button here and on click equal to it would basically unmount unmount child so it's gonna say and mount child so how should we unknown this child so here I can write this method on mum child so just for sake of this example what I can do is when I click on it it should render completely just an empty div for this component so there won't be any child left so what I can say and this can be done by setting some States so let's say if I set a state name let's say equal to Robert so when I when I set state to Robert I should check here if it's Robert then instead of rendering the child and I managed to just render empty there so here I can say if this dot state dot name that's equal to Robert then return an empty div alright else it should return whatever it's returning okay and so when I do that it should unmount it so let's look at it so this initial amount I close it now if I click on the unmount mmm the component is gone the child component and as you can see here the child child uncompleted will unmount method runs so this is how you unmount all right so I hope you learned something from this tutorial and if you did um you can help me by liking the video providing a nice comment and/or you can support the channel on patreon I'll provide a link here or you can translate this video for me I'll provide a link in the description and thank you

Channel: techsith

Views: 103,428

Keywords: React 16, React Lifecycle hooks, React components, Lifecycle methods, ReactJS, React fiber, React js, React tutorials, React lessons, Reactjs Component lifecycle, react 2018, react from scratch, reactjs tutorials, techsith, techsithtube, componentDidMount, componentDidUpdate, componentWillUpdate, componentWillMount

Id: kVyrzn29QPk

Length: 22min 2sec (1322 seconds)

Published: Mon Jan 29 2018