fix(eslint-plugin-react-hooks): "additionalHooks" docs are misleading

Closes #29045
facebook · May 12, 2024 · 9ecaa20 · 9ecaa20
1 parent a1ace9d
commit 9ecaa20
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 1 deletion.
diff --git a/packages/eslint-plugin-react-hooks/README.md b/packages/eslint-plugin-react-hooks/README.md
@@ -58,7 +58,7 @@ This option accepts a regex to match the names of custom Hooks that have depende
   "rules": {
     // ...
     "react-hooks/exhaustive-deps": ["warn", {
-      "additionalHooks": "(useMyCustomHook|useMyOtherCustomHook)"
+      "additionalHooks": "^(useMyCustomHook|useMyOtherCustomHook)$"
     }]
   }
 }

diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
@@ -532,6 +532,16 @@ const tests = {
       `,
       options: [{additionalHooks: 'useAnotherEffect'}],
     },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useCustomEffectExtended(() => {
+            console.log(props.foo);
+          }, []);
+        }
+      `,
+      options: [{additionalHooks: '^useCustomEffect$'}],
+    },
     {
       code: normalizeIndent`
         function MyComponent(props) {
@@ -3613,6 +3623,43 @@ const tests = {
         },
       ],
     },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useCustomEffect(() => {
+            console.log(props.foo);
+          }, []);
+
+          useCustomEffectExtended(() => {
+            console.log(props.foo);
+          }, []);
+        }
+      `,
+      options: [{additionalHooks: '^useCustomEffect$'}],
+      errors: [
+        {
+          message:
+            "React Hook useCustomEffect has a missing dependency: 'props.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useCustomEffect(() => {
+                    console.log(props.foo);
+                  }, [props.foo]);
+        
+                  useCustomEffectExtended(() => {
+                    console.log(props.foo);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
     {
       code: normalizeIndent`
         function MyComponent() {