no-set-state-in-component-did-mount
Full Name in eslint-plugin-react-x
react-x/no-set-state-in-component-did-mountFull Name in @eslint-react/eslint-plugin
@eslint-react/no-set-state-in-component-did-mountFeatures
🔍
Presets
corerecommendedrecommended-typescriptrecommended-type-checked
What it does
Disallows calling this.setState in componentDidMount outside of functions, such as callbacks.
Updating the state after a component mount will trigger a second render() call and can lead to property/layout thrashing.
Examples
Failing
import React from "react";
interface MyComponentProps {}
interface MyComponentStateState {
name: string;
}
class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
componentDidMount() {
this.setState({ name: "John" });
// ^^^^^^^^^^^^^^^^^^^^^^^^^^
// - Do not call `this.setState` in `componentDidMount` outside of functions, such as callbacks.
}
render() {
return <div>Hello {this.state.name}</div>;
}
}