no-unsafe.md

Prevent usage of unsafe lifecycle methods (react/no-unsafe)

Certain legacy lifecycle methods are unsafe for use in async React applications and cause warnings in strict mode. These also happen to be the lifecycles that cause the most confusion within the React community.

The rule checks the following methods:

• componentWillMount (and UNSAFE_componentWillMount alias)
• componentWillReceiveProps (and UNSAFE_componentWillReceiveProps alias)
• componentWillUpdate (and UNSAFE_componentWillUpdate alias)

Rule Details

The following patterns are considered warnings:

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

const Foo = createReactClass({
  UNSAFE_componentWillMount: function() {},
  UNSAFE_componentWillReceiveProps: function() {},
  UNSAFE_componentWillUpdate: function() {}
});

The following patterns are not considered warnings:

class Foo extends Bar {
  UNSAFE_componentWillMount() {}
  UNSAFE_componentWillReceiveProps() {}
  UNSAFE_componentWillUpdate() {}
}

const Foo = bar({
  UNSAFE_componentWillMount: function() {},
  UNSAFE_componentWillReceiveProps: function() {},
  UNSAFE_componentWillUpdate: function() {}
});

Rule Options

...
"react/no-unsafe": [<enabled>, { "checkAliases": <boolean> }]
...

checkAliases (default: false)

When true the rule will also check aliases of unsafe methods: componentWillMount, componentWillReceiveProps, componentWillUpdate.

The following patterns are considered warnings:

class Foo extends React.Component {
  componentWillMount() {}
  componentWillReceiveProps() {}
  componentWillUpdate() {}
}

const Foo = createReactClass({
  componentWillMount: function() {},
  componentWillReceiveProps: function() {},
  componentWillUpdate: function() {}
});

The following patterns are not considered warnings:

class Foo extends Bar {
  componentWillMount() {}
  componentWillReceiveProps() {}
  componentWillUpdate() {}
}

const Foo = bar({
  componentWillMount: function() {},
  componentWillReceiveProps: function() {},
  componentWillUpdate: function() {}
});