Lifecycle methods

Each component has several “lifecycle methods” that you can override to run code at particular times in the process. Methods prefixed with will are called right before something happens, and methods prefixed with did are called right after something happens.

Resources

• Official documentation on lifecycle methods https://reactjs.org/docs/react-component.html#the-component-lifecycle

• React Lifecycle Methods- how and when to use them – by Scott Domes https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1 (release date: March 28 2017)

Overview

Here is the overview of the lifecycle methods and examples of what can be done inside these methods:

Mounting

These methods are called when an instance of a component is being created and inserted into the DOM. They are listed in the order they are called.

Lifecycle methods mounting

constructor(props)

The constructor gets exectured as soon as your component gets instanciated. Meaning, as soon as it is called in a render function of an other component. It takes the props of the components as parameters.

Usually, you can set your initial state in the constructor or bind this to your class methods. Ex:

  constructor(props) {
    super(props);
    this.state = {
      loaded: false
    };
    this.myClassMethod = this.myClassMethod.bind(this);
  }

See real live examples

componentWillMount()

At this point, your constructor has been called and nothing much has changed in your component. It has not yet been rendered. Don't call setState in here, if you find yourself wanting to do that, you probably need to set the default state instead. The most common use case that you can find will probably be an app configuration in your root component. ⚠️ Don't start AJAX calls in here. See below in componentDidMount

render()

This is where your component gets rendered. Nothing fancy here, you will just return your React elements.

componentDidMount()

At this point, your component has been rendered and is living. This is where you probably want to start AJAX calls if you have some to do.

Here is why you shouldn't do it in the componentWillMount and do it here instead:

You can’t guarantee the AJAX request won’t resolve before the component mounts. If it did, that would mean that you’d be trying to setState on an unmounted component, which not only won’t work, but React will yell at you for. Doing AJAX in componentDidMount will guarantee that there’s a component to update. – Tyler McGinnis / original post

Things you can do here:

• Start AJAX call to get your component's data.

• Draw on a <canvas> element that you just rendered.

• Add event listeners, ex:

  componentDidMount() {
    addEventListener(document, 'keyup', this.handleKeyEvent);
  }

At this point, you also can call setState.

See real live examples

Updating

An update can be caused by changes to props or state. These methods are called when a component is being re-rendered:

componentWillReceiveProps(nextProps)

This method is not called on the first render during mounting and calling setState will generally not trigger it neither.

This function will be called when your component is receiving new props. When a parent component is rerendering its children for example.

In this method you can perform state transition by calling setState.

⚠️ Note that React may call this method even if the props have not changed

shouldComponentUpdate(nextProps, nextState)

This is where optimizations happen. This method is called before any render or calculation has been done. This is where you have the chance to prevent from anything to happen if you think that given the new props or state of the component, the component will stay the same.

This function should always return a boolean to tell React if it has to rerender or not the component.

Example:

  shouldComponentUpdate(nextProps, nextState) {
    return this.props.engagement !== nextProps.engagement 
      || this.state.input !== nextState.input;
  }

Use case: You need to gain performance and your component is being rerender too often when it does not need to be. In depth example by Scott Domes

componentWillUpdate()

Like componentWillMount, componentWillUpdate is called right before rendering the component. Similarly, you can't call setState here.

Most Common Use Case: Used instead of componentWillReceiveProps on a component that also has shouldComponentUpdate (but no access to previous props).

See real live examples

render()

Same old render function.

componentDidUpdate()

Most Common Use Case: Updating the DOM in response to prop or state changes.

See real live examples

Unmounting

This method is called when a component is being removed from the DOM:

Lifecycle methods unmounting

componentWillUnmount()

Things you can / should do here:

• Cancel any outgoing network

• Unmount event listeners you have previously bound to, ex:

  componentWillUnmount() {
    removeEventListener(document, 'keyup', this.handleKeyEvent);
  }

  See real live examples