Complete rule no-access-state-in-setstate

Author: jaaberg

lib/rules/no-access-state-in-setstate.js

@@ -1,6 +1,6 @@
 /**
  * @fileoverview Prevent usage of this.state within setState
- * @author Rolf Erik Lekang
+ * @author Rolf Erik Lekang, Jørgen Aaberg
  */
 
 'use strict';
@@ -21,23 +21,117 @@ module.exports = {
   create: function(context) {
     function isSetStateCall(node) {
       return node.type === 'CallExpression' &&
-        node.callee &&
         node.callee.property &&
-        node.callee.property.name === 'setState';
+        node.callee.property.name === 'setState' &&
+        node.callee.object.type === 'ThisExpression';
     }
 
+    // The methods array contains all methods or functions that are using this.state
+    // or that are calling another method or function using this.state
+    const methods = [];
+    // The vars array contains all variables that contains this.state
+    const vars = [];
     return {
-      ThisExpression: function(node) {
-        var memberExpression = node.parent;
-        if (memberExpression.property.name === 'state') {
-          var current = memberExpression;
+      CallExpression(node) {
+        // Appends all the methods that are calling another
+        // method containg this.state to the methods array
+        methods.map(method => {
+          if (node.callee.name === method.methodName) {
+            let current = node.parent;
+            while (current.type !== 'Program') {
+              if (current.type === 'MethodDefinition') {
+                methods.push({
+                  methodName: current.key.name,
+                  node: method.node
+                });
+                break;
+              }
+              current = current.parent;
+            }
+          }
+        });
+
+        // Finding all CallExpressions that is inside a setState
+        // to further check if they contains this.state
+        let current = node.parent;
+        while (current.type !== 'Program') {
+          if (isSetStateCall(current)) {
+            const methodName = node.callee.name;
+            methods.map(method => {
+              if (method.methodName === methodName) {
+                context.report(
+                  method.node,
+                  'Use callback in setState when referencing the previous state.'
+                );
+              }
+            });
+
+            break;
+          }
+          current = current.parent;
+        }
+      },
+
+      MemberExpression(node) {
+        if (
+          node.property.name === 'state' &&
+          node.object.type === 'ThisExpression'
+        ) {
+          let current = node;
           while (current.type !== 'Program') {
+            // Reporting if this.state is directly within this.setState
             if (isSetStateCall(current)) {
-              context.report({
-                node: memberExpression,
-                message: 'Use callback in setState when referencing the previous state.'
+              context.report(
+                node,
+                'Use callback in setState when referencing the previous state.'
+              );
+              break;
+            }
+
+            // Storing all functions and methods that contains this.state
+            if (current.type === 'MethodDefinition') {
+              methods.push({
+                methodName: current.key.name,
+                node: node
               });
               break;
+            } else if (current.type === 'FunctionExpression') {
+              methods.push({
+                methodName: current.parent.key.name,
+                node: node
+              });
+              break;
+            }
+
+            // Storing all variables containg this.state
+            if (current.type === 'VariableDeclarator') {
+              vars.push({
+                node: node,
+                scope: context.getScope()
+              });
+              break;
+            }
+
+            current = current.parent;
+          }
+        }
+      },
+
+      Identifier(node) {
+        // Checks if the identifier is a variable within an object
+        let current = node;
+        while (current.parent.type === 'BinaryExpression') {
+          current = current.parent;
+        }
+        if (current.parent.value === current) {
+          while (current.type !== 'Program') {
+            if (isSetStateCall(current)) {
+              vars
+                .filter(v => v.scope === context.getScope())
+                .map(v => context.report(
+                  v.node,
+                  'Use callback in setState when referencing the previous state.'
+                ));
             }
             current = current.parent;
           }

tests/lib/rules/no-access-state-in-setstate.js

@@ -1,17 +1,17 @@
 /**
  * @fileoverview Prevent usage of this.state within setState
- * @author Rolf Erik Lekang
+ * @author Rolf Erik Lekang, Jørgen Aaberg
  */
 'use strict';
 
 // ------------------------------------------------------------------------------
 // Requirements
 // ------------------------------------------------------------------------------
 
-var rule = require('../../../lib/rules/no-access-state-in-setstate');
-var RuleTester = require('eslint').RuleTester;
+const rule = require('../../../lib/rules/no-access-state-in-setstate');
+const RuleTester = require('eslint').RuleTester;
 
-var parserOptions = {
+const parserOptions = {
   ecmaVersion: 6,
   ecmaFeatures: {
     jsx: true
@@ -22,7 +22,7 @@ var parserOptions = {
 // Tests
 // ------------------------------------------------------------------------------
 
-var ruleTester = new RuleTester();
+const ruleTester = new RuleTester();
 ruleTester.run('no-access-state-in-setstate', rule, {
   valid: [{
     code: [
@@ -33,6 +33,19 @@ ruleTester.run('no-access-state-in-setstate', rule, {
       '});'
     ].join('\n'),
     parserOptions: parserOptions
+  }, {
+    code: [
+      'var Hello = React.createClass({',
+      '  multiplyValue: function(obj) {',
+      '    return obj.value*2',
+      '  },',
+      '  onClick: function() {',
+      '    var value = this.state.value',
+      '    this.multiplyValue({ value: value })',
+      '  }',
+      '});'
+    ].join('\n'),
+    parserOptions: parserOptions
   }],
 
   invalid: [{