Component Lifecycle Methods: The Mounting Phase

Loony Corn
A free video tutorial from Loony Corn
An ex-Google, Stanford and Flipkart team
4.2 instructor rating • 73 courses • 131,327 students

Learn more from the full course

Learn by Example : ReactJS

A step-by-step guide to component-driven development using React

07:34:33 of on-demand video • Updated January 2017

  • Decompose complex UI into simple and reusable components using React and JSX
  • Use props and state in the right way with components
  • Customize components using React lifecycle methods
  • Use mixins, ES6 classes, the React context and other advanced features
  • Work with React plugins for animations and routing
  • Use React in a production environment
English [Auto] Something that makes re-act components very cool to work with is the fact that every component in re-act has a complete lifecycle. This is called the component lifecycle. A component is created it's rendered into the dorm and at some point if what the component brain does is no longer needed it's removed from the door. This entire life cycle is captured in the form of certain methods which are coiled in every portion of the life cycle. There are a whole bunch of physics within the react components lifecycle. The very first of these is when a component is inserted into their dorm you first create the component. You decide how it looks and then you insert it into that. The second phase in the re-act components lifecycle is when this component is rendered so the DOM rendering to the Dom might happen multiple times because that component might be inserted once any updates of the component will cause early rendering. So insertion then rendering. And the third phase is when that component is removed from the Dom just like a comment which is no longer needed and you wanted deleted that component. And these are moved from the DOM each of these friezes have specific names in re-act inserting into a Dom is called mounding the rendering to the dorm is called updating a component and member aberration can happen multiple times for the same component. And finally removing the component from the DOM is called unmounting that comporting. And remember these items because they are very important in understanding what we're going to study next. The physics form the lifecycle of a component and each individual feeds has multiple methods that it calls on the Riak component. Each of the three this can be further divided into specific method calls. And the interesting thing about these specific method calls is that you as a developer can hook into these method calls and customize them any way you want. In this way you have complete control over the components lifecycle we start off by looking at the very first phase in the components lifecycle the mounting fees. There are four specific methods which are part of the mounting fears of a component. The very first of these is to get initial state get initial state to something that we are familiar with. We use it to set up the default value for the state properties for a component. This is part of the lifecycle fees. Monte within the mounting fees the next method that's called in order is the component the Mount method. This is the first time that the hearing are free. The third method that's called is the array and the method other than the function. This is again something that we are familiar with. This is where the component is actually displayed the screen. And finally after that and a function that component did my own method is the one that's called up in order to be able to plug in and customize this method. It's very important for us to know the order in which these methods are called in the münchen fees get initial state component will mount the component did mount. This is the order. Let's understand each of these methods in detail so that we know when exactly we need to add custom called the hook into these lifecycle methods. The very first one is one that we are familiar with the initial state it's called before a component is inserted into the dorm to set up the initial intrinsic state of the component. This intrinsic speed is something the component needs to determine what it has to display and the behavior it has to exhibit in the mounting phase before the component is inserted into the dorm after the get initial state that component will mount lifecycle methods called it's invoked immediately before the component is inserted into the DOM after the get initial state. And just before that insertion acts this method allows you to perform the last minute checks that you need before the component is rendered to screen. If you call the set state function within a component We'll mount the Viendo function will be called only once. It won't be called once again to leave and the component the act performs this optimization. Next up is the render method and one we are very familiar with this display is how the component will look given the current speed of the component. This is what the component uses to draw itself on to screen. This is one method where you do not want to call sets deep set state because the rain does. And if you call said state within that method you'll get into an infinite loop that sextape calls render render the set state and it goes on forever. The last lifecycle method that's called in the mounding fees before the component is inserted into the dorm is the component did Mom this is invoked immediately after the component is inserted into the dome the entire dome structure off the component has been set up at this point. So if you want to access any of the elements within the component in order to see an event handlers or extract the data that's present within that element. All of that is possible in component day mode. So manipulations and other interactions can be performed in this matter.