Why is this an issue?

React works in two phases: render and commit.

• The render phase determines what changes need to be made to e.g. the DOM. During this phase, React calls render and then compares the result to the previous render.
• The commit phase is when React applies any changes. (In the case of React DOM, this is when React inserts, updates, and removes DOM nodes.) React also calls lifecycles like componentDidMount and componentDidUpdate during this phase.

Render phase lifecycles include among others, the following lifecycle methods:

• componentWillMount (or its alias UNSAFE_componentWillMount)
• componentWillReceiveProps (or its alias UNSAFE_componentWillReceiveProps)
• componentWillUpdate (or its alias UNSAFE_componentWillUpdate)

These are considered unsafe and also happen to be the lifecycles that cause the most confusion within the React community and tend to encourage unsafe coding practices.

class Foo extends React.Component {
  UNSAFE_componentWillMount() {}         // Noncompliant
  UNSAFE_componentWillReceiveProps() {}  // Noncompliant
  UNSAFE_componentWillUpdate() {}        // Noncompliant
}

How to fix it

Instead of componentWillUpdate, use getSnapshotBeforeUpdate together with componentDidUpdate. The getSnapshotBeforeUpdate lifecycle is called right before mutations are made. The return value for this lifecycle will be passed as the third parameter to componentDidUpdate.

Instead of componentWillReceiveProps, Use getDerivedStateFromProps together with componentDidUpdate. The getDerivedStateFromProps lifecycle is invoked after a component is instantiated as well as before it is re-rendered. It can return an object to update state, or null to indicate that the new props do not require any state updates.

As for componentWillMount, React will call it immediately after the constructor. It only exists for historical reasons and should not be used. Instead, use one of the alternatives:

• To initialize state, declare state as a class field or set this.state inside the constructor.
• If you need to run a side effect or set up a subscription, move that logic to componentDidMount instead.

Code examples

Noncompliant code example

class myComponent extends React.Component {
  constructor(props) {
      super(props);
  }

  componentWillMount() { // Noncompliant: "componentWillMount" is deprecated
      if (localStorage.getItem("token")) {
          this.setState({logged_in: true});
      }
  }
  // ...
}

Compliant solution

class myComponent extends React.Component {
  constructor(props) {
      super(props);

      if (localStorage.getItem("token")) {
          this.setState({logged_in: true});
      }
  }
  // ...
}

Resources

Documentation

• React Documentation - UNSAFE_componentWillMount
• React Documentation - UNSAFE_componentWillReceiveProps
• React Documentation - UNSAFE_componentWillUpdate
• React Documentation - Migrating from Legacy Lifecycles