Eslint plugin to ensure usage of class methods instead of arrow-function properties whenever possible
npm install eslint-plugin-class-prefer-methodschildrensh
npm i --save-dev eslint-plugin-class-prefer-methods
`Usage
In your .eslintrc:`javascript
{
"plugins": [
"class-prefer-methods"
],
"rules": {
"class-prefer-methods/prefer-methods": 2
}
}
`Why
Arrow function properties are automatically binded to this.
This is really handy when you need to pass it as a callback to a children, but it's not necessary in most cases and it impacts performances: the RAM occupied by the component and the JS time to instantiate it are both higher.Examples
Example of incorrect code for "class-prefer-methods/prefer-methods": 2 rule:`jsx
class Example extends React.Component { state = { clicked: false }
// this could safely be a class method
shouldRender = () => {
return this.props.shouldRender === true;
}
// this should be an arrow-function property as it's passed as callback to a children
onClick() {
this.setState({ clicked: true })
}
render() {
if (!this.shouldRender()) {
return null;
}
return
;
}}
`Example of correct code for
"class-prefer-methods/prefer-methods": 2 rule:`jsx
class Example extends React.Component { state = { clicked: false }
// class methods are lighter
shouldRender() {
return this.props.shouldRender === true;
}
// callbacks that use "this" must be arrow-functions to work properly
onClick = () => {
this.setState({ clicked: true })
}
render() {
if (!this.shouldRender()) {
return null;
}
return
;
}}
``