Rules
no-component-will-mount

no-component-will-mount

Rule category

Restriction.

What it does

Prevents usage of componentWillMount in class components.

Why is this bad?

This API has been renamed from componentWillMount to UNSAFE_componentWillMount. The old name has been deprecated. In a future major version of React, only the new name will work.

Run the rename-unsafe-lifecycles codemod to automatically update your components.

Examples

Failing

import React from "react";
 
interface ExampleProps {
  ExampleProps.name: stringname: string;
}
 
class class ExampleExample extends React.class React.Component<P = {}, S = {}, SS = any>Component<ExampleProps> {
  Example.componentWillMount(): void
Called immediately before mounting occurs, and before {@link Component.render } . Avoid introducing any side-effects or subscriptions in this method. Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate } or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps } prevents this from being invoked.
@deprecated16.3, use {@link ComponentLifecycle.componentDidMountcomponentDidMount} or the constructor instead; will stop working in React 17@see{@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state}@see{@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}
componentWillMount
() {
// ... } }

Passing

import React from "react";
 
interface ExampleProps {
  ExampleProps.name: stringname: string;
}
 
class class ExampleExample extends React.class React.Component<P = {}, S = {}, SS = any>Component<ExampleProps> {
  Example.UNSAFE_componentWillMount(): void
Called immediately before mounting occurs, and before {@link Component.render } . Avoid introducing any side-effects or subscriptions in this method. This method will not stop working in React 17. Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate } or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps } prevents this from being invoked.
@deprecated16.3, use {@link ComponentLifecycle.componentDidMountcomponentDidMount} or the constructor instead@see{@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state}@see{@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}
UNSAFE_componentWillMount
() {
// ... } }

Further Reading