no-set-state-in-component-did-update
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
Features
🔍
Presets
core
recommended
recommended-typescript
recommended-type-checked
What it does
Disallows calling this.setState
in componentDidUpdate
outside of functions, such as callbacks.
Why is this bad?
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 ExampleProps {}
interface ExampleState {
name: string;
}
class Example extends React.Component<ExampleProps, ExampleState> {
componentDidUpdate() {
this.setState({ name: "John" });
// ^^^^^^^^^^^^^^^^^^^^^^^^^^
// - Do not call `this.setState` in `componentDidUpdate` outside of functions, such as callbacks.
}
render() {
return <div>Hello {this.state.name}</div>;
}
}