prefer-stateless-function triggers despite meeting all criteria with PureComponent

[krainboltgreene]

criteria:

When true the rule will ignore Components extending from React.PureComponent that use this.props or this.context.

• [x] extends from PureComponent
• [x] uses this.props

eslint-plugin-react version:

"version": "6.7.1"

eslint file:

module.exports = {
  parser: "babel-eslint",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  },
  plugins: [
    "babel",
    "react"
  ],
  env: {
    es6: true
  },
  rules: {
    "react/prefer-stateless-function": ["warn", {ignorePureComponents: true}]
}

Code:

import React, {PureComponent, PropTypes} from "react"
import {connect} from "react-redux"

import Layout from "../Layout"

export default connect()(class SignUp extends PureComponent {
  static propTypes = {
    dispatch: PropTypes.func.isRequired,
    form: PropTypes.shape({
      email: PropTypes.string.isRequired,
      password: PropTypes.string.isRequired
    }).isRequired
  }
  render () {
    const {form} = this.props

    return <Layout subtitle="Join our website!">
      <section>
        <input type="email" value={form.email} />
        <input type="password" value={form.password} />
      </section>
    </Layout>
  }
})

Error:

[ljharb]

If you use React.PureComponent instead of the named import, does the same thing happen?

[krainboltgreene]

Yes.

[krainboltgreene]

If I remove the currying, it no longer warns me. It seems like it gets confused by the connect() currying.

[lucasbento]

Same thing happening here even with a simple component:

// package.json
"eslint": "^4.6.1",
"eslint-plugin-react": "^7.3.0",

// .eslintrc
{
  "extends": "airbnb",
  "parser": "babel-eslint",
  "rules": {
    "no-console": 0,
    "max-len": [
      1,
      120,
      2
    ],
    "no-param-reassign": [
      2,
      {
        "props": false
      }
    ],
    "no-continue": 0,
    "no-underscore-dangle": 0,
    "generator-star-spacing": 0,
    "class-methods-use-this": 0,
    "import/no-extraneous-dependencies": 0,
    "no-use-before-define": 0,
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "react/prefer-stateless-function": [2, { "ignorePureComponents": true }]
  },
  "env": {
    "jest": true
  }
}

[jseminck]

Strange. This case is supported and has tests for it: https://github.com/yannickcr/eslint-plugin-react/blob/master/tests/lib/rules/prefer-stateless-function.js#L42

[ljharb]

@lucasbento are you setting your React version correctly in eslintrc? PureComponent doesn't exist before v15.2 or so

[Lepozepo]

Seeing the same issue having just created a new project with create-react-native-app

[ljharb]

Given that we have passing tests, I'm going to close this. If you're still seeing issues in the latest version, please file a new issue.