logoESLint React
Rules

no-set-state-in-component-did-update

Disallows calling 'this.setState' in 'componentDidUpdate' outside functions such as callbacks.

Full Name in eslint-plugin-react-x

react-x/no-set-state-in-component-did-update

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-set-state-in-component-did-update

Presets

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

Rule Details

Updating the state after a component mounts will trigger a second render() call and can lead to property/layout thrashing.

Common Violations

Invalid

import React from "react";

interface MyComponentProps {}

interface MyComponentState {
  name: string;
}

class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
  componentDidUpdate() {
    this.setState({ name: "John" });
    //   ^^^ Do not call `this.setState` in `componentDidUpdate` outside functions such as callbacks.
  }

  render() {
    return <div>Hello {this.state.name}</div>;
  }
}

Resources

Further Reading


See Also

On this page