Add rule for disallowing .bind in JSX props. Closes #184

Author: Daniel15

docs/rules/jsx-no-bind.md

@@ -0,0 +1,74 @@
+# No `.bind()` or arrow functions in JSX props
+
+A `bind` call or [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) in a JSX prop will create a brand new function on every single render. This is bad for performance, as it will result in the garbage collector being invoked way more than is necessary.
+
+## Rule Details
+
+The following patterns are considered warnings:
+
+```js
+<div onClick={this._handleClick.bind(this)}></div>
+```
+```js
+<div onClick={() => console.log('Hello!'))}></div>
+```
+
+The following patterns are not considered warnings:
+```js
+<div onClick={this._handleClick}></div>
+```
+
+## Protip
+
+A common use case of `bind` in render is when rendering a list, to have a separate callback per list item:
+
+```js
+var List = React.createClass({
+  render() {
+    return (
+      <ul>
+        {this.props.items.map(item =>
+          <li key={item.id} onClick={this.props.onItemClick.bind(null, item.id)}>
+            ...
+          </li>
+        )}
+      </ul>
+    );
+  }
+});
+```
+
+Rather than doing it this way, pull the repeated section into its own component:
+
+```js
+var List = React.createClass({
+  render() {
+    return (
+      <ul>
+        {this.props.items.map(item =>
+          <ListItem key={item.id} item={item} onItemClick={this.props.onItemClick} />
+        )}
+      </ul>
+    );
+  }
+});
+
+var ListItem = React.createClass({
+  render() {
+    return (
+        <li onClick={this._onClick}>
+          ...
+        </li>
+    );
+  },
+  _onClick() {
+    this.props.onItemClick(this.props.item.id);
+  }
+});
+```
+
+This will speed up rendering, as it avoids the need to create new functions (through `bind` calls) on every render.
+
+## When Not To Use It
+
+If you do not want to enforce that `bind` or arrow functions are not used in props, then you can disable this rule.

index.js

@@ -14,6 +14,7 @@ module.exports = {
     'no-did-update-set-state': require('./lib/rules/no-did-update-set-state'),
     'react-in-jsx-scope': require('./lib/rules/react-in-jsx-scope'),
     'jsx-uses-vars': require('./lib/rules/jsx-uses-vars'),
+    'jsx-no-bind': require('./lib/rules/jsx-no-bind'),
     'jsx-no-undef': require('./lib/rules/jsx-no-undef'),
     'jsx-quotes': require('./lib/rules/jsx-quotes'),
     'no-unknown-property': require('./lib/rules/no-unknown-property'),
@@ -45,6 +46,7 @@ module.exports = {
     'no-did-update-set-state': 0,
     'react-in-jsx-scope': 0,
     'jsx-uses-vars': 1,
+    'jsx-no-bind': 0,
     'jsx-no-undef': 0,
     'jsx-quotes': 0,
     'no-unknown-property': 0,

lib/rules/jsx-no-bind.js

@@ -0,0 +1,50 @@
+/**
+ * @fileoverview Prevents usage of Function.prototype.bind and arrow functions
+ *               in React component definition.
+ * @author Daniel Lo Nigro <dan.cx>
+ */
+'use strict';
+
+// -----------------------------------------------------------------------------
+// Rule Definition
+// -----------------------------------------------------------------------------
+
+module.exports = function(context) {
+  var configuration = context.options[0] || {};
+
+  return {
+    JSXAttribute: function(node) {
+      if (!node.value || !node.value.expression) {
+        return;
+      }
+      var valueNode = node.value.expression;
+      if (
+        !configuration.allowBind &&
+        valueNode.type === 'CallExpression' &&
+        valueNode.callee.property.name === 'bind'
+      ) {
+        context.report(node, 'JSX props should not use .bind()');
+      } else if (
+        !configuration.allowArrowFunctions &&
+        valueNode.type === 'ArrowFunctionExpression'
+      ) {
+        context.report(node, 'JSX props should not use arrow functions');
+      }
+    }
+  };
+};
+
+module.exports.schema = [{
+  type: 'object',
+  properties: {
+    allowArrowFunctions: {
+      default: false,
+      type: 'boolean'
+    },
+    allowBind: {
+      default: false,
+      type: 'boolean'
+    }
+  },
+  additionalProperties: false
+}];

tests/lib/rules/jsx-no-bind.js

@@ -0,0 +1,83 @@
+/**
+ * @fileoverview Prevents usage of Function.prototype.bind and arrow functions
+ *               in React component definition.
+ * @author Daniel Lo Nigro <dan.cx>
+ */
+'use strict';
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+var rule = require('../../../lib/rules/jsx-no-bind');
+var RuleTester = require('eslint').RuleTester;
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+var ruleTester = new RuleTester();
+ruleTester.run('jsx-no-bind', rule, {
+
+  valid: [
+    // Not covered by the rule
+    {
+      code: '<div onClick={this._handleClick}></div>',
+      parser: 'babel-eslint'
+    },
+    {
+      code: '<div meaningOfLife={42}></div>',
+      parser: 'babel-eslint'
+    },
+
+    // bind() explicitly allowed
+    {
+      code: '<div onClick={this._handleClick.bind(this)}></div>',
+      options: [{allowBind: true}],
+      parser: 'babel-eslint'
+    },
+
+    // Arrow functions explicitly allowed
+    {
+      code: '<div onClick={() => alert("1337")}></div>',
+      options: [{allowArrowFunctions: true}],
+      parser: 'babel-eslint'
+    }
+  ],
+
+  invalid: [
+    // .bind()
+    {
+      code: '<div onClick={this._handleClick.bind(this)}></div>',
+      errors: [{message: 'JSX props should not use .bind()'}],
+      parser: 'babel-eslint'
+    },
+    {
+      code: '<div onClick={someGlobalFunction.bind(this)}></div>',
+      errors: [{message: 'JSX props should not use .bind()'}],
+      parser: 'babel-eslint'
+    },
+    {
+      code: '<div onClick={window.lol.bind(this)}></div>',
+      errors: [{message: 'JSX props should not use .bind()'}],
+      parser: 'babel-eslint'
+    },
+
+    // Arrow functions
+    {
+      code: '<div onClick={() => alert("1337")}></div>',
+      errors: [{message: 'JSX props should not use arrow functions'}],
+      parser: 'babel-eslint'
+    },
+    {
+      code: '<div onClick={() => 42}></div>',
+      errors: [{message: 'JSX props should not use arrow functions'}],
+      parser: 'babel-eslint'
+    },
+    {
+      code: '<div onClick={param => { first(); second(); }}></div>',
+      errors: [{message: 'JSX props should not use arrow functions'}],
+      parser: 'babel-eslint'
+    }
+  ]
+});