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:

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/no-unsafe": "error"
  }
}

CLI

oxlint --deny react/no-unsafe --react-plugin

References

• Rule Source