fix(eslint-plugin-react-hooks): Support optional chaining when access…

…ing prototype method facebook#19061
fredvollmer · Jun 1, 2020 · fb8040d · fb8040d
1 parent 4c7036e
commit fb8040d
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 1 deletion.
diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
@@ -289,6 +289,24 @@ const tests = {
         }
       `,
     },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useCallback(() => {
+            console.log(props.foo?.x.y.toString());
+          }, [props.foo?.x.y]);
+        }
+      `,
+    },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useCallback(() => {
+            console.log(props.foo?.toString());
+          }, [props.foo]);
+        }
+      `,
+    },
     {
       code: normalizeIndent`
         function MyComponent() {
@@ -1221,6 +1239,34 @@ const tests = {
     },
   ],
   invalid: [
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useCallback(() => {
+            console.log(props.foo?.toString());
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useCallback has a missing dependency: 'props.foo?.toString'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo?.toString]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useCallback(() => {
+                    console.log(props.foo?.toString());
+                  }, [props.foo?.toString]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
     {
       code: normalizeIndent`
         function MyComponent() {

diff --git a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
@@ -1290,7 +1290,9 @@ function collectRecommendations({
       if (child.isSatisfiedRecursively) {
         if (child.hasRequiredNodesBelow) {
           // Remember this dep actually satisfied something.
-          satisfyingPaths.add(path);
+          // Here we only want to compare the "normalized" path, without any optional chaining ("?.") operator
+          // foo?.bar -> foo.bar
+          satisfyingPaths.add(path.replace(/\?$/, ""));
         }
         // It doesn't matter if there's something deeper.
         // It would be transitively satisfied since we assume immutability.