no-unsafe-component-will-mount

Full Name in eslint-plugin-react-x

react-x/no-unsafe-component-will-mount

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-unsafe-component-will-mount

Presets

x recommended recommended-typescript recommended-type-checked strict strict-typescript strict-type-checked

Rule Details

Using unsafe lifecycle methods like UNSAFE_componentWillMount makes your component's behavior less predictable and more likely to cause bugs. Consider using constructor or componentDidMount instead.

Examples

Using UNSAFE_componentWillMount in class components

UNSAFE_componentWillMount is a deprecated lifecycle method and may be removed in a future version of React. Initialization logic should go in the constructor, and side effects should go in componentDidMount.

// Problem: Uses an unsafe lifecycle method
import React from "react";

class MyComponent extends React.Component {
  UNSAFE_componentWillMount() {
    // ...
  }
}

// Recommended: initialize state in the constructor or as a class field, move side effects to componentDidMount
import React from "react";

class MyComponent extends React.Component {
  state = { counter: 0 };

  componentDidMount() {
    // Side effects belong here
  }
}

Versions

Resources

• Rule Source
• Test Source
• Rule Changelog

Further Reading

• React Docs: UNSAFE_componentWillMount
• Legacy React APIs: componentWillMount
• React Docs: Updating to Async Rendering
• React Docs: How to migrate to a function component

See Also

• react-x/no-unsafe-component-will-receive-props
  Warns about the use of UNSAFE_componentWillReceiveProps in class components.
• react-x/no-unsafe-component-will-update
  Warns about the use of UNSAFE_componentWillUpdate in class components.