eslint-plugin-react-hooks: allow OptionalMemberExpression in deps (facebook#18819) (facebook#18820)

coolkev · web-flow · commit 7992ca10df49 · 2020-05-05T13:53:42.000+01:00
* eslint-plugin-react-hooks: allow OptionalMemberExpression in deps (facebook#18819) * add test case for facebook#18819 * fix test * run prettier
diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
@@ -1755,6 +1755,38 @@ const tests = {
         },
       ],
     },
+    {
+      code: normalizeIndent`
+        function MyComponent({ history }) {
+          useEffect(() => {
+            return [
+              history?.foo
+            ];
+          }, []);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'history?.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [history?.foo]',
+              output: normalizeIndent`
+                function MyComponent({ history }) {
+                  useEffect(() => {
+                    return [
+                      history?.foo
+                    ];
+                  }, [history?.foo]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
     {
       code: normalizeIndent`
         function MyComponent() {
diff --git a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
@@ -1429,7 +1429,8 @@ function scanForDeclaredBareFunctions({
  */
 function getDependency(node) {
   if (
-    node.parent.type === 'MemberExpression' &&
+    (node.parent.type === 'MemberExpression' ||
+      node.parent.type === 'OptionalMemberExpression') &&
     node.parent.object === node &&
     node.parent.property.name !== 'current' &&
     !node.parent.computed &&
@@ -1456,6 +1457,7 @@ function getDependency(node) {
  * (foo) -> 'foo'
  * foo.(bar) -> 'foo.bar'
  * foo.bar.(baz) -> 'foo.bar.baz'
+ * foo?.(bar) -> 'foo?.bar'
  * Otherwise throw.
  */
 function toPropertyAccessString(node) {
@@ -1465,6 +1467,10 @@ function toPropertyAccessString(node) {
     const object = toPropertyAccessString(node.object);
     const property = toPropertyAccessString(node.property);
     return `${object}.${property}`;
+  } else if (node.type === 'OptionalMemberExpression' && !node.computed) {
+    const object = toPropertyAccessString(node.object);
+    const property = toPropertyAccessString(node.property);
+    return `${object}?.${property}`;
   } else {
     throw new Error(`Unsupported node type: ${node.type}`);
   }
