JS.REACT.NO.UNSAFE
Prevent usage of unsafe lifecycle methods
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:
Copy
class Foo extends React.Component {
UNSAFE_componentWillMount() {}
UNSAFE_componentWillReceiveProps() {}
UNSAFE_componentWillUpdate() {}
}
Copy
const Foo = createReactClass({
UNSAFE_componentWillMount: function() {},
UNSAFE_componentWillReceiveProps: function() {},
UNSAFE_componentWillUpdate: function() {}
});
Examples of correct code for this rule:
Copy
class Foo extends Bar {
UNSAFE_componentWillMount() {}
UNSAFE_componentWillReceiveProps() {}
UNSAFE_componentWillUpdate() {}
}
Copy
const Foo = bar({
UNSAFE_componentWillMount: function() {},
UNSAFE_componentWillReceiveProps: function() {},
UNSAFE_componentWillUpdate: function() {}
});
Rule Options
Copy
...
"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:
Copy
class Foo extends React.Component {
componentWillMount() {}
componentWillReceiveProps() {}
componentWillUpdate() {}
}
Copy
const Foo = createReactClass({
componentWillMount: function() {},
componentWillReceiveProps: function() {},
componentWillUpdate: function() {}
});
Examples of correct code for this rule:
Copy
class Foo extends Bar {
componentWillMount() {}
componentWillReceiveProps() {}
componentWillUpdate() {}
}
Copy
const Foo = bar({
componentWillMount: function() {},
componentWillReceiveProps: function() {},
componentWillUpdate: function() {}
});