React Lifecycle, Part 1: Initialize and Mount

Full Stack Web and Mobile Applications with React, React-Native, iOS and Android

React Lifecycle, Part 1: Initialize and Mount

There is no shortage of documentation, tutorials, and blog posts available on the React component lifecycle. So why write another article on the subject? Much of the information out there describes the order of lifecycle processes, but falls short when it comes to providing specifics about why or when you would want to use them, and more importantly when NOT to use them. I went through a lot of trial and error learning the hard way what not to do through many failed attempts at trying to run certain types of operations at the wrong times. To be perfectly honest, this is actually a great way to learn, so I would encourage such experimentation. In doing so however, it is important to have resources that you can refer to when the confusion strikes about why something is or isn’t working, so I hope to provide such a resource that will supplement the many good articles and posts on this subject that are already out there.

General Overview: Application Lifecycles

In this context, a lifecycle refers to the initialization, creation, updation, and destruction of an object in the display hierarchy. When I talk about lifecycle methods, I am describing “hooks” that are available to be invoked at a specific time by an extending object. In traditional OOP languages, there is usually some kind of Override flag that signals that you are intending to override that method of the super class. With React you don’t have to make the call to super() or declare an Override. Put simply, during the initialization, mounting, updating, and unmounting, React will invoke the method if it exists in the extending object. If the method isn’t declared, no biggie, the lifecycle just continues. These “hooks” give you the opportunity to run operations at specific times though, allowing you to do things like supply data that will be needed or calculate display properties on elements that are to be rendered a certain way.

Figure 1 provides you with a high-level view of the React component lifecycle. Compared to many other client side app frameworks, the React lifecycle is really very simple. You have 3 processes in the component lifecycle: Initialization/mount, update, and unmount. In this article we will be talking about the initialization and mounting phase, portrayed by the purple boxes in Figure 1.

React Component lifecycle diagram

Figure 1: High-level overview of the 3 phases of the React component lifecycle


We’re now going to look at the methods of the component mounting phase of the lifecycle and how and why to tap into them at specific times.

Component Initialization and Mounting

These methods are only called once in the lifespan of the component. getInitialProps() and getInitialState() represent the initialization of the component.  Declaring this.state = {} with default values for the items you will be holding in state in the constructor provides React with the initial state in the getInitialState() method.


This is called before the component is initialized. This limits you to what you might want to do here because there is no access to the DOM and there is nothing to perform operations on. You can call this.setState() here, as you will see in a moment. Doing so may not trigger a re-render if that is your intention though, so use with caution. Set the initial state in the constructor, not here. A good reason to use this hook is when you need to connect to external APIs at the highest level of your application (eg. app.js).

componentWillMount() {
  this.firebaseRef = new Firebase("");
  this.firebaseRef.on("child_added", function(dataSnapshot) {
      items: this.items

This code is firing off an ajax call at using this.setState in the componentWillMount() method, before there is access to the DOM or anything to perform operations on. This may cause unexpected behavior. You are better off performing such an operation in the componentDidMount() because by then you have an actual component to this.setState() on. Just remember, the only time you will probably ever tap into componentWillMount() is in your app.js and that’s it.

React Component Lifecycle Initialization and Mounting Phase

Figure 2: React Component Lifecycle Initialization and Mounting Phase



This is the most important method to you when it comes to setting up your component when it is first mounted. API calls, display manipulations, and adding event listeners, and dispatching actions (if using redux) should all be done here.

componentDidMount() {
    window.addEventListener("resize", this.updateScale.bind(this));

    if(this.props.match.path === '/News_Current') {
      let breadcrumb = "News >> Current";
      var $win = $(window);
      var ww = $win.width();
      var wh = $win.height();
      var newScale = 0;
      if(ww/wh < this.baseSize.w/this.baseSize.h) { // tall ratio
        newScale = ww / this.baseSize.w;
      } else { // wide ratio
        newScale = wh / this.baseSize.h;        
      this.setState({scaleFactor: newScale}) 


Here we are adding a window resize event listener, and dispatching a redux action to update the breadcrumb in our navigation bar. We then capture the window’s dimensions in order to set the initial scale ratio to use as the multiplier for sizing the elements in the DOM. After that we call this.initialize() which sets off a chain of queries that captures the data we need and puts in the component’s local state to then send as props to the stateless components that are declared as JSX in the render() function.

In Part 2 of this entry, we will dive into the second phase of the React component lifecycle, the update process.


Leave a Reply

Your email address will not be published.