Skip to content
← Back to rules

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:

jsx
// 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:

jsx
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:

json
{
  "plugins": ["react"],
  "rules": {
    "react/no-unsafe": "error"
  }
}
ts
import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/no-unsafe": "error",
  },
});
bash
oxlint --deny react/no-unsafe --react-plugin

Version ​

This rule was added in v1.35.0.

References ​