react/no-unsafe Correctness
What it does
This rule identifies and restricts the use of unsafe React lifecycle methods.
Why is this bad?
Certain lifecycle methods (componentWillMount, componentWillReceiveProps, and componentWillUpdate) are considered unsafe and have been deprecated since React 16.9. They are frequently misused and cause problems in async rendering. Using their UNSAFE_ prefixed versions or the deprecated names themselves should be avoided.
Examples
Examples of incorrect code for this rule:
// By default, UNSAFE_ prefixed methods are flagged
class Foo extends React.Component {
UNSAFE_componentWillMount() {}
UNSAFE_componentWillReceiveProps() {}
UNSAFE_componentWillUpdate() {}
}
// With checkAliases: true, non-prefixed versions are also flagged
class Bar extends React.Component {
componentWillMount() {}
componentWillReceiveProps() {}
componentWillUpdate() {}
}Examples of correct code for this rule:
class Foo extends React.Component {
componentDidMount() {}
componentDidUpdate() {}
render() {}
}Configuration
This rule accepts a configuration object with the following properties:
checkAliases
type: boolean
default: false
Whether to check for the non-prefixed lifecycle methods. If true, this means componentWillMount, componentWillReceiveProps, and componentWillUpdate will also be flagged, rather than just the UNSAFE_ versions. It is recommended to set this to true to fully avoid unsafe lifecycle methods.
How to use
To enable this rule using the config file or in the CLI, you can use:
{
"plugins": ["react"],
"rules": {
"react/no-unsafe": "error"
}
}oxlint --deny react/no-unsafe --react-plugin