← Back to rules

react/no-unsafe 正しさ

何をするか

このルールは、安全でない React ライフサイクルメソッドの使用を識別し、制限します。

なぜ悪いのか

特定のライフサイクルメソッド（componentWillMount、componentWillReceiveProps、componentWillUpdate）は、安全でないとされ、React 16.9 以降で非推奨になっています。これらは頻繁に誤用されており、非同期レンダリングで問題を引き起こします。これらのメソッドの UNSAFE_ 接頭辞付きバージョンや、非推奨の名前自体を使用することは避けるべきです。

例

このルールに対して 不正 なコードの例：

// デフォルトでは、UNSAFE_ 接頭辞付きのメソッドが警告対象になります
class Foo extends React.Component {
  UNSAFE_componentWillMount() {}
  UNSAFE_componentWillReceiveProps() {}
  UNSAFE_componentWillUpdate() {}
}

// checkAliases: true に設定すると、接頭辞なしのバージョンも警告対象になります
class Bar extends React.Component {
  componentWillMount() {}
  componentWillReceiveProps() {}
  componentWillUpdate() {}
}

このルールに対して 正しい コードの例：

class Foo extends React.Component {
  componentDidMount() {}
  componentDidUpdate() {}
  render() {}
}

設定

このルールは以下のプロパティを持つ設定オブジェクトを受け入れます。

checkAliases

type: boolean

default: false

接頭辞なしのライフサイクルメソッドのチェックを行うかどうか。 true に設定すると、componentWillMount、componentWillReceiveProps、componentWillUpdate のいずれも、UNSAFE_ 版だけでなく、警告対象になります。安全でないライフサイクルメソッドを完全に回避するには、この値を true に設定することをお勧めします。

使用方法

設定ファイルまたは CLI でこのルールを 有効化 するには、次のようにします：

Config (.oxlintrc.json)

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

CLI

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

参照

• ルールのソース