Merge pull request #2099 from jomasti/issue-2094

Fix false positives inside lifecycle methods
jsx-eslint · Dec 30, 2018 · dfeeb81 · dfeeb81
2 parents 254a84a + 55e5fc1
commit dfeeb81
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 3 deletions.
diff --git a/lib/util/usedPropTypes.js b/lib/util/usedPropTypes.js
@@ -285,13 +285,14 @@ module.exports = function usedPropTypesInstructions(context, components, utils)
    * @returns {Boolean} True if we are using a prop, false if not.
    */
   function isPropTypesUsage(node) {
+    const isThisPropsUsage = node.object.type === 'ThisExpression' && node.property.name === 'props';
+    const isPropsUsage = isThisPropsUsage || node.object.name === 'nextProps' || node.object.name === 'prevProps';
     const isClassUsage = (
       (utils.getParentES6Component() || utils.getParentES5Component()) &&
-      ((node.object.type === 'ThisExpression' && node.property.name === 'props')
-      || isPropArgumentInSetStateUpdater(node))
+      (isThisPropsUsage || isPropArgumentInSetStateUpdater(node))
     );
     const isStatelessFunctionUsage = node.object.name === 'props' && !isAssignmentToProp(node);
-    return isClassUsage || isStatelessFunctionUsage || inLifeCycleMethod();
+    return isClassUsage || isStatelessFunctionUsage || (isPropsUsage && inLifeCycleMethod());
   }
 
   /**

diff --git a/tests/lib/rules/prop-types.js b/tests/lib/rules/prop-types.js
@@ -2170,6 +2170,83 @@ ruleTester.run('prop-types', rule, {
           pragma: 'Foo'
         }
       }
+    },
+    {
+      code: `
+      class Foo extends React.Component {
+        propTypes = {
+          actions: PropTypes.object.isRequired,
+        };
+        componentWillReceiveProps (nextProps) {
+          this.props.actions.doSomething();
+        }
+
+        componentWillUnmount () {
+          this.props.actions.doSomething();
+        }
+
+        render() {
+          return <div>foo</div>;
+        }
+      }
+      `,
+      parser: 'babel-eslint'
+    },
+    {
+      code: `
+      class Foo extends React.Component {
+        componentDidUpdate() { this.inputRef.focus(); }
+        render() {
+          return (
+            <div>
+              <input ref={(node) => { this.inputRef = node; }} />
+            </div>
+          )
+        }
+      }
+      `
+    },
+    {
+      code: `
+        class Foo extends React.Component {
+          componentDidUpdate(nextProps, nextState) {
+            const {
+                first_organization,
+                second_organization,
+            } = this.state;
+            return true;
+          }
+          render() {
+            return <div>hi</div>;
+          }
+        }
+      `
+    },
+    {
+      code: `
+      class Foo extends React.Component {
+        shouldComponentUpdate(nextProps) {
+          if (this.props.search !== nextProps.search) {
+            let query = nextProps.query;
+            let result = nextProps.list.filter(item => {
+              return (item.name.toLowerCase().includes(query.trim().toLowerCase()));
+            });
+
+            this.setState({ result });
+
+            return true;
+          }
+        }
+        render() {
+          return <div>foo</div>;
+        }
+      }
+      Foo.propTypes = {
+        search: PropTypes.object,
+        list: PropTypes.array,
+        query: PropTypes.string,
+      };
+      `
     }
   ],