Stateless functional components are simpler than class based components and will benefit from future React performance optimizations specific to these components.
This rule will check your class based React components for
displayName
, propTypes
, contextTypes
, defaultProps
, render
and useless constructor (same detection as ESLint no-useless-constructor rule)this.props
and this.context
React.PureComponent
(if the ignorePureComponents
flag is true)ref
attribute in JSXrender
method that return anything but JSX: undefined
, null
, etc. (only in React <15.0.0, see shared settings for React version configuration)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 a warning:
var Hello = createReactClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
The following pattern is not considered a warning:
const Foo = function(props, context) {
const {
location
} = context.router;
return <div>{props.foo}</div>;
};
The following pattern is not considered a warning in React <15.0.0:
class Foo extends React.Component {
render() {
if (!this.props.foo) {
return null
}
return <div>{this.props.foo}</div>;
}
}
...
"react/prefer-stateless-function": [<enabled>, { "ignorePureComponents": <ignorePureComponents> }]
...
enabled
: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0.ignorePureComponents
: optional boolean set to true
to ignore components extending from React.PureComponent
(default to false
).ignorePureComponents
When true
the rule will ignore Components extending from React.PureComponent
that use this.props
or this.context
.
The following pattern is considered okay and does not cause warnings:
class Foo extends React.PureComponent {
render() {
return <div>{this.props.foo}</div>;
}
}
The following pattern is considered a warning because it's not using props or context:
class Foo extends React.PureComponent {
render() {
return <div>Bar</div>;
}
}