-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Make prefer-stateless-function PureComponent aware #781
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,32 +8,33 @@ This rule will check your class based React components for | |
|
||
* methods/properties other than `displayName`, `propTypes`, `render` and useless constructor (same detection as ESLint [no-useless-constructor rule](http://eslint.org/docs/rules/no-useless-constructor)) | ||
* instance property other than `this.props` and `this.context` | ||
* extension of `React.PureComponent` () | ||
* presence of `ref` attribute in JSX | ||
* `render` method that return anything but JSX: `undefined`, `null`, etc. (only in React <15.0.0, see [shared settings](https://github.com/yannickcr/eslint-plugin-react/blob/master/README.md#configuration) for React version configuration) | ||
|
||
If none of these 4 elements are found, the rule will warn you to write this component as a pure function. | ||
If none of these elements are found, the rule will warn you to write this component as a pure function. | ||
|
||
The following pattern is considered warnings: | ||
The following pattern is considered a warning: | ||
|
||
```js | ||
```jsx | ||
var Hello = React.createClass({ | ||
render: function() { | ||
return <div>Hello {this.props.name}</div>; | ||
} | ||
}); | ||
``` | ||
|
||
The following pattern is not considered warnings: | ||
The following pattern is not considered a warning: | ||
|
||
```js | ||
```jsx | ||
const Foo = function(props) { | ||
return <div>{props.foo}</div>; | ||
}; | ||
``` | ||
|
||
The following pattern is not considered warning in React <15.0.0: | ||
The following pattern is not considered a warning in React <15.0.0: | ||
|
||
```js | ||
```jsx | ||
class Foo extends React.Component { | ||
render() { | ||
if (!this.props.foo) { | ||
|
@@ -43,3 +44,39 @@ class Foo extends React.Component { | |
} | ||
} | ||
``` | ||
|
||
|
||
## Rule Options | ||
|
||
```js | ||
... | ||
"prefer-stateless-function": [<enabled>, { "ignorePureComponent": <ignorePureComponent> }] | ||
... | ||
``` | ||
|
||
* `enabled`: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0. | ||
* `ignorePureComponent`: optional boolean set to `true` to ignore components extending from `React.PureComponent` (default to `false`). | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ignorePureComponents There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks, fixed in 9f76459 |
||
|
||
### `ignorePureComponent` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ignorePureComponents There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks, fixed in 9f76459 |
||
|
||
When `true` the rule will ignore Components extending from `React.PureComponent` that use `this.props` or `this.context`. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can you indicate the default value here please? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Done (added to commit). There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. forgot to push.. done now |
||
|
||
The following patterns is considered okay and does not cause warnings: | ||
|
||
```jsx | ||
class Foo extends React.PureComponent { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I still think this pattern should be considered a warning - being a PureComponent does not mean this is better as a stateful component. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Being a PureComponent does not make it a stateful component right? It just makes it benefit from There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Being a PureComponent does not make it stateless either - the two things are orthogonal. I'm saying |
||
render() { | ||
return <div>{this.props.foo}</div>; | ||
} | ||
} | ||
``` | ||
|
||
The following pattern is considered a warning because it's not using props or context: | ||
|
||
```jsx | ||
class Foo extends React.PureComponent { | ||
render() { | ||
return <div>Bar</div>; | ||
} | ||
} | ||
``` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ignorePureComponents not ignorePureComponent
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, fixed in 9f76459