[eslint] Add an option to require dependencies on effect hooks

Summary:

To prepare for automatic effect dependencies, some codebases may want to codemod
existing useEffect calls with no deps to include an explicit undefined second argument
in order to preserve the "run on every render" behavior. In sufficiently large codebases,
this may require a temporary enforcement period where all effects provide an explicit
dependencies argument.

Outside of migration, relying on a component to render can lead to real bugs,
especially when working with memoization.

Author: jbrown215

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

@@ -8344,6 +8344,23 @@ const testsTypescript = {
         },
       ],
     },
+    {
+      code: normalizeIndent`
+        function MyComponent(props) {
+          useEffect(() => {
+            console.log(props.foo);
+          });
+        }
+      `,
+      options: [{requireExplicitEffectDeps: true}],
+      errors: [
+        {
+          message:
+            'React Hook useEffect always requires dependencies. Please add a dependency array or an explicit `undefined`',
+          suggestions: undefined,
+        },
+      ],
+    },
   ],
 };
 

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

@@ -67,6 +67,9 @@ const rule = {
               type: 'string',
             },
           },
+          requireExplicitEffectDeps: {
+            type: 'boolean',
+          }
         },
       },
     ],
@@ -90,10 +93,13 @@ const rule = {
         ? rawOptions.experimental_autoDependenciesHooks
         : [];
 
+    const requireExplicitEffectDeps: boolean = rawOptions && rawOptions.requireExplicitEffectDeps || false;
+
     const options = {
       additionalHooks,
       experimental_autoDependenciesHooks,
       enableDangerousAutofixThisMayCauseInfiniteLoops,
+      requireExplicitEffectDeps,
     };
 
     function reportProblem(problem: Rule.ReportDescriptor) {
@@ -1340,6 +1346,15 @@ const rule = {
         return;
       }
 
+      if (!maybeNode && isEffect && options.requireExplicitEffectDeps) {
+        reportProblem({
+          node: reactiveHook,
+          message:
+            `React Hook ${reactiveHookName} always requires dependencies. ` +
+            `Please add a dependency array or an explicit \`undefined\``
+        });
+      }
+
       const isAutoDepsHook =
         options.experimental_autoDependenciesHooks.includes(reactiveHookName);