[eslint-plugin-react-hooks] add option experimental_effectHooksWithNullDependenciesAllowed

Author: kassens

packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js

@@ -1468,8 +1468,57 @@ const tests = {
         }
       `,
     },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useSpecialEffect(() => {
+            console.log(props.foo);
+          }, null);
+        }
+      `,
+      options: [
+        {
+          additionalHooks: 'useSpecialEffect',
+          experimental_effectHooksWithNullDependenciesAllowed: [
+            'useSpecialEffect',
+          ],
+        },
+      ],
+    },
   ],
   invalid: [
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useSpecialEffect(() => {
+            console.log(props.foo);
+          }, null);
+        }
+      `,
+      options: [{additionalHooks: 'useSpecialEffect'}],
+      errors: [
+        {
+          message:
+            "React Hook useSpecialEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies.",
+        },
+        {
+          message:
+            "React Hook useSpecialEffect 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) {
+                  useSpecialEffect(() => {
+                    console.log(props.foo);
+                  }, [props.foo]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
     {
       code: normalizeIndent`
         function MyComponent(props) {

packages/eslint-plugin-react-hooks/src/rules/ExhaustiveDeps.ts

@@ -61,27 +61,41 @@ const rule = {
           enableDangerousAutofixThisMayCauseInfiniteLoops: {
             type: 'boolean',
           },
+          experimental_effectHooksWithNullDependenciesAllowed: {
+            type: 'array',
+            items: {
+              type: 'string',
+            },
+          },
         },
       },
     ],
   },
   create(context: Rule.RuleContext) {
+    const rawOptions = context.options && context.options[0];
+
     // Parse the `additionalHooks` regex.
     const additionalHooks =
-      context.options &&
-      context.options[0] &&
-      context.options[0].additionalHooks
-        ? new RegExp(context.options[0].additionalHooks)
+      rawOptions && rawOptions.additionalHooks
+        ? new RegExp(rawOptions.additionalHooks)
         : undefined;
 
     const enableDangerousAutofixThisMayCauseInfiniteLoops: boolean =
-      (context.options &&
-        context.options[0] &&
-        context.options[0].enableDangerousAutofixThisMayCauseInfiniteLoops) ||
+      (rawOptions &&
+        rawOptions.enableDangerousAutofixThisMayCauseInfiniteLoops) ||
       false;
 
+    const experimental_effectHooksWithNullDependenciesAllowed: ReadonlyArray<string> =
+      rawOptions &&
+      Array.isArray(
+        rawOptions.experimental_effectHooksWithNullDependenciesAllowed,
+      )
+        ? rawOptions.experimental_effectHooksWithNullDependenciesAllowed
+        : [];
+
     const options = {
       additionalHooks,
+      experimental_effectHooksWithNullDependenciesAllowed,
       enableDangerousAutofixThisMayCauseInfiniteLoops,
     };
 
@@ -1318,6 +1332,18 @@ const rule = {
         return;
       }
 
+      // special case effects which allows null as the equivalent of useEffect with no array.
+      if (
+        !declaredDependenciesNode ||
+        (options.experimental_effectHooksWithNullDependenciesAllowed.includes(
+          reactiveHookName,
+        ) &&
+          declaredDependenciesNode.type === 'Literal' &&
+          declaredDependenciesNode.value === null)
+      ) {
+        return;
+      }
+
       // Check the declared dependencies for this reactive hook. If there is no
       // second argument then the reactive callback will re-run on every render.
       // So no need to check for dependency inclusion.