From f48f24518a3a66fb308d32bea648e0256276cf31 Mon Sep 17 00:00:00 2001
From: Jordan Brown <jmbrown@meta.com>
Date: Thu, 22 May 2025 17:09:42 -0400
Subject: [PATCH] [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.
---
 .../__tests__/ESLintRuleExhaustiveDeps-test.js  | 17 +++++++++++++++++
 .../src/rules/ExhaustiveDeps.ts                 | 15 +++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
index 8c5eeb004593a..555c54148ec1e 100644
--- a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
+++ b/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,
+        },
+      ],
+    },
   ],
 };
 
diff --git a/packages/eslint-plugin-react-hooks/src/rules/ExhaustiveDeps.ts b/packages/eslint-plugin-react-hooks/src/rules/ExhaustiveDeps.ts
index 624d28e3b332c..d59a1ff79202c 100644
--- a/packages/eslint-plugin-react-hooks/src/rules/ExhaustiveDeps.ts
+++ b/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);