Ignore ReactDOM.useFormState

facebook · Jun 24, 2024 · 510f053 · 510f053
1 parent 1e97088
commit 510f053
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 11 deletions.
diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
@@ -607,8 +607,6 @@ const tests = {
           const [state4, dispatch2] = React.useReducer();
           const [state5, maybeSetState] = useFunnyState();
           const [state6, maybeDispatch] = useFunnyReducer();
-          const [state7, dispatch3] = useFormState();
-          const [state8, dispatch4] = ReactDOM.useFormState();
           const [state9, dispatch5] = useActionState();
           const [state10, dispatch6] = React.useActionState();
           const [isPending1] = useTransition();
@@ -628,8 +626,6 @@ const tests = {
             setState2();
             dispatch1();
             dispatch2();
-            dispatch3();
-            dispatch4();
             dispatch5();
             dispatch6();
             startTransition1();
@@ -654,7 +650,7 @@ const tests = {
             maybeDispatch();
           }, [
             // Dynamic
-            state1, state2, state3, state4, state5, state6, state7, state8, state9, state10,
+            state1, state2, state3, state4, state5, state6, state9, state10,
             maybeRef1, maybeRef2,
             isPending2, isPending4,
 
@@ -1502,6 +1498,51 @@ const tests = {
         },
       ],
     },
+    {
+      // Affected code should use React.useActionState instead
+      code: normalizeIndent`
+        function ComponentUsingFormState(props) {
+          const [state7, dispatch3] = useFormState();
+          const [state8, dispatch4] = ReactDOM.useFormState();
+          useEffect(() => {
+            dispatch3();
+            dispatch4();
+
+            // dynamic
+            console.log(state7);
+            console.log(state8);
+
+          }, [state7, state8]);
+        }
+      `,
+      errors: [
+        {
+          message:
+            "React Hook useEffect has missing dependencies: 'dispatch3' and 'dispatch4'. " +
+            'Either include them or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [dispatch3, dispatch4, state7, state8]',
+              output: normalizeIndent`
+                function ComponentUsingFormState(props) {
+                  const [state7, dispatch3] = useFormState();
+                  const [state8, dispatch4] = ReactDOM.useFormState();
+                  useEffect(() => {
+                    dispatch3();
+                    dispatch4();
+
+                    // dynamic
+                    console.log(state7);
+                    console.log(state8);
+
+                  }, [dispatch3, dispatch4, state7, state8]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
     {
       code: normalizeIndent`
         function MyComponent(props) {

diff --git a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
@@ -181,8 +181,6 @@ export default {
       //               ^^^ true for this reference
       // const [state, dispatch] = useActionState() / React.useActionState()
       //               ^^^ true for this reference
-      // const [state, dispatch] = useFormState() / ReactDOM.useFormState()
-      //               ^^^ true for this reference
       // const ref = useRef()
       //       ^^^ true for this reference
       // const onStuff = useEffectEvent(() => {})
@@ -236,11 +234,10 @@ export default {
           return false;
         }
         let callee = init.callee;
-        // Step into `= React(DOM).something` initializer.
+        // Step into `= React.something` initializer.
         if (
           callee.type === 'MemberExpression' &&
-          (callee.object.name === 'React' ||
-            callee.object.name === 'ReactDOM') &&
+          callee.object.name === 'React' &&
           callee.property != null &&
           !callee.computed
         ) {
@@ -268,7 +265,6 @@ export default {
         } else if (
           name === 'useState' ||
           name === 'useReducer' ||
-          name === 'useFormState' ||
           name === 'useActionState'
         ) {
           // Only consider second value in initializing tuple stable.