Component should be written as a pure function (react/prefer-stateless-function)
The rule should warn for components that are defined as a class or with React.createClass but could be safely written as pure stateless functions.
his should be considered as a problem:
|
1 2 3 4 5 |
class Foo extends React.Component { render() { return <div>{this.props.foo}</div>; } } |
This should not be considered as a problem:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
const Foo = function (props) { return <div>{props.foo}</div>; }; const Foo = ({foo}) => <div>{foo}</div>; // using other lifecycle methods than render class Foo extends React.Component { shouldComponentMount() { return fasle; } render() { return <div>{this.props.foo}</div>; } } // using state class Foo extends React.Component { changeState() { this.setState({foo: 'clicked'}); } render() { return <div onClick={this.changeState.bind(this)}>{this.state.foo || 'bar'}</div>; } } |
