no-component-will-update

Rule category

Restriction.

What it does

Prevents usage of componentWillUpdate in class components.

Why is this bad?

This API has been renamed from componentWillUpdate to UNSAFE_componentWillUpdate. 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";
 
class class ExampleComponentExampleComponent extends React.class React.Component<P = {}, S = {}, SS = any>Component {
  ExampleComponent.componentWillUpdate(): voidCalled immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call 
{@link 
Component.setState
}
 here.

Note: the presence of 
{@link 
NewLifecycle.getSnapshotBeforeUpdate
getSnapshotBeforeUpdate
}

or 
{@link 
StaticLifecycle.getDerivedStateFromProps
getDerivedStateFromProps
}
 prevents
this from being invoked.
@deprecated16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17@see{@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update}@see{@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}componentWillUpdate() {
    // ...
  }
}

Passing

import React from "react";
 
class class ExampleComponentExampleComponent extends React.class React.Component<P = {}, S = {}, SS = any>Component {
  ExampleComponent.UNSAFE_componentWillUpdate(): voidCalled immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call 
{@link 
Component.setState
}
 here.

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 getSnapshotBeforeUpdate instead@see{@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update}@see{@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path}UNSAFE_componentWillUpdate() {
    // ...
  }
}