react/no-arrow-function-lifecycle
Disallow arrow functions in class fields as React lifecycle methods
fixable
An arrow function in a class field is created again for every instance, and it isn't on the prototype. A subclass can't call it with super.componentDidMount(), and a test can't replace it on Component.prototype. React always calls lifecycle methods on the instance, so binding this with an arrow function gains nothing.
The rule covers render, every component* and UNSAFE_component* method, shouldComponentUpdate, getSnapshotBeforeUpdate, getChildContext, getDefaultProps, getInitialState and the static getDerivedStateFromProps, in classes and in createReactClass.
--fix rewrites the arrow function as a method.
Configure#
Off by default. To turn it on:
bunfig.toml
[lint.rules]
"react/no-arrow-function-lifecycle" = "error" # or "warn"Examples#
example.jsx2 problems
class Clock extends React.Component {
componentDidMount = () => {componentDidMount is a React lifecycle method, and should not be an arrow function or in a class field. Use an instance method instead.
this.timer = setInterval(this.tick, 1000);
};
render = () => <time>{this.state.now}</time>;render is a React lifecycle method, and should not be an arrow function or in a class field. Use an instance method instead.
}example.jsxNo problems
class Clock extends React.Component {
componentDidMount() {
this.timer = setInterval(this.tick, 1000);
}
// Not a lifecycle method: an arrow function keeps `this` when it is passed around.
tick = () => {
this.setState({ now: Date.now() });
};
render() {
return <time>{this.state.now}</time>;
}
}