Merge pull request #1690 from mindspacepdx/am-should-component-update

[Fix] Rule prop-types includes nextProps checking in shouldComponentUpdate
jsx-eslint · Feb 19, 2018 · c996740 · c996740
2 parents e26b7e2 + 8ca344a
commit c996740
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 2 deletions.
diff --git a/lib/rules/prop-types.js b/lib/rules/prop-types.js
@@ -121,6 +121,24 @@ module.exports = {
       return false;
     }
 
+    /**
+     * Check if we are in a class constructor
+     * @return {boolean} true if we are in a class constructor, false if not
+     */
+    function inShouldComponentUpdate() {
+      let scope = context.getScope();
+      while (scope) {
+        if (
+          scope.block && scope.block.parent &&
+          scope.block.parent.key && scope.block.parent.key.name === 'shouldComponentUpdate'
+        ) {
+          return true;
+        }
+        scope = scope.upper;
+      }
+      return false;
+    }
+
     /**
     * Checks if a prop is being assigned a value props.bar = 'bar'
     * @param {ASTNode} node The AST node being checked.
@@ -146,7 +164,7 @@ module.exports = {
         node.object.type === 'ThisExpression' && node.property.name === 'props'
       );
       const isStatelessFunctionUsage = node.object.name === 'props' && !isAssignmentToProp(node);
-      const isNextPropsUsage = node.object.name === 'nextProps' && inComponentWillReceiveProps();
+      const isNextPropsUsage = node.object.name === 'nextProps' && (inComponentWillReceiveProps() || inShouldComponentUpdate());
       return isClassUsage || isStatelessFunctionUsage || isNextPropsUsage;
     }
 
@@ -549,7 +567,9 @@ module.exports = {
       const isInClassComponent = utils.getParentES6Component() || utils.getParentES5Component();
       const isNotInConstructor = !inConstructor();
       const isNotInComponentWillReceiveProps = !inComponentWillReceiveProps();
-      if (isDirectProp && isInClassComponent && isNotInConstructor && isNotInComponentWillReceiveProps) {
+      const isNotInShouldComponentUpdate = !inShouldComponentUpdate();
+      if (isDirectProp && isInClassComponent && isNotInConstructor && isNotInComponentWillReceiveProps
+        && isNotInShouldComponentUpdate) {
         return void 0;
       }
       if (!isDirectProp) {
@@ -1043,6 +1063,10 @@ module.exports = {
           markPropTypesAsUsed(node);
         }
 
+        if (node.key.name === 'shouldComponentUpdate' && destructuring) {
+          markPropTypesAsUsed(node);
+        }
+
         if (!node.static || node.kind !== 'get' || !propsUtil.isPropTypesDeclaration(node)) {
           return;
         }

diff --git a/tests/lib/rules/prop-types.js b/tests/lib/rules/prop-types.js
@@ -3148,6 +3148,48 @@ ruleTester.run('prop-types', rule, {
       errors: [
         {message: '\'foo\' is missing in props validation'}
       ]
+    }, {
+      code: [
+        'class Hello extends Component {',
+        '  static propTypes = forbidExtraProps({',
+        '    bar: PropTypes.func',
+        '  })',
+        '  shouldComponentUpdate(nextProps) {',
+        '    if (nextProps.foo) {',
+        '      return;',
+        '    }',
+        '  }',
+        '  render() {',
+        '    return <div bar={this.props.bar} />;',
+        '  }',
+        '}'
+      ].join('\n'),
+      parser: 'babel-eslint',
+      settings: Object.assign({}, settings, {
+        propWrapperFunctions: ['forbidExtraProps']
+      }),
+      errors: [
+        {message: '\'foo\' is missing in props validation'}
+      ]
+    }, {
+      code: [
+        'class Hello extends Component {',
+        '  shouldComponentUpdate({foo}) {',
+        '    if (foo) {',
+        '      return;',
+        '    }',
+        '  }',
+        '  render() {',
+        '    return <div bar={this.props.bar} />;',
+        '  }',
+        '}',
+        'Hello.propTypes = {',
+        '    bar: PropTypes.func',
+        '  }'
+      ].join('\n'),
+      errors: [
+        {message: '\'foo\' is missing in props validation'}
+      ]
     }, {
       code: [
         'class Hello extends React.Component {',