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-updateFull Name in @eslint-react/eslint-plugin
@eslint-react/no-set-state-in-component-did-updatePresets
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
react-x/no-set-state-in-component-did-mount
Disallows callingthis.setStateincomponentDidMountoutside functions such as callbacks.react-x/no-set-state-in-component-will-update
Disallows callingthis.setStateincomponentWillUpdateoutside functions such as callbacks.