Add no-did-mount-set-state and no-did-update-set-state rules

Author: yannickcr

README.md

@@ -46,7 +46,9 @@ Finally, enable all of the rules that you would like to use.
     "react/prop-types": 1,
     "react/display-name": 1,
     "react/wrap-multilines": 1,
-    "react/self-closing-comp": 1
+    "react/self-closing-comp": 1,
+    "react/no-did-mount-set-state": 1,
+    "react/no-did-update-set-state": 1
   }
 }
 ```
@@ -58,13 +60,16 @@ Finally, enable all of the rules that you would like to use.
 * [display-name](docs/rules/display-name.md): Prevent missing displayName in a React component definition
 * [wrap-multilines](docs/rules/wrap-multilines.md): Prevent missing parentheses around multilines JSX
 * [self-closing-comp](docs/rules/self-closing-comp.md): Prevent extra closing tags for components without children
+* [no-did-mount-set-state](docs/rules/no-did-mount-set-state.md): Prevent usage of setState in componentDidMount
+* [no-did-update-set-state](docs/rules/no-did-update-set-state.md): Prevent usage of setState in componentDidUpdate
 
 ## To Do
 
 * no-deprecated: Prevent usage of deprecated methods ([React 0.12 Updated API](http://facebook.github.io/react/blog/2014/10/28/react-v0.12.html#new-terminology-amp-updated-apis))
 * no-classic: Prevent usage of "classic" methods ([#2700](https://github.com/facebook/react/pull/2700))
 * [Implement relevant rules from David Chang's React Style Guide](https://reactjsnews.com/react-style-guide-patterns-i-like)
 * [Implement relevant rules from John Cobb's best practices and conventions](http://web-design-weekly.com/2015/01/29/opinionated-guide-react-js-best-practices-conventions/)
+* [Implement relevant rules from Alexander Early's tips and best practices](http://aeflash.com/2015-02/react-tips-and-best-practices.html)
 
 [Any rule idea is welcome !](https://github.com/yannickcr/eslint-plugin-react/issues)
 

docs/rules/no-did-mount-set-state.md

@@ -0,0 +1,33 @@
+# Prevent usage of setState in componentDidMount (no-did-mount-set-state)
+
+Updating the state after a component mount will trigger a second `render()` call and can lead to property/layout thrashing.
+
+## Rule Details
+
+The following patterns are considered warnings:
+
+```js
+var Hello = React.createClass({
+  componentDidMount: function() {
+     this.setState({
+        name: this.props.name.toUpperCase()
+      });
+    },
+  render: function() {
+    return <div>Hello {this.state.name}</div>;
+  }
+});
+```
+
+The following patterns are not considered warnings:
+
+```js
+var Hello = React.createClass({
+  componentDidMount: function() {
+    this.props.onMount();
+  },
+  render: function() {
+    return <div>Hello {this.props.name}</div>;
+  }
+});
+```

docs/rules/no-did-update-set-state.md

@@ -0,0 +1,33 @@
+# Prevent usage of setState in componentDidMount (no-did-update-set-state)
+
+Updating the state after a component update will trigger a second `render()` call and can lead to property/layout thrashing.
+
+## Rule Details
+
+The following patterns are considered warnings:
+
+```js
+var Hello = React.createClass({
+  componentDidUpdate: function() {
+     this.setState({
+        name: this.props.name.toUpperCase()
+      });
+    },
+  render: function() {
+    return <div>Hello {this.state.name}</div>;
+  }
+});
+```
+
+The following patterns are not considered warnings:
+
+```js
+var Hello = React.createClass({
+  componentDidUpdate: function() {
+    this.props.onUpdate();
+  },
+  render: function() {
+    return <div>Hello {this.props.name}</div>;
+  }
+});
+```

index.js

@@ -6,13 +6,17 @@ module.exports = {
     'prop-types': require('./lib/rules/prop-types'),
     'display-name': require('./lib/rules/display-name'),
     'wrap-multilines': require('./lib/rules/wrap-multilines'),
-    'self-closing-comp': require('./lib/rules/self-closing-comp')
+    'self-closing-comp': require('./lib/rules/self-closing-comp'),
+    'no-did-mount-set-state': require('./lib/rules/no-did-mount-set-state'),
+    'no-did-update-set-state': require('./lib/rules/no-did-update-set-state')
   },
   rulesConfig: {
     'no-multi-comp': 0,
     'prop-types': 0,
     'display-name': 0,
     'wrap-multilines': 0,
-    'self-closing-comp': 0
+    'self-closing-comp': 0,
+    'no-did-mount-set-state': 0,
+    'no-did-update-set-state': 0
   }
 };

lib/rules/no-did-mount-set-state.js

@@ -0,0 +1,33 @@
+/**
+ * @fileoverview Prevent usage of setState in componentDidMount
+ * @author Yannick Croissant
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+  // --------------------------------------------------------------------------
+  // Public
+  // --------------------------------------------------------------------------
+
+  return {
+
+    'MemberExpression': function(node) {
+      if (node.object.type !== 'ThisExpression' || node.property.name !== 'setState') {
+        return;
+      }
+      var ancestors = context.getAncestors(node);
+      for (var i = 0, j = ancestors.length; i < j; i++) {
+        if (ancestors[i].type !== 'Property' || ancestors[i].key.name !== 'componentDidMount') {
+          continue;
+        }
+        context.report(node, 'Do not use setState in componentDidMount');
+      }
+    }
+  };
+
+};

lib/rules/no-did-update-set-state.js

@@ -0,0 +1,33 @@
+/**
+ * @fileoverview Prevent usage of setState in componentDidUpdate
+ * @author Yannick Croissant
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+  // --------------------------------------------------------------------------
+  // Public
+  // --------------------------------------------------------------------------
+
+  return {
+
+    'MemberExpression': function(node) {
+      if (node.object.type !== 'ThisExpression' || node.property.name !== 'setState') {
+        return;
+      }
+      var ancestors = context.getAncestors(node);
+      for (var i = 0, j = ancestors.length; i < j; i++) {
+        if (ancestors[i].type !== 'Property' || ancestors[i].key.name !== 'componentDidUpdate') {
+          continue;
+        }
+        context.report(node, 'Do not use setState in componentDidUpdate');
+      }
+    }
+  };
+
+};

tests/lib/rules/no-did-mount-set-state.js

@@ -0,0 +1,67 @@
+/**
+ * @fileoverview Prevent usage of setState in componentDidMount
+ * @author Yannick Croissant
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+var eslint = require('eslint').linter;
+var ESLintTester = require('eslint-tester');
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+var eslintTester = new ESLintTester(eslint);
+eslintTester.addRuleTest('lib/rules/no-did-mount-set-state', {
+
+    valid: [
+        {
+            code: '\
+              var Hello = React.createClass({\
+                render: function() {\
+                  return <div>Hello {this.props.name}</div>;\
+                }\
+              });',
+            ecmaFeatures: {
+              jsx: true
+            }
+        }, {
+            code: '\
+              var Hello = React.createClass({\
+                componentDidMount: function() {},\
+                render: function() {\
+                  return <div>Hello {this.props.name}</div>;\
+                }\
+              });',
+            ecmaFeatures: {
+              jsx: true
+            }
+        }
+    ],
+
+    invalid: [
+        {
+            code: '\
+              var Hello = React.createClass({\
+                componentDidMount: function() {\
+                  this.setState({\
+                    name: this.props.name.toUpperCase()\
+                  });\
+                },\
+                render: function() {\
+                  return <div>Hello {this.state.name}</div>;\
+                }\
+              });',
+            ecmaFeatures: {
+              jsx: true
+            },
+            errors: [{
+                message: 'Do not use setState in componentDidMount'
+            }]
+        }
+    ]
+});

tests/lib/rules/no-did-update-set-state.js

@@ -0,0 +1,67 @@
+/**
+ * @fileoverview Prevent usage of setState in componentDidUpdate
+ * @author Yannick Croissant
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+var eslint = require('eslint').linter;
+var ESLintTester = require('eslint-tester');
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+var eslintTester = new ESLintTester(eslint);
+eslintTester.addRuleTest('lib/rules/no-did-update-set-state', {
+
+    valid: [
+        {
+            code: '\
+              var Hello = React.createClass({\
+                render: function() {\
+                  return <div>Hello {this.props.name}</div>;\
+                }\
+              });',
+            ecmaFeatures: {
+              jsx: true
+            }
+        }, {
+            code: '\
+              var Hello = React.createClass({\
+                componentDidUpdate: function() {},\
+                render: function() {\
+                  return <div>Hello {this.props.name}</div>;\
+                }\
+              });',
+            ecmaFeatures: {
+              jsx: true
+            }
+        }
+    ],
+
+    invalid: [
+        {
+            code: '\
+              var Hello = React.createClass({\
+                componentDidUpdate: function() {\
+                  this.setState({\
+                    name: this.props.name.toUpperCase()\
+                  });\
+                },\
+                render: function() {\
+                  return <div>Hello {this.state.name}</div>;\
+                }\
+              });',
+            ecmaFeatures: {
+              jsx: true
+            },
+            errors: [{
+                message: 'Do not use setState in componentDidUpdate'
+            }]
+        }
+    ]
+});