The Circle of Life: React Component Lifecycle v16.3

An updated overview of the React component lifecycle methods as of version 16.3.

Whoa Whoa Whooaaaa. Life and death is pretty serious, I’m just here to learn about React, what the heck is a lifecycle method?!?

Every class component that extends React.Component has access to what are called lifecycle methods. You can think of a component lifecycle like a butterfly’s lifecycle. The caterpillar sets the cocoon up, the butterfly is created, it flies around, makes baby caterpillars, and then it eventually passes. As a component is used in an application, it journeys through a similar lifecycle. During this lifecycle, we as developers, can hook into that lifecycle at certain stages in order to make our components do something. This is what lifecycle methods are for.

Lifecycle methods are declared on a class the same way any custom method can be declared on a class. You can just type out the name of the the method, add your parameters, and then add curly braces, like so render() { }.

import React, { Component } from 'react';
class Test extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    //Some jsx here
  }
}
export default Test;

When it comes to the React component lifecycle, there are 4 general stages. They are the initialization, mounting, updating, and unmounting stages.

Initialization — This is where we get ready to display our component to the world. If a constructor method has been declared, it will be executed in this step. The getDerivedStateFromProps method is also invoked in this phase, as well.

Mounting — Your component has been birthed, and is now mounted to the DOM! The render and componentDidMount methods are invoked in this stage.

Updating — When something is changed in your application, React will…..well react to those changes, and may update your components. The methods that are invoked in this stage are the getDerivedStateFromProps (yes, again), shouldComponentUpdate, getSnapshotBeforeUpdate, and componentDidUpdate methods.

Unmounting — Alas, all good things must come to an end. The componentWillUnmount method is invoked in this stage of the lifecycle.

Now, lets talk about each method’s role in the lifecycle.

Methods Covered

• constructor(props)
• static getDerivedStateFromProps(nextProps, prevState)
• render( )
• componentDidMount( )
• shouldComponentUpdate(nextProps, nextState)
• getSnapshotBeforeUpdate(prevProps, prevState)
• componentDidUpdate(prevProps, prevState, snapshot)
• componentWillUnmount()

The constructor(props) Method

• Invoked once
• Only needs to be added if you are binding methods, or initializing state.

A good place to:

• Set the component’s initial state
• Bind any methods that will be passed down as props

Not a good place to:

• Invoke the setState() method
• Make any HTTP requests

The getDerivedStateFromProps(nextProps, prevState) Method

• Invoked after the constructor method is invoked, but before the component is mounted. It is also invoked whenever the component receives new props. This method will also be invoked if the parent component causes the component to mount.
• This is a static method, so it does not have access to the this keyword, and therefore cannot reference the instance of the class.
• Returns the new state as an object, similar to the setState() method.
• Return null if no changes to state are needed

This is a new lifecycle method that was introduced in version 16.3. The main purpose of this component is pretty much what its name says. It allows the component to update its state based off of props that are passed into the component. In general, it is not advisable to have your state be dependent on props. If that is the case, you generally want to lift up that state to a parent component. If your state is not dependent on props, then this component does not need to be used. However, if you do need to have your props update your component state, then let me show you how it would work.

Since this method is invoked in two different cases, you will have to keep that in mind when setting this method up. If you know you are going to receive props that will update your state, you will need to create an initial state, which you will update when the new props are received. You need the initial state, so that when props get passed down, this method has a previous state to compare to the new props, to check for any changes. You can see below that an initial state was created as an empty array. That way when the parent component resolves an HTTP request, it will update its state and pass props down to this child component. When this child component receives the new props with the newly acquired array, it will compare that array to the previous state, which is an empty array. The method will then see they are different, and will set the state to the value of the nextProps.nameList, and that will trigger React to call the render() method.

A good place to:

• Update component level state, if dependent on props

Not a good place to:

• Make any HTTP requests

The render() Method

• Invoked multiple times, once before the component is fully mounted, whenever the component or its parent component re-renders, the forceUpdate() method is called, or if there is an error thrown while the application is using the componentDidCatch() method.
• The re-rendering can be controlled by another lifecycle method called shouldComponentUpdate(), which I will review further down this article.
• Return null to render nothing, keep in mind a node on the DOM will not be created
• The render() method should be pure, which means it does not modify state. It should return the same result each time it is invoked.

A good place to:

• Render your component

Not a good place to:

• Make any HTTP requests
• modify the state

The componentDidMount( ) Method

• Invoked once and immediately after a component and all of it’s sub-components rendered properly.
• You generally don’t want to call the setState() method from here, but if you need to do so, you can. It will cause the component to re-render, along with its children, but it will happen before the browser updates the screen. Therefore, the user won’t be able to to tell that the component was re-rendered. One reason to invoke setState is when updating the state based on some DOM property which can be only computed once a component has re-rendered (e.g. position / dimensions of some DOM nodes).

A good place to:

• Make any HTTP requests
• Initialize JS libraries that need access to the DOM
• Reach out to manipulate

Not a good place to:

• set the state, generally

The shouldComponentUpdate(nextProps, nextState) Method

• Invoked multiple times after mounting, whenever there is a change that would cause the component to re-render.
• Mainly used to tell React not to re-render the component. Re-rendering components needlessly over a large application can slow down performance, so checking this can help make for a more performant application.
• Returning false from this method will stop React from re-rendering the component and it will also skip invoking the componentDidUpdate method. This will not stop the child components from re-rendering if the THIER individual component state changes though.
• Returning true will cause the component to re-render, this is the default case.

A good place to:

• Make performance gains by comparing props and state

Not a good place to:

• Make any HTTP requests
• modify the state

The getSnapshotBeforeUpdate(prevProps, prevState) Method

• Invoked right before the most recently rendered output is committed to the DOM
• Enables the component to capture current values before the re-render has a chance to change them. This is can be used for capturing things like scroll position.
• Any value returned from this method will be passed to componentDidUpdate as a third parameter

A good place to:

• Collect DOM specific data before it is changed

Not a good place to:

• Make any HTTP requests
• modify the state

The componentDidUpdate(prevProps, prevState, snapshot) Method

• Invoked immediately after the component and all of its children re-render. This method is not called for the initial render.
• snapshot will be undefined if nothing was passed as an argument
• This method will not be invoked if the shouldComponentUpdate() method returns false.

A good place to:

• Make any HTTP requests
• Operate on the DOM, if need be

Not a good place to:

• modify the state, as it will result in a re-render

The componentWillUnmount() method

• Invoked immediately before a component is unmounted and destroyed.

A good place to:

• Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created

Not a good place to:

• To do anything else since the component is about to be destroyed

The Component Lifecycle Flows for Various Scenarios

Initial Cycle

Component Receives Props From Parent Component

Component Updates Its State

forceUpdate Method Invoked