New rule: Report usages of class methods besides render returning JSX

README.md

@@ -121,6 +121,7 @@ Enable the rules that you would like to use.
 * [react/no-unused-state](docs/rules/no-unused-state.md): Prevent definitions of unused state properties
 * [react/no-will-update-set-state](docs/rules/no-will-update-set-state.md): Prevent usage of `setState` in `componentWillUpdate`
 * [react/prefer-es6-class](docs/rules/prefer-es6-class.md): Enforce ES5 or ES6 class for React Components
+* [react/prefer-separate-components](docs/rules/prefer-separate-components.md): Report usages of class methods besides render returning JSX
 * [react/prefer-stateless-function](docs/rules/prefer-stateless-function.md): Enforce stateless React Components to be written as a pure function
 * [react/prop-types](docs/rules/prop-types.md): Prevent missing props validation in a React component definition
 * [react/react-in-jsx-scope](docs/rules/react-in-jsx-scope.md): Prevent missing `React` when using JSX

docs/rules/prefer-separate-components.md

@@ -0,0 +1,95 @@
+# Report usages of class methods besides render returning JSX (react/prefer-separate-components)
+
+If component functions other than `render` are returning JSX, they should be moved into separate components.
+
+## Rule Details
+
+The following patterns are considered warnings:
+
+```jsx
+class Foo extends React.Component {
+  renderBar() {
+    return <span>bar</span>;
+  }
+  render() {
+    return (
+      <div>
+        foo
+        {this.renderBar()}
+      </div>
+    );
+  }
+}
+
+class Foo extends React.Component {
+  renderBar() {
+    return React.createElement('span', null, 'bar');
+  }
+  render() {
+    return React.createElement(
+      'div',
+      null,
+      'foo',
+      this.renderBar()
+    );
+  }
+}
+
+class Foo extends React.Component {
+  renderBars() {
+    const bars = ['bar', 'bar', 'bar'];
+    return bars.map((bar) => <span>{bar}</span>);
+  }
+  render() {
+    return (
+      <div>
+        foo
+        {this.renderBars()}
+      </div>
+    );
+  }
+}
+
+class Foo extends React.Component {
+  renderBars() {
+    const bars = ['bar', 'bar', 'bar'];
+    return bars.map((bar) => React.createElement('span', null, bar));
+  }
+  render() {
+    return React.createElement(
+      'div',
+      null,
+      'foo',
+      this.renderBars()
+    );
+  }
+}
+```
+
+The following patterns are **not** considered warnings:
+
+```jsx
+class Foo extends React.Component {
+  render() {
+    return <div>foo</div>;
+  }
+}
+
+class Foo extends React.Component {
+  render() {
+    return React.createElement('div', null, 'foo');
+  }
+}
+
+createReactClass({
+  render() {
+    return <div>foo</div>;
+  }
+});
+
+createReactClass({
+  render() {
+    return React.createElement('div', null, 'foo');
+  }
+});
+```

index.js

@@ -65,6 +65,7 @@ const allRules = {
   'no-unused-state': require('./lib/rules/no-unused-state'),
   'no-will-update-set-state': require('./lib/rules/no-will-update-set-state'),
   'prefer-es6-class': require('./lib/rules/prefer-es6-class'),
+  'prefer-separate-components': require('./lib/rules/prefer-separate-components'),
   'prefer-stateless-function': require('./lib/rules/prefer-stateless-function'),
   'prop-types': require('./lib/rules/prop-types'),
   'react-in-jsx-scope': require('./lib/rules/react-in-jsx-scope'),

lib/rules/prefer-separate-components.js

@@ -0,0 +1,53 @@
+/**
+ * @fileoverview Report usages of class methods besides render returning JSX
+ */
+'use strict';
+
+const Components = require('../util/Components');
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Report usages of class methods besides render returning JSX',
+      category: 'Best Practices',
+      recommended: false
+    },
+    schema: []
+  },
+
+  create: Components.detect((context, components, utils) => {
+    function report(node) {
+      context.report({
+        node,
+        message: '{{ function }} should be moved into a separate component.',
+        data: {
+          function: node.key.name
+        }
+      });
+    }
+
+    return {
+      MethodDefinition: function(node) {
+        if (!utils.getParentES6Component()) {
+          return;
+        }
+        if (node.key.name !== 'render' && utils.isReturningJSX(node)) {
+          report(node);
+        }
+      },
+
+      Property: function(node) {
+        if (!utils.getParentES5Component) {
+          return;
+        }
+        if (node.key.name !== 'render' && utils.isReturningJSX(node)) {
+          report(node);
+        }
+      }
+    };
+  })
+};

lib/util/Components.js

