no-set-state-in-component-will-update
Full Name in eslint-plugin-react-x
react-x/no-set-state-in-component-will-updateFull Name in @eslint-react/eslint-plugin
@eslint-react/no-set-state-in-component-will-updateFeatures
🔍
Presets
corerecommendedrecommended-typescriptrecommended-type-checked
What it does
Disallows calling this.setState in componentWillUpdate 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> {
componentWillUpdate() {
this.setState({ name: "John" });
// ^^^^^^^^^^^^^^^^^^^^^^^^^^
// - Do not call `this.setState` in `componentWillUpdate` outside of functions, such as callbacks.
}
render() {
return <div>Hello {this.state.name}</div>;
}
}