Grokking Component Lifecycle’s

React components live certain life events that are called lifecycle events. These lifecycle’s events are tied to lifecycle methods. I discussed several of these methods at the start of this chapter when discussing the creation of components.

The lifecycle methods provide hooks into the phases and the nature of a component. In the code example, taken from section 6.2, I am console logging the occurrence of the lifecycle events componentDidMount, componentWillUnmount, and getInitialState lifecycle methods.

source code

The methods can be divided into three categories (Mounting, Updating, and Unmounting phases).

Below I show a table for each category and the containing lifecycle methods.

Mounting Phase (happens once in a components life):

“The first phase of the React Component life cycle is the Birth/Mounting phase. This is where we start initialization of the Component. At this phase, the Component’s props and state are defined and configured. The Component and all its children are mounted on to the Native UI Stack (DOM, UIView, etc.). Finally, we can do post-processing if required. The Birth/Mounting phase only occurs once.” - React In-depth

















MethodDescription

getInitialState()

is invoked before a component is mounted. Stateful components should implement this and return the initial state data.

componentWillMount()

is invoked immediately before mounting occurs.

componentDidMount()

is invoked immediately after mounting occurs. Initialization that requires DOM nodes should go here.

Updating Phase (happens over and over in a components life):

“The next phase of the life cycle is the Growth/Update phase. In this phase, we get new props, change state, handle user interactions and communicate with the component hierarchy. This is where we spend most of our time in the Component’s life. Unlike Birth or Death, we repeat this phase over and over.” - React In-depth





















MethodDescription

componentWillReceiveProps(object nextProps)

is invoked when a mounted component receives new props. This method should be used to compare this.props and nextProps to perform state transitions using this.setState().

shouldComponentUpdate(object nextProps, object nextState)

is invoked when a component decides whether any changes warrant an update to the DOM. Implement this as an optimization to compare this.props with nextProps and this.state with nextState and return false if React should skip updating.

componentWillUpdate(object nextProps, object nextState)

is invoked immediately before updating occurs. You cannot call this.setState() here.

componentDidUpdate(object prevProps, object prevState)

is invoked immediately after updating occurs.

Unmounting Phase (happens once in a components life):

“The final phase of the life cycle is the Death/Unmount phase. This phase occurs when a component instance is unmounted from the Native UI. This can occur when the user navigates away, the UI page changes, a component is hidden (like a drawer), etc. Death occurs once and readies the Component for Garbage Collection.” - React In-depth









MethodDescription

componentWillUnmount()

is invoked immediately before a component is unmounted and destroyed. Cleanup should go here.

Notes

  • componentDidMount and componentDidUpdateare good places to put other libraries’ logic.
  • Read React In-depth for a detailed look into the React component lifecycle events
  • Mounting Phase follows this order:

    1. Initialize / Construction

    2. getDefaultProps() (React.createClass) or MyComponent.defaultProps (ES6 class)

    3. getInitialState() (React.createClass) or this.state = … (ES6 constructor)

    4. componentWillMount()

    5. render()

    6. Children initialization & life cycle kickoff

    7. componentDidMount()

  • Updating Phase follows this order:

    1. componentWillReceiveProps()

    2. shouldComponentUpdate()

    3. componentWillUpdate()

    4. render()

    5. Children Life cycle methods

    6. componentDidUpdate()

  • Unmount Phase follows this order:

    1. componentWillUnmount()

    2. Children Life cycle methods

    3. Instance destroyed for Garbage Collection