no-unsafe.md

react/no-unsafe

📝 Disallow usage of unsafe lifecycle methods.

🚫 This rule is disabled in the ☑️ recommended config.

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

Examples of incorrect code for this rule:

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

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

Examples of correct code for this rule:

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.

Examples of incorrect code for this rule:

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

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

Examples of correct code for this rule:

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

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