ESLint - Component should be written as a pure function (react prefer/stateless function)

Question

ESLint is giving me this error on a react project.

ESLint - Component should be written as a pure function (react prefer/stateless function)

It poi

Answer 1

If you rely on props, then there is a better (somewhat arguable, as of this writing) way to fix this error without writing out Stateless functions - by writing a PureComponent and using this eslint rule [source]:

"react/prefer-stateless-function": [2, { "ignorePureComponents": true }],

With above rule, the following snippet is valid (since it depends on props)

class Foo extends React.PureComponent {
  render() {
    return 
{this.props.foo}
;
  }
}

React team plans to build optimizations around SFC but they are not there yet. So until that happens, SFCs will not offer any benefits over PureComponents. In fact, they will be slightly worse as they will not prevent wasteful renders.