https://github.com/buildo/eslint-plugin-class-prefer-methods
eslint plugin to report not-needed usage of arrow functions instead of class methods
https://github.com/buildo/eslint-plugin-class-prefer-methods
Last synced: about 1 year ago
JSON representation
eslint plugin to report not-needed usage of arrow functions instead of class methods
- Host: GitHub
- URL: https://github.com/buildo/eslint-plugin-class-prefer-methods
- Owner: buildo
- Created: 2017-07-23T09:38:53.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-07-04T09:45:14.000Z (about 8 years ago)
- Last Synced: 2024-08-11T00:48:20.700Z (almost 2 years ago)
- Language: TypeScript
- Size: 10.7 KB
- Stars: 3
- Watchers: 4
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# eslint-plugin-class-prefer-methods
Eslint plugin to report not-needed usage of arrow functions instead of methods in a React Component class.
It also throws an error if you pass a class method as callback to some `children`
## Install
```sh
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
;
}
}
```