Add detection of subRender methods to prefer-stateless-function

Author: jseminck

docs/rules/prefer-stateless-function.md

@@ -11,6 +11,7 @@ This rule will check your class based React components for
 * extension of `React.PureComponent` (if the `ignorePureComponents` flag is true)
 * presence of `ref` attribute in JSX
 * the use of decorators
+* methods inside a React Component that return JSX other than the `render()` method (if the `subRenderMethods` flag is true)
 * `render` method that return anything but JSX: `undefined`, `null`, etc. (only in React <15.0.0, see [shared settings](https://github.com/yannickcr/eslint-plugin-react/blob/master/README.md#configuration) for React version configuration)
 
 If none of these elements are found, the rule will warn you to write this component as a pure function.
@@ -55,12 +56,13 @@ class Foo extends React.Component {
 
 ```js
 ...
-"react/prefer-stateless-function": [<enabled>, { "ignorePureComponents": <ignorePureComponents> }]
+"react/prefer-stateless-function": [<enabled>, { "ignorePureComponents": <ignorePureComponents>, "subRenderMethods": <subRenderMethods> }]
 ...
 ```
 
 * `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`).
+* `subRenderMethods`: optional boolean set to `true` to also warn on methods in React Components that return JSX other than the `render()` method (default to `false`).
 
 ### `ignorePureComponents`
 
@@ -85,3 +87,27 @@ class Foo extends React.PureComponent {
   }
 }
 ```
+
+### `subRenderMethods`
+
+When `true` the rule will warn when you use methods that return JSX in a React Component other than the `render()` method
+
+The following patterns is considered a warning:
+
+```jsx
+class Foo extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {myState: ""}
+  }
+
+  renderFoo() {
+    return <span>{this.state.myState}</span>
+  }
+
+  render() {
+    return <div>{this.renderFoo()}</div>;
+  }
+}
+```

lib/rules/prefer-stateless-function.js

@@ -28,6 +28,11 @@ module.exports = {
         ignorePureComponents: {
           default: false,
           type: 'boolean'
+        },
+        // Enable by default when making a new major release.
+        subRenderMethods: {
+          default: false,
+          type: 'boolean'
         }
       },
       additionalProperties: false
@@ -296,6 +301,20 @@ module.exports = {
         markThisAsUsed(node);
       },
 
+      // Report non-"render" methods that return JSX
+      MethodDefinition: function(node) {
+        if (
+          utils.isES6Component(node.parent.parent) &&
+          node.key.name !== 'render' &&
+          utils.isReturningJSX(node.value)
+        ) {
+          context.report({
+            node: node,
+            message: 'Method returning JSX should be written as stateless function component'
+          });
+        }
+      },
+
       // Mark `this` usage
       MemberExpression: function(node) {
         if (node.object.type !== 'ThisExpression') {

tests/lib/rules/prefer-stateless-function.js

@@ -305,6 +305,33 @@ ruleTester.run('prefer-stateless-function', rule, {
         }
       `,
       parser: 'babel-eslint'
+    }, {
+      // Methods that do not return JSX are still valid
+      code: `
+        class Foo extends React.Component {
+          renderString() {
+            return "X";
+          }
+
+          renderNumber() {
+            return 42;
+          }
+
+          getSomeData() {
+            return {}
+          }
+
+          render() {
+            return (
+              <div>
+                {this.renderString()}
+                {this.renderNumber()}
+                {this.getSomeData()}
+              </div>
+            )
+          }
+        }
+      `
     }
   ],
 
@@ -595,6 +622,22 @@ ruleTester.run('prefer-stateless-function', rule, {
       errors: [{
         message: 'Component should be written as a pure function'
       }]
+    }, {
+      // Sub-render method that returns JSX
+      code: `
+        class Foo extends React.Component {
+          renderFoo() {
+            return <div />;
+          }
+
+          render() {
+            return this.renderFoo();
+          }
+        }
+      `,
+      errors: [{
+        message: 'Method returning JSX should be written as stateless function component'
+      }]
     }
   ]
 });