react-hooks-eslint-rule: add component props to pureScopes (#18051), …

…update yarn.lock
facebook · Jul 27, 2020 · 65aaacf · 65aaacf
1 parent d29bf59
commit 65aaacf
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 2 deletions.
diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
@@ -1376,6 +1376,27 @@ const tests = {
         }
       `,
     },
+    {
+      code: normalizeIndent`
+        function Example({ sortBy }) {
+          const foo = () => useMemo(() => console.log(sortBy), [sortBy])
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function Example(props) {
+          const usefoo = () => useMemo(() => console.log(props.sortBy), [props.sortBy])
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function useMyThing(myRef) {
+          const foo = () => useCallback(() => console.log(myRef), [myRef]);
+        }
+      `,
+    },
   ],
   invalid: [
     {
@@ -6967,6 +6988,36 @@ const tests = {
         },
       ],
     },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          const local1 = {};
+          useMemo(() => {
+            console.log(local1);
+          }, [local1, props]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useMemo has an unnecessary dependency: 'props'. " +
+            'Either exclude it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local1]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const local1 = {};
+                  useMemo(() => {
+                    console.log(local1);
+                  }, [local1]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
   ],
 };
 

diff --git a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
@@ -290,7 +290,24 @@ export default {
         if (!currentScope) {
           return;
         }
-        componentScope = currentScope;
+        componentScope = getComponentScope(currentScope);
+        pureScopes.add(componentScope);
+      }
+
+      function getComponentScope(hookParentScope) {
+        let evaluatedScope = hookParentScope;
+
+        while (evaluatedScope) {
+          const blockId = evaluatedScope.block.id;
+          if (
+            blockId &&
+            (/^[A-Z]*$/.test(blockId.name[0]) || blockId.name.startsWith('use'))
+          ) {
+            return evaluatedScope;
+          }
+          evaluatedScope = evaluatedScope.upper;
+        }
+        return hookParentScope;
       }
 
       // Next we'll define a few helpers that helps us

diff --git a/yarn.lock b/yarn.lock
@@ -7619,7 +7619,7 @@ jsbn@~0.1.0:
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
   integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
 
-jsdom@^15.2.1, "jsdom@npm:@gaearon/jsdom@15.2.1":
+jsdom@^15.2.1:
   version "15.2.1"
   resolved "https://registry.yarnpkg.com/@gaearon/jsdom/-/jsdom-15.2.1.tgz#23273b20b6c7b6ca70b54bc0b0eecdc518ae9694"
   integrity sha512-qQc4j+gyi06zrevvopql0pehAXrgTv71wGkKMQZg8bl2VYfv2dqbdtP0hD0TpHsuI7YF1XfE7DM62Nclr13vfA==
@@ -10114,6 +10114,11 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.8:
     object-assign "^4.1.0"
     prop-types "^15.5.10"
 
+react-is@^16.12.0, react-is@^16.8.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"