@@ -303,6 +303,16 @@ function componentRule(rule, context) {
       return calledOnReact;
     },
 
+    isReturningArrayMap(node) {
+      return (
+        node.type === 'ReturnStatement' &&
+        node.argument &&
+        node.argument.type === 'CallExpression' &&
+        node.argument.callee.property &&
+        node.argument.callee.property.name === 'map'
+      );
+    },
+
     getReturnPropertyAndNode(ASTnode) {
       let property;
       let node = ASTnode;
@@ -321,6 +331,9 @@ function componentRule(rule, context) {
           node = utils.findReturnStatement(node);
           property = 'argument';
       }
+      if (this.isReturningArrayMap(node)) {
+        return this.getReturnPropertyAndNode(node.argument.arguments[0]);
+      }
       return {
         node: node,
         property: property

tests/lib/rules/prefer-separate-components.js

@@ -0,0 +1,198 @@
+/**
+ * @fileoverview Report usages of class methods besides render returning JSX
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/prefer-separate-components');
+const RuleTester = require('eslint').RuleTester;
+
+const parserOptions = {
+  ecmaVersion: 8,
+  sourceType: 'module',
+  ecmaFeatures: {
+    experimentalObjectRestSpread: true,
+    jsx: true
+  }
+};
+
+const ruleTester = new RuleTester({parserOptions});
+ruleTester.run('prefer-separate-components', rule, {
+  valid: [{
+    code: `
+      class Foo extends React.Component {
+        render() {
+          return <div>foo</div>;
+        }
+      }
+    `
+  }, {
+    code: `
+      class Foo extends React.Component {
+        render() {
+          return React.createElement('div', null, 'foo');
+        }
+      }
+    `
+  }, {
+    code: `
+      createReactClass({
+        render() {
+          return <div>foo</div>;
+        }
+      });
+    `
+  }, {
+    code: `
+      createReactClass({
+        render() {
+          return React.createElement('div', null, 'foo');
+        }
+      });
+    `
+  }],
+  invalid: [{
+    code: `
+      class Foo extends React.Component {
+        renderBar() {
+          return <span>bar</span>;
+        }
+        render() {
+          return (
+            <div>
+              foo
+              {this.renderBar()}
+            </div>
+          );
+        }
+      }
+    `,
+    errors: 1
+  }, {
+    code: `
+      class Foo extends React.Component {
+        renderBar() {
+          return React.createElement('span', null, 'bar');
+        }
+        render() {
+          return React.createElement(
+            'div',
+            null,
+            'foo',
+            this.renderBar()
+          );
+        }
+      }
+    `,
+    errors: 1
+  }, {
+    code: `
+      class Foo extends React.Component {
+        renderBars() {
+          const bars = ['bar', 'bar', 'bar'];
+          return bars.map((bar) => <span>{bar}</span>);
+        }
+        render() {
+          return (
+            <div>
+              foo
+              {this.renderBars()}
+            </div>
+          );
+        }
+      }
+    `,
+    errors: 1
+  }, {
+    code: `
+      class Foo extends React.Component {
+        renderBars() {
+          const bars = ['bar', 'bar', 'bar'];
+          return bars.map((bar) => React.createElement('span', null, bar));
+        }
+        render() {
+          return React.createElement(
+            'div',
+            null,
+            'foo',
+            this.renderBars()
+          );
+        }
+      }
+    `,
+    errors: 1
+  }, {
+    code: `
+      createReactClass({
+        renderBars() {
+          const bars = ['bar', 'bar', 'bar'];
+          return bars.map((bar) => <span>{bar}</span>);
+        },
+        render() {
+          return (
+            <div>
+              foo
+              {this.renderBars()}
+            </div>
+          );
+        }
+      });
+    `,
+    errors: 1
+  }, {
+    code: `
+      createReactClass({
+        renderBars() {
+          const bars = ['bar', 'bar', 'bar'];
+          return bars.map((bar) => React.createElement('span', null, bar));
+        },
+        render() {
+          return React.createElement(
+            'div',
+            null,
+            'foo',
+            this.renderBars()
+          );
+        }
+      });
+    `,
+    errors: 1
+  }, {
+    code: `
+      createReactClass({
+        renderBar() {
+          return <span>bar</span>;
+        },
+        render() {
+          return (
+            <div>
+              foo
+              {this.renderBar()}
+            </div>
+          );
+        }
+      });
+    `,
+    errors: 1
+  }, {
+    code: `
+      createReactClass({
+        renderBar() {
+          return React.createElement('span', null, 'bar');
+        },
+        render() {
+          return React.createElement(
+            'div',
+            null,
+            'foo',
+            this.renderBar()
+          );
+        }
+      });
+    `,
+    errors: 1
+  }]
+});