Welcome Guest! (App Version 5.16)

websitnero logo name

Component Life Cycle

Component Life Cycle

While working with react often you want to do manipulations - sometimes in DOM, sometimes with state, sometimes with props, etc.

You can do so by placing the code in a respective function out of several available. Each of these functions run in a certain order and have their own importance.

It is important to understand all these functions with regard to Component so that you do not get error and your functionality runs fine.

Also, remember "Constructor Function" is the first function to run in a Component much before than any other "Life Cycle Hook".

Note: Every single component in React App has its own specific "Life Cycle Hooks", which can be defined as a series of methods (predefined functions) which are invoked at different stages of component's existance and always run in a certain order.

Stages in Component's Life

There are 4 stages in a components life-cycle:

  • Initialization: At this stage a component is constructed withe given props and a default state. This is done in the constructor() function of a Component.
  • Mounting: Mounting is the stage of rending JSX code returned by the render() method itself and updating the DOM.
  • Updating: In this stage "state" of the component is updated and UI is updated accordingly.
  • Unmounting: Unmounting is the final step and at this stage "Component" is removed from the UI page and DOM.

For each of these stages "React" provides certain pre-defined functions that can be used to execute login in desired stages in a component's life cycle.

4 Life-Cycle Stages (with In-Built Functions)

1. Initialization: This refers to the initial work of setting props (coming from parent) and intial state in a component. This is all done in the Constructor() function of a component which runs before any other function by design.

class Person extends Component{
  constructor(person_name, person_age, person_country){
    super();
    this.state = {
      name: person_name,
      age: person_age,
      country: person_country
    }
  }
}

2. Mounting: Mounting phase starts when intialization of the component is completed and Component is to be mounted on the DOM and rendered for the first time on the webpage. Following are the pre-defined methods that run in this phase:

  1. componentWillMount(): This function runs just before the component is going to be mounted on DOM which means just before render() function is going to be executed for the first time.
  2. componentDidMount(): This function runs right after component has been mounted on the DOM which means it gets executed right after render() function has been executed for the first time.

3. Updation: Now, after the component is rendered on the UI and user can see it as part of the complete web page. It might happen that user clicks a button, loves a post and increase its count or enter some data into a form component.

In all such cases the webpage is same and it doesn't need refresh, but still the values of state or props might change for a component and these values are to be updated in the DOM chain of all relevant components.

In this phase the updation of state, props, UI happens as per the change in state values.

There are 5 functions in this phase:

  1. componentWillRecieveProps():
  2. setState():
  3. shouldComponentUpdate():
  4. componentWillUpdate():
  5. componentDidupdate():

4. Unmounting: Unmounting is the final phase in the "component life cycle (React)". Here, component will be unmounted or removed from the HTML dom. This function is invoked just before the component (itself) is going to be removed from the page or HTML dom.

  1. componentWillUnmount() Function: This is the only function that is present in the "Unmounting Phase" or the last phase of the "React Component LifeCycle". If you want to complete some task just before the component is removed from page or html dom, write your code-logic here. For example, "Thank You for submitting the form. Your data is saved!" and then go to the submitted data reciept page.
WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.