Rule Proposal: stateless-function-component or no-stateless-component-class

[oguzbilgic]

Rule would warn if a stateless component isn't written as a pure function

[lo1tuma]

Maybe prefer-stateless-function would be a better name.

[yannickcr]

Can you give me some examples of what you would like to forbid/validate with this rule ?

[lo1tuma]

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.

This should be considered as a problem:

class Foo extends React.Component {
    render() {
        return <div>{this.props.foo}</div>;
    }
}

This should not be considered as a problem:

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>;
    }
}

[oguzbilgic]

@gaearon You might wanna chime in to this, based on your tweet.

https://twitter.com/dan_abramov/status/656585973552324608

[gaearon]

I agree that's a cool thing to have.
I don't have time or expertise to help with implementation at the moment.

[yannickcr]

Working on it.

[gabrielenosso]

How should a component with own methods (which are not lifecycle methods) be?

Example:

class Foo extends React.Component {
    logout() {
        this.props.actions.logout(this.props.destination);
    }

    render() {
        return <div onClick={this.logout}>Yeah!</div>;
    }
}

[ljharb]

@yannickcr it's possible the rule has a bug here ^ if a component has instance methods, or instance properties attached in the constructor, it shouldn't be an SFC, because it has state - this is state.

[yannickcr]

@ljharb Yes, I responded in #491 (comment). I think a check is missing for this.

[gabrielenosso]

Any news about this? Will it be fixed in next release? :)

Anyway, thanks for your great work!