ReactJS Tutorial - 23 - Component Mounting Lifecycle Methods

in this video let's take a look at the mounting lifecycle methods that is methods which are called when an instance of a component is being created and inserted into the Dom and we will be going through them in the order that they are invoked so first we have the constructor it is a special function that will get called whenever a new component is created now what is the constructor used for well the constructor is perfect for initializing state or binding the event handlers to the class instance what you should do in a constructor is cause side effects for example you should never make HTTP requests from within a constructor there are also two important points to keep in mind when it comes to defining your own constructor the first one is that you have to call a special function called super this will call the base class constructor in our component we have access to this dot props only after we have initially called super passing in the props as an argument the second point is that constructor is also the only place where you are expected to change or set the state by directly overwriting this dot state fields in all other scenarios you have to use this dot set state as a constructor set initial state find event handlers and don't cause any side effects like making Ajax calls for example the second method we have is a static method get' derive state from probes of the react documentation classifies this method as a rarely used lifecycle method this method is basically used when the state of the component depends on changes in props over time so let's say you have a component but the initial state of the component depends on the props being passed to the component in such a scenario you can use this method to set the state since this method is a static method it does not have access to the disk keyword so you cannot call this dot set state with in this particular method instead you simply have to return an object that represents the new state of the component again what you shouldn't do is cause side effects for example fetching data from an endpoint so get derived state from props use it when state depends on changes in props over time and also did not cause any side effects the third method is the render method which by now we are quite familiar with the render method is the only required method in a class component in the render method we simply read this dot props and this dot state and return the JSX which describes the UI the render function is a pure function for the given props and state it should always render the same UI what you should not do here is changing the state of the component or interacting with the Dom or making any Ajax calls since it is the render method GSX which also contains the other children components right after the parent render method the children components lifecycle methods are also executed we will see this order of execution very shortly in code so render method read props in state and return the JSX the final method which is part of the mounting phase is component dead mount this method will be called only once in the whole lifecycle of a given component and it is invoked immediately after a component and all its children components have been rendered to the dawn this method is the perfect place to cause side-effects you can interact with the dawn or perform any Ajax calls to load data so component did mount is a good place to perform initialization that requires Dom nodes and also load data by making Network requests all right now that we have a good understanding of the four methods and what can or cannot be done in each of the methods let's head over to the code and see their order of execution back in vs code I'm going to start off by creating a new file the file name is going to be life cycle a dot J s within the file I'm going to use the react snippet RCE to create a class component I will get rid of the named export though and include the component in app component now let's add the different lifecycle methods first we have the constructor I'm going to use the react snippet iconst to create a new constructor within the state I will simply add a property mean initialized to vishwas we don't really need the state in this video but we will make use of it in the next video what we do need though is a console log statement to understand the order of execution so within the constructor console dot log lifecycle a constructor the second method we have is the static method get' derived state from probs say static get derived state from probes and this method gets access to probes and state as parameters and has to return the new state or null to keep it simple let's return null and to track the execution order I will add a console lot statement which says lifecycle a get derive state from props make sure to include the static keyword or else the method will be ignored the third method we have is the lender method which is already present in the JSX I will simply add the text lifecycle a and I will add the consulate statement to track the execution order life cycle a render now the final method is component dead mount I'm going to add it before the render method component dead mount and within the body we will simply log to the console life cycle a component did mount now let's save the file and head to the browser if I open the console you can see the order of execution first we have the constructor then we have get derived state from probes after that the render method and finally component did mount this is the order of execution during the mounting phase now let's see what happens when the component has a child component I'm going to go back to vs code and create a new file lifecycle B dot J s I'm going to copy the content from lifecycle Aegeus and paste it in lifecycle b dot j s after that i will replace all occurrences of life cycle a with lifecycle be you and in the lifecycle a component I will include lifecycle B component so parenthesis and closing div tag move this inside and then add lifecycle B component so we have life cycle a as the parent component and life cycle B as the child component let's see what happens to the order now if you take a look at the console you can see that first we have lifecycle a constructor then lifecycle a get derived state from props that is followed by the render method of lifecycle a but after that we have the lifecycle methods of the child component which is lifecycle B the constructor get derive state from props render and component did mount because the render method knows about the children components the execution passes on to the children after the parent component render method the child component methods are then executed in order constructor the derive state from props render and component did mount after the child component has completely rendered the parent component component did mount is executed it is really important to know the order of execution because it helps you avoid writing code that might have unexpected behavior so this is the order of execution during the mounting phase in the next video let's take a look at the different lifecycle methods and their order of execution during the updating phase of a component thank you guys for watching don't forget subscribe I'll see you guys in the next video

Channel: Codevolution

Views: 175,698

Rating: 4.9652309 out of 5

Keywords: Codevolution, React, React Tutorial, React Tutorial for Beginners, React Basics, React Fundamentals, Reactjs, Reactjs Tutorial, Reactjs Tutorial for Beginners, React.js, React js, Component lifecycle methods, React lifecycle, React lifecycle methods, mounting methods

Id: KDXZibVdiEI

Length: 10min 37sec (637 seconds)

Published: Mon Dec 24 2018